由於前端是不能直接操作本地文件的，要么通過用戶點擊選擇文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日漸衰落，所以使用flash還是不提倡的。同時html5崛起，提供了許多的api操控，可以在前端使用原生的api實現圖片的處理，這樣可以減少後端伺服器的壓力，同時對使用者也是友善的。
最後的效果如下：
這裡面有幾個功能，第一個是支援拖曳，第二個壓縮，第三個是裁剪編輯，第四個是上傳和上傳進度顯示，下面依序介紹每個功能的實現：
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。
如下，我把一张图片，旋转了一下，同时翻转了一下：
它的输出是：
{
height:319.2000000000001,
rotate:45,
scaleX:-1,
scaleY:1,
width:319.2000000000001
x:193.2462838120872
y:193.2462838120872
}通过这些信息就知道了：图片被左右翻转了一下，同时顺时针转了45度，还知道裁剪选框的位置和大小。通过这些完整的信息就可以做一对一的处理。
在展示的时候，插件使用的是img标签，设置它的css的transform属性进行变换。真正的处理还是要借助canvas，这里分三步说明：
1. 假设用户没有进行旋转和翻转，只是选了简单地选了下区域裁剪了一下，那就简单很多。最简单的办法就是创建一个canvas，它的大小就是选框的大小，然后根据起点x、y和宽高把图片相应的位置画到这个画布，再导出图片就可以了。由于考虑到需要翻转，所以用第二种方法，创建一个和图片一样大小的canvas，把图片原封不动地画上去，然后把选中区域的数据imageData存起来，重新设置画布的大小为选中框的大小，再把imageData画上去，最后再导出就可以了：
简单裁剪实现
varcvs=document.createElement('canvas');
varimg=$img[0];
varwidth=img.naturalWidth,
height=img.naturalHeight;
cvs.width=width;
cvs.height=height;
varctx=cvs.getContext("2d");
vardestX=0,
destY=0;
ctx.drawImage(img,destX,destY);
//把选中框里的图片内容存起来
varimageData=ctx.getImageData(cropOptions.x,cropOptions.y,cropOptions.width,cropOptions.height);
cvs.width=cropOptions.width;
cvs.height=cropOptions.height;
//然后再画上去
ctx.putImageData(imageData,0,0);代码14行，通过插件给的数据，保存选中区域的图片数据，18行再把它画上去
2. 如果用户做了翻转，用上面的结构很容易可以实现，只需要在第11行drawImage之前对画布做一下翻转变化：
canvas flip实现
//fip
if(cropOptions.scaleX===-1||cropOptions.scaleY===-1){
destX=cropOptions.scaleX===-1?width*-1:0; // Set x position to -100% if flip horizontal
destY=cropOptions.scaleY===-1?height*-1:0; // Set y position to -100% if flip vertical
ctx.scale(cropOptions.scaleX,cropOptions.scaleY);
}
ctx.drawImage(img,destX,destY);其它的都不用变，就可以实现上下左右翻转了，难点在于既要翻转又要旋转
3. 两种变换叠加没办法直接通过变化canvas的坐标，一次性drawImage上去。还是有两种办法，第一种是用imageData进行数学变换，计算一遍得到imageData里面，从第一行到最后一行每个像素新的rgba值是多少，然后再画上去；第二种办法，就是创建第二个canvas，第一个canvas作翻转，把它的结果画到第二个canvas，然后再旋转，最后导到。由于第二种办法相对比较简单，我们采取第二种办法：
同上，在第一个canvas画完之后：
实现旋转、翻转结合
ctx.drawImage(img,destX,destY);
//rotate
if(cropOptions.rotate!==0){
varnewCanvas=document.createElement("canvas"),
deg=cropOptions.rotate/180*Math.PI;
//旋转之后，导致画布变大，需要计算一下
newCanvas.width=Math.abs(width*Math.cos(deg))+Math.abs(height*Math.sin(deg));
newCanvas.height=Math.abs(width*Math.sin(deg))+Math.abs(height*Math.cos(deg));
varnewContext=newCanvas.getContext("2d");
newContext.save();
newContext.translate(newCanvas.width/2,newCanvas.height/2);
newContext.rotate(deg);
destX=-width/2,
destY=-height/2;
//将第一个canvas的内容在经旋转后的坐标系画上来
newContext.drawImage(cvs,destX,destY);
newContext.restore();
ctx=newContext;
cvs=newCanvas;
}将第二步的代码插入第一步，再将第三步的代码插入第二步，就是一个完整的处理过程了。
最后再介绍下上传
4. 文件上传和上传进度
文件上传只能通过表单提交的形式，编码方式为multipart/form-data，这个我在《三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader》已做详细讨论，可以通过写一个form标签进行提交，但也可以模拟表单提交的格式，表单提交的格式在那篇文章已提及。
首先创建一个ajax请求：
varxhr=newXMLHttpRequest(); xhr.open('POST',upload_url,true); varboundary='someboundary'; xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);
并设置编码方式，然后拼表单格式的数据进行上传：
ajax上传
vardata=img.src;
data=data.replace('data:'+file.type+';base64,','');
xhr.sendAsBinary([
//name=data
'--'+boundary,
'Content-Disposition: form-data; name="data"; filename="'+file.name+'"',
'Content-Type: '+file.type,'',
atob(data),'--'+boundary,
//name=docName
'--'+boundary,
'Content-Disposition: form-data; name="docName"','',
file.name,
'--'+boundary+'--'
].join('\r\n'));表单数据不同的字段是用boundary的随机字符串分隔的。拼好之后用sendAsBinary发出去，在调这个函数之前先监听下它的事件，包括
1) 上传的进度：
xhr.upload.onprogress=function(event){
if(event.lengthComputable){
duringCallback((event.loaded/event.total)*100);
}
};这里凋duringCallback的回调函数，给这个回调函数传了当前进度的参数，用这个参数就可以设置进度条的过程了。进度条可以自己实现，或者直接上网找一个，随便一搜就有了。
2) 成功和失败：
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status==200){
successCallback(this.responseText);
}elseif(this.status>=400){
if(errorCallback&& errorCallback instanceofFunction){
errorCallback(this.responseText);
}
}
}
};这个上传功能参考了一个JIC插件
至此整个功能就拆解说明完了，上面的代码可以兼容到IE10，FileReader的api到IE10才兼容，问题应该不大，因为微软都已经放弃了IE11以下的浏览器，为啥我们还要去兼容呢。
这个东西一来减少了后端的压力，二来不用和后端来回交互，对用户来说还是比较好的，除了上面说的一个地方会被卡一下之外。核心代码已在上面说明，完整代码和demo就不再放出来了。
