Reproduce iPhone tricky image processing

Questions and postings pertaining to the development of ImageMagick, feature enhancements, and ImageMagick internals. ImageMagick source code and algorithms are discussed here. Usage questions which are too arcane for the normal user list should also be posted here.
Post Reply
Bertrand
Posts: 7
Joined: 2009-06-19T08:35:57-07:00
Authentication code: 8675309

Reproduce iPhone tricky image processing

Post 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.
User avatar
anthony
Posts: 8883
Joined: 2004-05-31T19:27:03-07:00
Authentication code: 8675308
Location: Brisbane, Australia

Re: Reproduce iPhone tricky image processing

Post 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).
Anthony Thyssen -- Webmaster for ImageMagick Example Pages
https://imagemagick.org/Usage/
Bertrand
Posts: 7
Joined: 2009-06-19T08:35:57-07:00
Authentication code: 8675309

Re: Reproduce iPhone tricky image processing

Post 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.
User avatar
anthony
Posts: 8883
Joined: 2004-05-31T19:27:03-07:00
Authentication code: 8675308
Location: Brisbane, Australia

Re: Reproduce iPhone tricky image processing

Post 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
Anthony Thyssen -- Webmaster for ImageMagick Example Pages
https://imagemagick.org/Usage/
Post Reply