![](/img/trans.png)
[英]How Crop image with fengyuanchen/cropper and save in database the path of image crop?
[英]fengyuanchen cropper how to set up dynamic fixed crop box
我正在使用fengyuanchen的裁剪工具,它具有很棒的功能。 我正在尝试制作一个具有动态尺寸的固定裁剪框。
但我目前只关心如何弄清楚如何使其达到特定大小。
我尝试了以下方法:
$(function() {
$('.img-container > img').cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
setCropBoxData('1600', '1200')
});
});
但是setCropBoxData
对我不起作用。 我究竟做错了什么?
更新
这应该是为该实际裁剪框设置固定宽度的正确语法,但我仍然没有得到任何结果:
$(function() {
var $toCrop = $('.img-container > img');
$toCrop.cropper({
aspectRatio: 16 / 9,
autoCropArea: true,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
built: function () {
$toCrop.cropper("setCropBoxData", { width: "100", height: "50" });
}
});
});
我终于找到了解决方案。 我的错误是我将string
而不是number
作为参数传递给setCropBoxData
函数。
这是正确的语法:
$(function() {
var $toCrop = $('.img-container > img');
$toCrop.cropper({
aspectRatio: 16 / 9,
autoCropArea: 0,
strict: false,
guides: false,
highlight: true,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false,
built: function () {
// Width and Height params are number types instead of string
$toCrop.cropper("setCropBoxData", { width: 1600, height: 800 });
}
});
});
返回并重新阅读文档的“方法”部分。 这向您展示了如何调用这样的函数。 另请注意,“setCropBoxData”需要一个具有“top”、“left”、“width”和“height”属性的对象:
$(function() {
var $img = $('.img-container > img');
$img.cropper({
aspectRatio: 16 / 9,
autoCropArea: 0.65,
strict: false,
guides: false,
highlight: false,
dragCrop: false,
cropBoxMovable: false,
cropBoxResizable: false
});
$img.cropper("setCropBoxData", { width: "1600", height: "1200" });
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.