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

Question

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

该插件提供了两个选项minCropBoxWidth和minCropBoxHeight，但是它们仅控制屏幕上的实际裁剪框。由于裁剪器内图像的大小可以是任何大小(在合理范围内)，这无助于确保最终输出的大小。它足够简单，可以检索图像的实际大小(它在 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);
                        }
                    }

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