0

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?

Nateous
  • 757
  • 9
  • 23

1 Answers1

1

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.

Lilith River
  • 16,204
  • 2
  • 44
  • 76
  • we might have been using an older version of StudioJS, but are building our own so that we can give the tool a face lift (we didn't want to just use the jquery ui). can you point me to the docs on re-cropping after a rotate? or give some sample code? – Nateous Jul 21 '14 at 19:21
  • I would suggest just modifying the jquery-specific parts - it's not tightly coupled. https://github.com/imazen/studiojs/blob/master/jquery.imagestudio.js#L360 and https://github.com/imazen/studiojs/blob/master/jquery.imagestudio.js#L477 show the rotate/flip and crop panes. – Lilith River Jul 21 '14 at 19:44