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
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