利用jquery的imgAreaSelect插件实现图片裁剪示例

利用jquery的imgAreaSelect插件实现图片裁剪示例

将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作，现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能。我们来看看它的实现步骤：

1、包含进CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件

2、html代码(要裁剪的图片元素)

<img id="selectbanner" src="/pic/banner.jpg" />

3、imgAreaSelect的数据操作

$(‘#selectbanner‘).imgAreaSelect({ selectionColor: ‘blue‘, x1:0, y1:0, x2: 950,
maxWidth:950,minWidth:950,y2:400,minHeight:400,maxHeight:400,
selectionOpacity: 0.2 , onSelectEnd: preview });

这样即可在该图片元素中使用裁剪功能了，当选框确定之后我们要保存被选择的图片还得自己写代码来操作。下面是当确定好图片区域后点击一个裁剪按钮后的操作：

//裁剪确认操作
$("#sliceButton").click(function() {var pic = $(‘#selectbanner‘).attr(‘src‘);  
 var x,y,w,h;
 $.post(
  "/template/sliceBanner",
  {
   x:$(‘#selectbanner‘).data(‘x‘),
   y:$(‘#selectbanner‘).data(‘y‘),
   w:$(‘#selectbanner‘).data(‘w‘),
   h:$(‘#selectbanner‘).data(‘h‘),
   pic:pic
  },
  function(data){
   //把裁剪后图片加载到原处
   if(data){
    $(‘#selectbanner‘).attr(pic);
   }
  }
 );});

//设置选取框的选取信息

//利用jquery中的data方法来保存生成的数据

function preview(img, selection) {
 $(‘#selectbanner‘).data(‘x‘,selection.x1);
 $(‘#selectbanner‘).data(‘y‘,selection.y1);
 $(‘#selectbanner‘).data(‘w‘,selection.width);
 $(‘#selectbanner‘).data(‘h‘,selection.height);

}

4、PHP端的主要代码：

//利用GD库来作裁剪操作

function sliceBanner(){
 $x = (int)$_POST[‘x‘];
 $y = (int)$_POST[‘y‘];
 $w = (int)$_POST[‘w‘];
 $h = (int)$_POST[‘h‘];
 $filename = trim($_POST[‘pic‘]);
 if(isset($filename) ){
  $uploadBanner =  ‘/temp‘. $filename;
  $sliceBanner = ‘upload/‘. $filename;
  $src_pic = getImageHander($uploadBanner);
  if(!$src_pic){
   echo 0;exit;
  }
  $dst_pic = imagecreatetruecolor($w, $h);
  imagecopyresampled($dst_pic, $src_pic, 0, 0, $x, $y, $w, $h, $w, $h);
  imagejpeg($dst_pic, $sliceBanner);
  imagedestroy($src_pic);
  imagedestroy($dst_pic);
  echo 1;exit;
 }
 echo 0 ;exit;}

function getImageHander ($url) {
 $size=@getimagesize($url);
 switch($size[‘mime‘]){
  case ‘image/jpeg‘: $im = imagecreatefromjpeg($url);break;
  case ‘image/gif‘ : $im = imagecreatefromgif($url);break;
  case ‘image/png‘ : $im = imagecreatefrompng($url);break;
  default: $im=false;break;
 }
 return $im;}

１、介绍

ImgAreaSelect是一jQuery插件，它支持用户通过鼠标拖曳选择图片的一部分，非常的fashion。另外，可以在这个选择图像区域的基础上应用网站的其他一些技术，比如图片拖曳、图片编辑等。

２、基本用法

这个插件基于jQuery上通过imgAreaSelect()方法来调用，它操作的对象是HTML中元素内的图像。

复制代码 代码如下:

如果在jQuery对象里有不止有一个img元素，那么这个插件会对里面的元素逐个应用此方法。其实这个方法不仅仅应用于img元素，它支持任何块级元素（比如有图像背景的div元素）。

与其它jQuery插件相似，这个插件可以在$(document).ready() 或者
$(window).load()句柄中初始化。 
３、选项

用户在这个插件的很多方面都可以进行定制，用户通过插件选项来达到这个目的（这些选项会在插件初始化的时候起效）。这些选项包括：

４、样式表

然后在初始化imgAreaSelect时，使用onSelectEnd()回调函数将选择后的数据赋给这些隐藏域，正如下面代码那样：

$(document).ready(function () {

$(‘#ladybug‘).imgAreaSelect({

onSelectEnd: function (img, selection) {

$(‘input[name="x1"]‘).val(selection.x1);

$(‘input[name="y1"]‘).val(selection.y1);

$(‘input[name="x2"]‘).val(selection.x2);

$(‘input[name="y2"]‘).val(selection.y2);

}

});

});

这样当点击"submit按钮"时，页面将上载到服务器，如果使用PHP的话，使用$_POST[‘x1‘]等就得到相应的坐标数据了

来源：http://blog.sina.com.cn/s/blog_70a3539f01018jdl.html