function onEndCrop( coords, dimensions ) {
$( 'x1' ).value = coords.x1;
$( 'y1' ).value = coords.y1;
$( 'x2' ).value = coords.x2;
$( 'y2' ).value = coords.y2;
$( 'width' ).value = dimensions.width;
$( 'height' ).value = dimensions.height;
}
// example with a preview of crop results, must have minimumm dimensions
Event.observe(
window,
'load',
function() {
new Cropper.ImgWithPreview(
'testImage',
{
minWidth: 200,
minHeight: 120,
ratioDim: { x: 200, y: 120 },
displayOnInit: true,
onEndCrop: onEndCrop,
previewWrap: 'previewArea'
}
)
}
);
/*
if( typeof(dump) != 'function' ) {
Debug.init(true, '/');
function dump( msg ) {
// Debug.raise( msg );
};
} else dump( '---------------------------------------\n' );
*/
label {
clear: left;
margin-left: 50px;
float: left;
width: 5em;
}
#testWrap {
width: 500px;
float: left;
margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
}
#previewArea {
margin: 20px; 0 0 20px;
float: left;
}
#results {
clear: both;
}