Search code examples
rotationcropimage-manipulationimageresizer

imageresizer: how can I get crop and rotate to work in an editor in the right order?

I am using http://imageresizing.net/ tools to create an editor.

The user can crop and rotate, but when they crop first and then rotate they lose the correct crop coords because the image coords have changed

for example, given a 100x100 image with a crop of the top left 50x50 pixels would then get rotated clockwise and now shows the crop as the original bottom left 50x50 pixels of the source image.

another example with images:

step one crop:

bird at feeder, cropped

step two rotate:

bird at feeder, cropped and rotated

coords haven't changed, but now it is no longer the proper crop area

does anyone know of a way to have the crop be relative to the original instead of the origin point?

Solution

  • Are you building something like StudioJS?

    StudioJS uses ImageResizer.js to manage the command string and translate co-ordinates.

    Consider a workflow where your user crops, rotates, and then re-crops the image. To preserve the original crop you will need to translate the coordinates in javascript. ImageResizer.js can do this.