上传图片，用Jcrop剪裁图像并用PHP获取剪裁后的图像

    在此过程中，笔者遇到了一些往常没有遇到过的问题，通过Google和查找API找到了解决问题的方法，在此整理出来与遇到同样问题的朋友们分享。

    首先，笔者在用input:file上传图片的时候，更改了控件了样式，用input:text和input:button这两个控件来代替input:file，原来的input:file控件隐藏，如此，只需要更改后两个控件的样式，并且添加他们与input:file的关联即可。具体代码如下：

HTML:

<span style="font-family:Times New Roman;font-size:14px;"><input type=file id="xxx" name=orifile style="xxx;display:none;" onChange="$('input[name=\'filetext\']').val($(this).val());"/>
<input type=text name=filetext class="sss" style="xxx"/> 
<input type=button value="submit" οnclick="$('input[name=\'orifile\']').click();" class="xxx" style="xxx"/></span>

    笔者在系统中，需要绑定input:file控件的onChange事件，而且能够在该控件能够连续不断的触发onChange事件。在jquery1.7之前的版本中，可以通过jQuery.live()事件进行绑定，但是在jquery1.7之后的版本，live方法已经被弃用了，转而取代它的是on方法，可以笔者在通过on方法绑定onChange事件时，只能够触发一次。

    在查阅过大量资料以后，笔者对代码进行了改进，改进的过程如下：

JAVASCRIPT:

<span style="font-family:Times New Roman;font-size:14px;">$(document).on("change", "#xxx", function(){
    函数体...
});</span>

    
    静态的方法可以通过$("#xxx").on("change", function(){});的写法进行，而如果input:file是动态方法生成的控件，则需要用代码框中的方法，因为onChange事件需要在页面加载之后才能加载。

    笔者使用Jcrop这款JQuery插件来处理图像剪裁的，这款插件相对比较简单易学，有三种方法可以对插件进行加载，笔者建议使用Jcrop的api，具体代码如下：

JAVASCRIPT:

<span style="font-family:Times New Roman;font-size:14px;">/*选框大小固定为1000*160，不允许更改选框大小*/
var api;
var opt = {};
opt.allowResize = false;  //不允许更改选框大小
opt.allowSelect = false;  //不允许创建新选框
opt.allowMove = true;  //允许拖动选框
opt.boxWidth = 1100;  //画布宽度
opt.boxHeight = 500;  //画布高度
opt.aspectRatio = 6.25;  //图片的横纵比
api = $.Jcrop("#jcrop", opt);  //创建插件
api.setImage(/*图片路径*/path);  //加载图片
api.setOptions({onSelect: getCoords});  //添加选项，onSelect是创建选框之后触发的事件

api.animateTo([0, 0, 1000, 160]);  //选框生成动画
api.setSelect([0, 0, 1000, 160]);  //生成选框

/*事件触发函数*/
function getCoords(obj) {
    /*以下参数需要通过ajax传送至php后台*/
      selectw = parseInt(obj.w);  //选框宽度
      selecth = parseInt(obj.h);   //选框高度
      selectx = parseInt(obj.x);   //选框起点x坐标
      selecty = parseInt(obj.y);   //选框起点y坐标
}</span><span style="font-size:18px;font-family: KaiTi_GB2312;">
</span>

将上述获得的参数传至PHP后台，使用PHP自带函数进行处理：

<span style="font-family:Times New Roman;font-size:14px;">$type = exif_imagetype($path);  //获得图片类型
switch ($type) {
      case IMAGETYPE_GIF:
           $im1 = imagecreatefromgif($path);  //创建一个跟原图一样大小的图片
           break;
      case IMAGETYPE_JPEG:
           $im1 = imagecreatefromjpeg($path);  //创建一个跟原图一样大小的图片
           break;
      case IMAGETYPE_PNG:
           $im1 = imagecreatefrompng($path);  //创建一个跟原图一样大小的图片
           break;
      default :
           exit();
	  break;
}

$new_img = imagecreatetruecolor($w, $h);  //创建一个用户剪裁宽高的黑白图片
imagecopyresampled($new_img, $im1, 0, 0, $x, $y, $w, $h, $w, $h); //将原图拷贝到新创建剪裁区域的图片中

switch ($type) {
       case IMAGETYPE_GIF:
            imagegif($new_img, $newsrc); //按新路径保存图片
            break;
       case IMAGETYPE_JPEG:
            imagejpeg($new_img, $newsrc, 100);  //按新路径保存图片
            break;
       case IMAGETYPE_PNG:
            imagepng($new_img, $newsrc, 9);  //按新路径保存图片
            break;
       default:
            exit();
            break;
}</span>

    

    这样图片就剪裁完成了。

    剪裁前的效果：

    剪裁后的效果：