17 Aug 2009

Jcrop Large Image Previews

jQuery 7 Comments

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.

7 Responses to “Jcrop Large Image Previews”

  1. Tim says:
    February 17, 2011 at 9:57 pm

    Thank you! Just what I was looking for! :)

  2. Himali Singh says:
    March 30, 2011 at 3:00 am

    Cant thank you enough :)
    I have one more problem, if you can help please. When I try to crop another image i.e cropping an image second time, im unable to select image for cropping. The cursor just turns crosshair. Any pointers?
    Thanks in advance.

  3. chad says:
    March 30, 2011 at 9:32 am

    When you display the new image, make sure you run the Jcrop code again. For example, wrap the Jcrop code under a function, then run that function whenever you display a new image.

  4. Himali Singh says:
    March 31, 2011 at 4:35 am

    Thank you for the reply. I forgot to mention that I am loading multiple jCrop controls on a page. I figured out the issue – since multiple javascript functions of same name were being loaded, the control wasnt being rendered properly. I resolved this my setting clientmode of jcrop to autoid and appending clientid to all script functions.

  5. Ben says:
    September 2, 2011 at 11:15 am

    thanks a lot guy, you save my day !

  6. Greg says:
    September 14, 2011 at 9:57 pm

    Hi,

    Not sure if this is the solution I’m looking for but it’s close.

    I have the preview pane working ok when I specify the target width and height and size the preview pane accordingly. However for some other purposes I want the preview to resize and display the image exactly as the crop tool shows. This will help users to visualize their cropping and choose an aspect ratio that is appropriate for the photo and it’s purpose.

    Any ideas? Of all the days it appears the deepliquid website is down too. :(

  7. chad says:
    September 15, 2011 at 11:08 am

    Greg,

    I believe the app I created called Croply (http://croply.com) is what you are describing.

    It takes a height and width in some input fields, then changes lines 13 and 14 to:

    var rx = $("#resize_width").val() / coords.w;
    var ry = $("#resize_height").val() / coords.h;

    Lines 17 and 18 are then changed to:

    width: $("#resize_width").val() + 'px',
    height: $("#resize_height").val() + 'px'

Leave a Reply