我正在使用crop tool from 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" });
}
});
});
答案 0 :(得分:4)
我最终找到了解决方案。我的错误是我将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 });
}
});
});
答案 1 :(得分:1)
返回并重新阅读文档的"Methods"部分。这告诉你如何调用这样的函数。还要注意" 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" });
});