Get new crop coordinates after rotating a cropped image

Question

I have a site where one of the features lets users upload images, then rotate/crop them. I'm using the following tools:

• ImageResizer
• JCrop

So let's say a user wants to crop the image first, then rotate it. Cropping gives a set of coordinates from the top left of the image that form a rectangle in the format x1,y1,x2,y2. I store that as a string in a database field and then append it to my call to ImageResizer like so:

http://www.url.com/assets/image.jpg?crop=x1,y1,x2,y2

However, if a user wants to rotate the image after having cropped it, those coordinates no longer apply. What I'd like to do is to split my coordinate string up into an integer array that contains x1,y1,x2,y2 in order.

My question is: is there a mathematical formula I can apply to those values based upon 90 or -90 degrees of rotation that will give me the correct coordinate values after rotation?

I only allow rotation in 90 degree increments and only one at a time - so from 0 to 90, then again from 90 to 180 if you wanted to flip it.

Answer 1

If you rotate clockwise, your crop co-ordinates change like this:

x1   <-  width - old_y2 - 1
x2   <-  width - old_y1 - 1
y1   <-  old_x1
y2   <-  old_x2

If you rotate anti-clockwise, your crop co-ordinates change like this:

x1   <-  old_y1
x2   <-  old_y2
y1   <-  height - old_x2 - 1
y2   <-  height - old_x1 - 1

Note that width and height above are the new width and height. You can substitute those for the old height and width, respectively.

To work this out, all I did was draw a picture on a scrap of paper. I labelled the crop points, rotated it, and worked out how they changed.