jCrop returning mis-matched co-ordinates between Preview and Cropper interface

[ben]

Hi all,

Currently using jCrop to develop an application that allows users to
crop an image online. In essence, the application passes jCrop co-
ordinates to PHP which performs the back-end crop.

Using jCrop 0.9.8 (minimised) and jQuery v1.4.4 with FF3.6 on OSX10.6.

The problem is, when dealing with certain images, jCrop behaves
'strangely' - this is usually through mismatched co-ordinates.

In the example below, the cropper interface and preview interface are
completely mismatched. It seems the preview has been given too much
marginTop: '-' + ry * coords.y + 'px' from the example shown on the
jCrop website (http://deepliquid.com/projects/Jcrop/demos.php?
demo=thumbnail)

Similarly, when dealing with other images with different crop box
ratios, the preview can often be mis-aligned: usually too far to the
left and bottom.

The PHP is performing the crop as seen in the cropper interface, and
not the larger preview interface.

Here's my JS that's being used:

function addCrop() {

$('#cropbox').Jcrop({
onChange: showCoords,
onSelect: showCoordsAndDPI,
boxWidth: 300, //size of the cropper box
setSelect: [0, 0, 1000, 1000], //initial selection area
aspectRatio: 1.41424770198/1 //intended aspect ratio of an
A3 Print

});
}

// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above
// Our simple event handler, called from onChange and onSelect
// event handlers, as per the Jcrop invocation above



function showCoordsAndDPI(c) {
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#width').val(c.w);
jQuery('#height').val(c.h);
showPreview(c);

};

function showCoords(c) {
jQuery('#x1').val(c.x);
jQuery('#y1').val(c.y);
jQuery('#x2').val(c.x2);
jQuery('#y2').val(c.y2);
jQuery('#width').val(c.w);
jQuery('#height').val(c.h);
showPreview(c);
};

function showPreview(coords) {


var rx = 593 / coords.w; //full size of the preview image
var ry = 838 / coords.h; //full size of the preview image

$('#preview').css({

width: Math.round(rx * 593) + 'px', //size of preview
container div
height: Math.round(ry * 419.304199093) + 'px', //size
of preview container div
marginLeft: '-' + (parseInt(rx) * parseInt(coords.x))
+ 'px',
marginTop: '-' + parseInt(ry) * parseInt(coords.y) +
'px'

});

};

Any ideas how this can be fixed?

Thanks

[ben]

ETA:

Image examples can be seen here:

http://i.imgur.com/9r1fa.png

and here:

http://i.imgur.com/IhGLt.png

Thanks,

Ben