在專案中，需要多上傳的圖片按照比例和尺寸進行裁剪，這類場景在一些CMS系統中是比較常見的，尤其是大部分的文章現在要適配PC、Mobile兩種平臺，文章的封面圖等便需要按照尺寸做裁剪，以便於應用到不同的場景和平臺上。

專案是放在github上

在頁面中引入cropper.css和copper.js

 <div class="cut-container" style="width: 750px;height: 400px;margin:20px 30px;border:dashed #cacaca 1px;">
 </div>

 <script>
    $img.cropper({
        aspectRatio:picScale.width/picScale.height,
        autoCrop:false
 
,
        //minCropBoxWidth:216,
        //minCropBoxHeight:144,
        zoomable:false,
        scalable:false,
        rotatable:false,
        //autoCropArea:0.01,
        ready:function(){
            $img.cropper('crop');
            $img.cropper('setData',{
                width:picScale.bWidth,
                height:picScale.bHeight
            });
        }
    });
    $img.on('cropmove'
 
,function(e){
        var data=$img.cropper('getData');
        if(data.width<picScale.width||data.height<picScale.height){
            e.preventDefault();
        }
    });
    $img.on('cropend',function(e){
        var data=$img.cropper('getData');
        if(data.width<picScale.width||data.height<picScale.height){
            $img.cropper('setData'
 
,{ width:picScale.width,
                height:picScale.height});
        }
    });
 </script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

這裡有幾個引數需要注意下： 
aspectRatio：設定擷取的結果圖片是寬高比例，例如16:9、3:4或者1:1等 
minCropBoxWidth和minCropBoxHeight：擷取框的最小寬度和最小高度，說擷取框是因為這個是相對於頁面的，也就是真是的頁面畫素，而不是相對於圖片的 
zoomable、scalable、rotatable：這幾個都是圖片控制的屬性，從字面也比較好理解 
autoCropArea：這裡是一個比例值，設定預設情況下，擷取的內容相對於圖片的面積，0.8代表整個圖片的80%都處於擷取框內。

因為autoCropArea的原因，當你上傳不同尺寸的圖片時，也為介面顯示大小不一樣，擷取框的也大小不一。如果你需要一個視覺上固定大小的擷取框，這種情況下，是做不到的。

另外，minCropBoxWidth和minCropBoxHeight也是相對於頁面的畫素，所以你無法設定預設要擷取最小畫素，例如我們像需要擷取個400x400素的圖片，如果我們上傳的是高畫素的大圖，因為頁面級400畫素，涵蓋的圖片實際上的畫素，可能會遠大於400畫素。

針對於這種情況，我通過ready事件和cropmove、cropend事件進行了處理，程式碼中被註釋的是最初無效的方式，將autoCrop設定為false，通過程式碼的方式進行擷取框的設定，通過$img.cropper(‘setData’,params)便可以直接設定擷取框的寬高，令人驚喜的是這裡的寬高是相對於圖片的畫素控制，設定的畫素值就是最終擷取後圖片的畫素。

這種情況很便利，但是為了實現最小尺寸或者最大尺寸限制，便需要註冊兩個額外的事件，在cropmove通過$img.cropper(‘getData’)獲取width和height資訊，判斷相關限制，如果超過，則通過preventDefault()取消事件響應，但是這種情況不太精準，無法準備模擬到臨界狀態，有可能一次move事件，就超過臨界值的，這種情況下，也因為這個判斷，無法恢復到臨界狀態以內，所以在通過cropend事件，對於超出臨界狀態的情況，強制設定到臨界狀態。

以上是截圖處理部分，另外在後期上傳的時候，可以通過form表單的方式進行（另外一種是通過將圖片轉化為Base64編碼），這裡通過$img.cropper(“getCroppedCanvas”)獲取到canvas並呼叫其toBlob方法將資料轉化為二進位制用來構造FormData。

<script>
$img.cropper("getCroppedCanvas").toBlob(function(blob){
    var formData=new FormData();
    formData.append('files',blob,file.name);

    $.ajax({
        method:"post",
        url: urlConfig.upload, //用於檔案上傳的伺服器端請求地址
        data: formData,
        processData: false,
        contentType: false,
        success:function(result){
            //do something
        }
    });
});
</script>

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