Jcrop Large Image Previews

Jcrop is an excellent jQuery plugin developed by Deep Liquid. It is used to easily crop images on websites without having to use any photo editing software.

There is documentation on their website on how to use boxWidth and boxHeight to deal with large resolution pictures, however it does not tie together those methods with the preview pane (visit the demo this post is referencing).

Assuming you are using boxWidth to shrink down the image to 500 pixels wide, with a thumbnail 80 pixels by 80 pixels, use the following code to correctly display the preview pane.

jQuery('#cropbox').Jcrop({
   onChange: showPreview,
   onSelect: updateCoords,
   aspectRatio: 1,
   boxWidth: 500
});

function showPreview(coords) {
   if (parseInt(coords.w) > 0) {
      var rx = 80 / coords.w;
      var ry = 80 / coords.h;

      var img_height = $("#cropbox").height();
      var img_width = $("#cropbox").width();

      jQuery('#preview').css({
         width: Math.round(rx * img_width) + 'px',
         height: Math.round(ry * img_height) + 'px',
         marginLeft: '-' + Math.round(rx * coords.x) + 'px',
         marginTop: '-' + Math.round(ry * coords.y) + 'px'
     });
   }
};

The variables img_height and img_width find the new dimensions of the image, which are unique for images with different dimensions. The variables are then used to make calculations for the width and height of the preview pane.