JCrop 将选择的大小调整为错误的值

Posted

技术标签:

【中文标题】JCrop 将选择的大小调整为错误的值【英文标题】:JCrop resizes selection to wrong value 【发布时间】:2014-11-18 06:43:29 【问题描述】:

我使用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]);

怎么了?

【问题讨论】:

你可以为你的问题设置一个 jsfiddle 我添加了一个 jsFiddle。 【参考方案1】:

我不是 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/

【讨论】:

天哪,我读过它,但我认为 w 和 h 与 x2 和 y2 相同.. 谢谢!

以上是关于JCrop 将选择的大小调整为错误的值的主要内容,如果未能解决你的问题,请参考以下文章

如果调整图像大小,Jcrop 问题 - Jquery

尝试使用 Jcrop 和使用 scala Scrimage lib 调整服务器端图像大小

jCrop 在更改图像时使用正确的坐标调整大小

如何通过调整大小使用 Jcrop 裁剪大图像?

jcrop宽度,高度通过输入数值调整?

调整主图像大小后,jcrop 演示不再有效(使用图片更新)