gpt4 book ai didi

php - fengyuanchen jQuery 裁剪插件 - 最小裁剪验证

转载 作者:行者123 更新时间:2023-12-01 06:45:30 25 4
gpt4 key购买 nike

我正在尝试使用 fengyuanchen jquerycropper 插件 - https://github.com/fengyuanchen/cropper 施加裁剪数据输出的最小大小

该插件提供了两个选项minCropBoxWidthminCropBoxHeight,但是它们仅控制屏幕上的实际裁剪框。由于裁剪器内图像的大小可以是任何大小(在合理范围内),这无助于确保最终输出的大小。它足够简单,可以检索图像的实际大小(它在 data 参数中传递给crop 函数)。我所坚持的是,一旦满足最小宽度/高度值,就阻止裁剪框缩小尺寸。我得到 $(this).cropper(...).disable 不是一个函数

$('.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);
}
}

最佳答案

首先,调用 disable 方法如下:

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

但这对您想要实现的目标没有帮助。相反,我建议处理由裁剪器触发的适当事件:dragstart.cropperdragmove.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

关于php - fengyuanchen jQuery 裁剪插件 - 最小裁剪验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30051695/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com