最后的效果如下：
这里面有几个功能，第一个是支持拖拽，第二个压缩，第三个是裁剪编辑，第四个是上传和上传进度显示，下面依次介绍每个功能的实现：
1. 拖拽显示图片
拖拽读取的功能主要是要兼听html5的drag事件，这个没什么好说的，查查api就知道怎么做了，主要在于怎么读取用户拖过来的图片并把它转成base64以在本地显示。
监听drag和drop事件
varhandler={
init:function($container){
//需要把dragover的默认行为禁掉，不然会跳页
$container.on("dragover",function(event){
event.preventDefault();
});
$container.on("drop",function(event){
event.preventDefault();
//这里获取拖过来的图片文件，为一个File对象
varfile=event.originalEvent.dataTransfer.files[0];
handler.handleDrop($(this),file);
});
}
}代码第10行获取图片文件，然后传给11行处理。
如果使用input，则监听input的change事件：
$container.on("change","input[type=file]",function(event){
if(!this.value)return;
varfile=this.files[0];
handler.handleDrop($(this).closest(".container"),file);
this.value="";
});代码第3行，获取File对象，同样传给handleDrop进行处理
接下来在handleDrop函数里，读取file的内容，并把它转成base64的格式：
handleDrop:function($container,file){
var$img= $container.find("img");
handler.readImgFile(file,$img,$container);
},我的代码里面又调了个readImgFile的函数，helper的函数比较多，主要是为了拆解大模块和复用小模块。
在readImgFile里面读取图片文件内容：
使用FileReader读取文件
readImgFile:function(file,$img,$container){
varreader=newFileReader(file);
//检验用户是否选则是图片文件
if(file.type.split("/")[0]!=="image"){
util.toast("You should choose an image file");
return;
}
reader.onload=function(event){
varbase64=event.target.result;
handler.compressAndUpload($img,base64,file, $container);
}
reader.readAsDataURL(file);
}这里是通过FileReader读取文件内容，调的是readAsDataURL，这个api能够把二进制图片内容转成base64的格式，读取完之后会触发onload事件，在onload里面进行显示和上传：
//获取图片base64内容
varbase64=event.target.result;
//如果图片大于1MB，将body置半透明
if(file.size>ONE_MB){
$("body").css("opacity",0.5);
}
//因为这里图片太大会被卡一下，整个页面会不可操作
$img.attr("src",baseUrl);
//还原
if(file.size>ONE_MB){
$("body").css("opacity",1);
}
//然后再调一个压缩和上传的函数
handler.compressAndUpload($img,file,$container);如果图片有几个Mb的，在上面第8行展示的时候被卡一下，笔者曾尝试使用web worker多线程解决，但是由于多线程没有window对象，更不能操作dom，所以不能很好地解决这个问题。采取了一个补偿措施：通过把页面变虚告诉用户现在在处理之中，页面不可操作，稍等一会
这里还会有一个问题，就是ios系统拍摄的照片，如果不是横着拍的，展示出来的照片旋转角度会有问题，如下一张竖着拍的照片，读出来是这样的：
即不管你怎么拍，ios实际存的图片都是横着放的，因此需要用户自己手动去旋转。旋转的角度放在了exif的数据结构里面，把这个读出来就知道它的旋转角度了，用一个EXIF的库读取：
读取exif的信息
readImgFile:function(file,$img,$container){
EXIF.getData(file,function(){
varorientation=this.exifdata.Orientation,
rotateDeg=0;
//如果不是ios拍的照片或者是横拍的，则不用处理，直接读取
if(typeoforientation==="undefined"||orientation===1){
//原本的readImgFile，添加一个rotateDeg的参数
handler.doReadImgFile(file,$img,$container,rotateDeg);
}
//否则用canvas旋转一下
else{
rotateDeg=orientation===6?90*Math.PI/180:
orientation===8?-90*Math.PI/180:
orientation===3?180*Math.PI/180:0;
handler.doReadImgFile(file,$img,$container,rotateDeg);
}
});
}知道角度之后，就可以用canvas处理了，在下面的压缩图片进行说明，因为压缩也要用到canvas
2. 压缩图片
压缩图片可以借助canvas，canvas可以很方便地实现压缩，其原理是把一张图片画到一个小的画布，然后再把这个画布的内容导出base64，就能够拿到一张被压小的图片了：
//设定图片最大压缩宽度为1500px varmaxWidth=1500; varresultImg=handler.compress($img[0],maxWidth,file.type);
compress函数进行压缩，在这个函数里首先创建一个canvas对象，然后计算这个画布的大小：
compress:function(img,maxWidth,mimeType){
//创建一个canvas对象
varcvs=document.createElement('canvas');
varwidth=img.naturalWidth,
height=img.naturalHeight,
imgRatio=width/height;
//如果图片维度超过了给定的maxWidth 1500，
//为了保持图片宽高比，计算画布的大小
if(width>maxWidth){
width=maxWidth;
height=width/imgRatio;
}
cvs.width=width;
cvs.height=height;
}接下来把大的图片画到一个小的画布上，再导出：
压缩处理
//把大图片画到一个小画布
varctx=cvs.getContext("2d").drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,width,height);
//图片质量进行适当压缩
varquality=width>=1500?0.5:
width>600?0.6:1;
//导出图片为base64
varnewImageData=cvs.toDataURL(mimeType,quality);
varresultImg=newImage();
resultImg.src=newImageData;
returnresultImg;最后一行返回了一个被压缩过的小图片，就可对这个图片进行裁剪了。
在说明裁剪之前，由于第二点提到ios拍的照片需要旋转一下，在压缩的时候可以一起处理。也就是说，如果需要旋转的话，那么画在canvas上面就把它旋转好了：
rotate canvas
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
if(rotateDeg){
ctx.translate(cvs.width/2,cvs.height/2);
ctx.rotate(rotateDeg);
destX=-width/2,
destY=-height/2;
}
ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,destX,destY,width,height);这样就解决了ios图片旋转的问题，得到一张旋转和压缩调节过的图片之后，再用它进行裁剪和编辑
3. 裁剪图片
裁剪图片，上网找到了一个插件cropper，这个插件还是挺强大，支持裁剪、旋转、翻转，但是它并没有对图片真正的处理，只是记录了用户做了哪些变换，然后你自己再去处理。可以把变换的数据传给后端，让后端去处理。这里我们在前端处理，因为我们不用去兼容IE8。
如下，我把一张图片，旋转了一下，同时翻转了一下：
它的输出是：
{