плагин fengyuanchen jQuery cropper — минимальная проверка урожая

Question

плагин fengyuanchen jQuery cropper — минимальная проверка урожая

Я пытаюсь навязать минимальный размер обрезанных данных, используя плагин fqugyuanchen jquery cropper — https://github.com/fengyuanchen/cropper

Плагин предлагает два варианта minCropBoxWidth а также minCropBoxHeight однако они только контролируют фактическую рамку обрезки на экране. Поскольку размер изображения в кадрирующем устройстве может быть любым (в пределах разумного), это не помогает обеспечить размер конечного результата. Достаточно просто, чтобы получить фактический размер изображения (он передается в аргументе data в 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);
}
}

2

image-processing jquery jquery-plugins php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Во-первых, вызывая 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

5