fengyuanchen jQuery的農作物插件 - 最少的作物驗證

Question

我試圖用fengyuanchen的jQuery栽跟頭插件施以裁剪數據輸出的最小尺寸 - https://github.com/fengyuanchen/cropper

該插件提供了兩個選項minCropBoxWidth和minCropBoxHeight但是，這些只是控制實際產量在屏幕上的框。由於裁剪內圖像的大小可以是任意的（在合理範圍內），這無助於確保最終輸出的大小。它直接足以檢索圖像的實際大小（它在數據參數中傳遞給函數crop）。我遇到的問題是，一旦滿足最小寬度/高度值，裁剪框就會停止縮小尺寸。我得到$(this).cropper(...).disable is not a function

$('.image-preview img').cropper({ 
        aspectRatio:1/1, 
        strict:true, 
        background:false, 
        guides:false, 
        autoCropArea:1, 
        rotatable:false, 
        minCropBoxWidth:20,//using these just to stop box collapsing on itself 
        minCropBoxHeight:20, 
        crop:function(data){ 
         //test the new height/width 
         if(data.height < 120 || data.width < 120){ 
          //try to make it stop 
          $(this).cropper().disable(); //here be the error 
         }else{ 
          var json = [ 
           '{"x":' + data.x, 
           '"y":' + data.y, 
           '"height":' + data.height, 
           '"width":' + data.width + '}' 
          ].join(); 
          $('#image-data').val(json); 
         } 
        } 

Answer 1

首先，調用disable方法是這樣完成的：

$(this).cropper('disable'); 

但是，這不會幫助你在你想達到的目標。 相反，我會建議處理由裁剪觸發的相應事件：dragstart.cropper和dragmove.cropper。爲了防止事件結束，您可以返回一個錯誤的值。

下面是一個例子：

$('.img-container img').on('dragmove.cropper', function (e) { 
    console.log('dragmove.cropper'); 

    var $cropper = $(e.target); 

    // Call getData() or getImageData() or getCanvasData() or 
    // whatever fits your needs 
    var data = $cropper.cropper('getCropBoxData'); 

    console.log("data = %o", data); 

    // Analyze the result 
    if (data.height <= 150 || data.width <= 150) { 
     console.log("Minimum size reached!"); 

     // Stop resize 
     return false; 
    } 

    // Continue resize 
    return true; 
}).on('dragstart.cropper', function (e) { 
    console.log('dragstart.cropper'); 

    var $cropper = $(e.target); 

    // Get the same data as above 
    var data = $cropper.cropper('getCropBoxData'); 

    // Modify the dimensions to quit from disabled mode 
    if (data.height <= 150 || data.width <= 150) { 
     data.width = 151; 
     data.height = 151; 

     $(e.target).cropper('setCropBoxData', data); 
    } 
}); 

JSFiddle