怎樣實現前端裁剪上傳圖片功能

由於前端是不能直接操作本地文件的，要么通過<input type="file">用戶點擊選擇文件或者拖拽的方式，要么使用flash等第三方的控件，但flash日漸衰落，所以使用flash還是不提倡的。同時html5崛起，提供了很多的api操控，可以在前端使用原生的api實現圖片的處理，這樣可以減少后端服務器的壓力，同時對用戶也是友好的。

(筆者的個人站：http://yincheng.site/crop-upload-photo手機端的讀者推薦在這里看)

最后的效果如下：

這里面有幾個功能，第一個是支持拖拽，第二個壓縮，第三個是裁剪編輯，第四個是上傳和上傳進度顯示，下面依次介紹每個功能的實現：

1. 拖拽顯示圖片

拖拽讀取的功能主要是要兼聽html5的drag事件，這個沒什么好說的，查查api就知道怎么做了，主要在於怎么讀取用戶拖過來的圖片並把它轉成base64以在本地顯示。

監聽drag和drop事件

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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事件：

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6

$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的格式：

 

 

 

 

 

JavaScript

 

1 2 3 4

handleDrop:function($container,file){     var$img=  $container.find("img");     handler.readImgFile(file,$img,$container); },

我的代碼里面又調了個readImgFile的函數，helper的函數比較多，主要是為了拆解大模塊和復用小模塊。

在readImgFile里面讀取圖片文件內容：

使用FileReader讀取文件

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13

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里面進行顯示和上傳：

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

//獲取圖片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的信息

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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，就能夠拿到一張被壓小的圖片了：

 

 

 

 

 

JavaScript

 

1 2 3

//設定圖片最大壓縮寬度為1500px varmaxWidth=1500; varresultImg=handler.compress($img[0],maxWidth,file.type);

compress函數進行壓縮，在這個函數里首先創建一個canvas對象，然后計算這個畫布的大小：

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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; }

接下來把大的圖片畫到一個小的畫布上，再導出：

壓縮處理

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

//把大圖片畫到一個小畫布     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

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10

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。

如下，我把一張圖片，旋轉了一下，同時翻轉了一下：

它的輸出是：

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9

{     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畫上去，最后再導出就可以了：

簡單裁剪實現

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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實現

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7

//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畫完之后：

實現旋轉、翻轉結合

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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請求：

 

 

 

 

 

JavaScript

 

1 2 3 4

varxhr=newXMLHttpRequest(); xhr.open('POST',upload_url,true); varboundary='someboundary'; xhr.setRequestHeader('Content-Type','multipart/form-data; boundary='+boundary);

並設置編碼方式，然后拼表單格式的數據進行上傳：

ajax上傳

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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) 上傳的進度：

上傳進度

 

 

 

 

 

JavaScript

 

1 2 3 4 5

xhr.upload.onprogress=function(event){     if(event.lengthComputable){         duringCallback((event.loaded/event.total)*100);     } };

這里凋duringCallback的回調函數，給這個回調函數傳了當前進度的參數，用這個參數就可以設置進度條的過程了。進度條可以自己實現，或者直接上網找一個，隨便一搜就有了。
2) 成功和失敗：

成功和失敗回調

 

 

 

 

 

JavaScript

 

1 2 3 4 5 6 7 8 9 10 11

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就不再放出來了。

 

轉載於  https://www.cnblogs.com/libin-1/p/5966683.html