geometrycropperjs

Is there a way to transform a point in the initial photo coordinates after a crop with cropperjs


I use cropperjs to crop some image, I keep in database the result of getData method who return values in white on the picture.

{x, y, width, height, rotate}

My users can place points on the cropped image in the red space, is there a way to retrieve the coordinates of the point in the blue space?

The crop ratio is free so there is no relation between original image ratio and crop ratio and I don't have the original image size.

Thank you for your help

enter image description here


Solution

  • At first get coordinates in bounding box

    bbx = redx + x
    bby = redy + y
    

    Now make rotation about bounding box center

    bluex = bbcenterx + (bbx - bbcenterx) * Cos(rotate) + (bby - bbcentery) * Sin(rotate)
    bluey = bbcentery - (bbx - bbcenterx) * Sin(rotate) + (bby - bbcentery) * Cos(rotate)
    

    If you don't know bounding box size, but know initial picture width w and height h, you can calculate bounding box center

    bbcenterx = (w * Abs(Sin(rotate)) + h * Abs(Cos(rotate))) / 2
    bbcenterx = (w * Abs(Cos(rotate)) + h * Abs(Sin(rotate))) / 2