JCrop resizes selection to wrong value

Question

I use JCrop and try to set the width and height by a input field.

If I enter 400 pixels in the height field Jcrop resizes the selection area to 279 pixels. I do not unterstand this behavior. It should resize it to the entered 400 pixels..

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]);
}

What is wrong?

Answer 1

I'm not a jCrop user but reading the documentation, I saw that the setSelect method expects to receive [x, y, x2, y2] instead of [x, y, w, h].

I changed the updateSelection method to use the correct calculations.

var x2 = w + x;
var y2 = h + y;

I also changed the method Math.floor to Math.round, so the calculations will represent better the real positions set by jCrop.

JSFiddle: http://jsfiddle.net/o0Lfuk1L/