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