我使用 JCrop并尝试通过输入字段设置宽度和高度。
如果我在高度字段中输入 400 像素,Jcrop 会将选择区域的大小调整为 279 像素。我不理解这种行为。它应该将其调整为输入的 400 像素..
JSFiddle:http://jsfiddle.net/oxfep056/6/
HTML:
<form>
X: <input name="x" type="text" readonly /><br />
Y: <input name="y" type="text" readyonly /><br />
Width: <input name="w" type="text" onchange="updateSelection(); return false;" /><br />
Height: <input name="h" type="text" onchange="updateSelection(); return false;" />
</form>
<img src="http://dummyimage.com/1300x975/DDD/000.png" />
JS:
$(function () {
$('img').Jcrop({
boxHeight: 800,
boxWidth: 800,
setSelect: [163, 122, 1138, 853],
onChange: addToForm,
onRelease: addToForm,
onSelect: addToForm
},function() {
jcrop_api = this;
});
});
function addToForm(Data) {
var x = Math.floor(Data.x);
var y = Math.floor(Data.y);
var w = Math.floor(Data.w);
var h = Math.floor(Data.h);
$('form input[name="x"]').val(x);
$('form input[name="y"]').val(y);
$('form input[name="w"]').val(w);
$('form input[name="h"]').val(h);
}
function updateSelection() {
var x = Math.floor($('form input[name="x"]').val());
var y = Math.floor($('form input[name="y"]').val());
var w = Math.floor($('form input[name="w"]').val());
var h = Math.floor($('form input[name="h"]').val());
jcrop_api.setSelect([x, y, w, h]);
}
怎么了?
最佳答案
我不是 jCrop 用户,但在阅读文档时,我看到 setSelect
方法期望接收 [x, y, x2, y2]
而不是 [x, y, w, h]
.
我更改了 updateSelection
方法以使用正确的计算。
var x2 = w + x;
var y2 = h + y;
我还将方法 Math.floor
更改为 Math.round
,因此计算将更好地代表 jCrop 设置的真实位置。
JSFiddle:http://jsfiddle.net/o0Lfuk1L/
关于javascript - JCrop 将选择的大小调整为错误的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26988191/