使用jquery.uploadify、jquery.Jcrop和php实现炫酷的图片裁剪

最新推荐文章于 2022-03-28 10:44:41 发布

原创最新推荐文章于 2022-03-28 10:44:41 发布 · 992 阅读

CC 4.0 BY-SA版权

本文介绍了一种利用jQuery插件实现图片上传及裁剪功能的方法。通过使用jquery.uploadify.js进行图片上传，并借助jquery.Jcrop.js实现精确的图片裁剪。文章详细展示了如何配置插件参数以及如何通过PHP完成最终的图片裁剪。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Demo演示地址

公司最近在做一个可视化编辑功能的网站

而里面最核心的一个功能之一就是上传并裁切图片

纯自己手写代码闭门造车的时代已经过去了

jquery的插件很多而好的插件会随着时间慢慢被我们挑选出来

就和达尔文的生物进化论中人类选择一样（有点扯远了）

第一步是上传图片了（入口为本地选取图片出口为图片路径）

逛论坛发现jquery.uploadify.js这个jquery上传插件挺好用的

官方下载地址http://www.uploadify.com/download/

使用方法也很简单

 $(document).ready(function(){
      $("#uploadify").uploadify({
	swf           : '/uploadify/uploadify.swf',
	uploader      : '/uploadify/uploadify.php',
	width         : 120
	height        : 30,

        });
});

图片上传后就交给裁剪图片的前一步——选取图片区域了

第二步则使用第二个jquery.Jcrop.js插件（入口为图片路径出口为裁剪坐标）

这个图片选取插件很漂亮大有超越当年的flash之势

把第一步上次好的图片用img标签调取出来

HTML代码如下

<div class="jc-demo-box">
	<img src="<?php echo $upload_path.$large_image_name;?>" id="target"/>
        <!-- 这里我是用php将图片地址取出 -->
	<div id="preview-pane">
		<div class="preview-container">
			<img src="<?php echo $upload_path.$large_image_name;?>" class="jcrop-preview"/>
		</div>
	</div>				
</div>

<form name="thumbnail" action="" method="post">
	<input type="hidden" name="x1" value="" id="x1" />
	<input type="hidden" name="y1" value="" id="y1" />
	<input type="hidden" name="x2" value="" id="x2" />
	<input type="hidden" name="y2" value="" id="y2" />
	<input type="hidden" name="w" value="" id="w" />
	<input type="hidden" name="h" value="" id="h" />
	<input type="submit" name="upload_thumbnail" value="确定裁切" id="save_thumb"/>
</form>

图片jquery代码如下：

 $(document).ready(function(){
	var jcrop_api,
	boundx,
	boundy,
	$preview = $('#preview-pane'),
	$pcnt = $('#preview-pane .preview-container'),
	$pimg = $('#preview-pane .preview-container img'),
	xsize = 100,
	ysize = 100;//设置需要裁剪成多大
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
	  boxWidth: 500,
	  boxHeight: 300,//设置操作区域的大小
	  bgFade:true,
	  setSelect: [ 0, 0, 0, 0 ],//初始裁剪框的位置
      onChange: updatePreview,//当裁剪框change时执行的方法
      onSelect: updatePreview,
	  onRelease:  clearCoords,
      aspectRatio: xsize / ysize
    },function(){
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      jcrop_api = this;
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c){	
		$('#x1').val(parseInt(c.x));
		$('#y1').val(parseInt(c.y));
		$('#x2').val(parseInt(c.x2));
		$('#y2').val(parseInt(c.y2));
		$('#w').val(parseInt(c.w));
		$('#h').val(parseInt(c.h));
		//将坐标记录下来 预备给php裁剪
		//这里使用parseInt()函数是因为这些坐标位置不一定是整数
		//所以其实我们切出来的大小是有概率误差的
      if (parseInt(c.w) > 0){
		//这里是图片预览区域显示方法
        var rx = xsize / c.w;
        var ry = ysize / c.h;
        $pimg.css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
      }
    };

  });

最后 第三步 就是用这几个坐标去执行php方法进行裁剪了

首先将这些坐标值传给裁剪函数：

$x1 = $_POST["x1"];
$y1 = $_POST["y1"];
$x2 = $_POST["x2"];
$y2 = $_POST["y2"];
$w = $_POST["w"];
$h = $_POST["h"];
$scale = $thumb_width/$w;//原图宽除以裁切宽
$cropped = resizeThumbnailImage($thumb_image_location, $large_image_location,$w,$h,$x1,$y1,$scale);

 
裁剪函数如下 
function resizeThumbnailImage($image, $width, $height,$scale){
	list($imagewidth, $imageheight, $imageType) = getimagesize($image);
	$imageType = image_type_to_mime_type($imageType);
	$newImageWidth = ceil($width * $scale);
	$newImageHeight = ceil($height * $scale);
	$newImage = imagecreatetruecolor($newImageWidth,$newImageHeight);
	imagecopyresampled($newImage,$source,0,0,$start_width,$start_height,$newImageWidth,$newImageHeight,$width,$height);
        return $thumb_image_name;
}

当然如果直接copy上面的代码

我可以很负责的告诉你——运行不起来

因为我这些的只是整个功能的流程和方法

具体的过程还有很多代码没贴出来

包括一些css php的读写文件等

这里的代码也做了简化

如果要深入研究和交流的童鞋可以下载一起探讨

百度云盘