jcrop demo no longer works after resizing main image (Updated with Picture)
Question
i am trying to replicate this jcrop demo. Everything works fine except, my original pictures are very large so, as per the manual, i am resizing them on my page like this:
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
bgColor: 'white',
aspectRatio: 1,
boxWidth: 300,
boxHeight: 500
});
the issue is now the second preview window ( id="preview" ) no longer shows what is in the cropped section on the cropbox. Here is an example:
clearly, the preview window doesn't match the area that i am cropping in the first picture.
any idea how to get the preview image to show correctly when you are resizing the main image upfront ??
Solution
try this JSFiddle
html:
<img id="cropbox" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" />
<br />
<br />
<div id="previewcrop">
<img id="preview" src="http://homepage.mac.com/davydewit/popacademie/rw_common/themes/blendit/images/header/image1.jpg" />
</div>
css:
#previewcrop{
width: 100px;
height: 100px;
overflow: hidden;
margin-left: 5px;
}
js:
var imgwidth = 849; // width of the image
var imgheight = 423; // height of the image
jQuery('#cropbox').Jcrop({
onChange: showPreview,
onSelect: showPreview,
bgColor: 'white',
aspectRatio: 1,
boxWidth: imgwidth/3,
boxHeight: imgheight/3
});
function showPreview(coords)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
$('#preview').css({
width: Math.round(rx * imgwidth) + 'px',
height: Math.round(ry * imgheight) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
};
OTHER TIPS
function showPreview(coords)
{
if (parseInt(coords.w) > 0)
{
var rx = 100 / coords.w;
var ry = 100 / coords.h;
jQuery('#preview').css({
width: Math.round(rx * 800) + 'px',
height: Math.round(ry * 600) + 'px',
marginLeft: '-' + Math.round(rx * coords.x) + 'px',
marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}
}
For (rx * 800), 800 should be the width of your real image. For (ry * 600), 600 should be the width of your real image. I have tested this against an 800x600 image and it works (using Tutorial3.html and modifying it). Also, don't use the width and height of the scaled image, it won't work.