Search code examples
javascriptjqueryjcrop

How to crop different size images with jcrop

I want to use jcrop. I have a popup window that I want to show the image to be cropped. However I want the image to fit in a maximum image size of 400px wide. If I put width in the html tag that shows the image and then crop, it doesn't crop what I see, but crops based upon the real size of the image.

Do I need to first resize the image before I crop? If so what is the best way to do that?

Solution

  • Use is trueSize option when creating jcrop passing it an array of the original image size [500,300]

     <script>
    $(window).load(function() {
        $.Jcrop('#cropbox',{ trueSize: [500,370] });
    });
</script>

    and for it image tag

    <img src="test.jpg" width="400" />

    for more details see jcrop help page about this topic.