Search code examples
javascriptjqueryimagepopupjcrop

Getting crop coordinates from a resized image



I'm working on a popup where the user can choose an image, crop it and then upload the croped area. The problem is that if the user choose a big image the popup goes very big so I tried to give the img a fixed size (or put it in a fixed div) but that ruined the coordinates that I get from the crop function (I use Jcrop btw). So the question is haw can I get correct crop coortinates from a resized image. Thank you.


Solution

  • I can't comment to ask for details, so here is an answer based on what I understand. If you want a more precise answer, you should add some code (the way you resize image, how you use Jcrop, etc).
    As I understand, the user choose the area to crop on a resized image.

    What you can do is calculate the resizing ratio.
    Let's say the image was 900*900px and you resize it to be 300*300px max.
    In this case, the ratio is 900/300=3 (originalWidth/resizedWidth).
    All you have to do is multiply the coordinates of the cropping by this ratio.

    Make sure that your ratio works both for width and height (that depends on the way you resize the image). If you image isn't a square you may have to calculate 2 ratios (one for the height and one for the width). In the case you have to multiply all x values by the widthRatio and all y values by the heightRatio.