Question

我试图使用fengyuanchen jquery cropper插件强加最小尺寸的裁剪数据输出 - 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

首先，调用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); } });和{{1}}。为防止事件结束，您只能返回错误值。

以下是一个例子：

{{1}}

JSFiddle

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

1 个答案: