Page 1 of 1

Reproduce iPhone tricky image processing

Posted: 2011-10-11T01:10:18-07:00
by Bertrand
Hello everyone,

First of all, I apologize if my english is poor. This is not my native language.

Here is my issue :

I have an iPhone application that allows user to play with a photo on a frame : translate, zoom, rotate.
Once the user validates its changes, the values of translation X, translation Y, zoom and rotation are sent to the server along with the original image.

For images where zoom < 1, I don't have any problem to make my server-side preview fit what I designed on the application.

But when zoom value is greater than 1.5, I'm starting having big big issues trying to reproduce the view.

Let's take a concrete example :

Image

Step 1

I move my photo down and right :

Image

Step 2

I zoom with my finger :

Image

And that's it.

What I know is that zoom always take it's origin from the center of the photo (which is outside my original frame).
So the big picture is this :

Image

What type of Imagemagick's trick can I use to achieve this result ? How can I have an enormous picture zoomed and crop just a frame in it, and having the result fitting perfectly my iphone preview ?
Maybe use a viewport, with resize and crop ?

Thanks a lot in advance for any kind of help.

Re: Reproduce iPhone tricky image processing

Posted: 2011-10-11T17:07:53-07:00
by anthony
Forget crop, resize, zoom, etc..

What you are doing can all be done using a single operation -distort SRT
http://www.imagemagick.org/Usage/distorts/#srt
This is scale-rotate-translate. You can specify the center of scale or rotation, and then translate that center to a new location.

The '-' version of distort uses the original images bounds (your iphone screen size) as the 'viewport' for the distorted image. However you can also specify a different viewport for into the distorted image space using a special setting
Viewport, Where Distort Looks
http://www.imagemagick.org/Usage/distor ... t_viewport

You can control what the undefined area surrounding the original image looks like (be is black, tiled, or otherwise) using the -virtual-pixel setting
http://www.imagemagick.org/Usage/im/misc/#virtual-pixel

ASIDE: SRT distortion is actually a form of 'affine projection'. The -verbose output of -distort will list the actual affine projection matrix values used. This means that if the user inputs multiple SRT operations, you can merge (matrix multiply) those operations together so as to generate a single distortion from the original image, to the current distorted 'view' of the image. This will prevent the image becoming 'clipped' if the user zooms in, and then later rotates or zooms out again, as the data always comes from the original source.

For this type of work I recommend some study of affine matrix operations (any good graphics, or vector maths book). Some old examples and notes are in
http://www.imagemagick.org/Usage/distorts/affine/
And more specifically in Compound Affine Translations
http://www.imagemagick.org/Usage/distor ... e_compound
Though it uses a program that does the matrix mathematics internally (just as -distort SRT does).

Re: Reproduce iPhone tricky image processing

Posted: 2011-10-12T10:05:56-07:00
by Bertrand
Thank you very much for this precise answer.

I tested SRT actually, but with "+distort". I didn't realize the interest of "- distort" in my specific case.

I will work on your solution.

Thanks again.

Re: Reproduce iPhone tricky image processing

Posted: 2011-10-13T23:03:28-07:00
by anthony
In summery
-distort use the original images viewport for the output image (if possible, not always practical)
This is basically for processing images without virtual canvas offsets.
+distort calculate a viewport that best fits the distorted image of the input image (if possible)
essentially try not to lose or clip the input image!
-define distort:viewport {geometry} override viewport calculations with this viewport of distorted space