How to crop different size images with jcrop

Question

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?

Answer 1

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.