No free lunch: EditImage’s Matrix Transformations

There is no free lunch in life. It’s pretty much the same with image manipulation in Actionscript. There is no way around linear algebra. Well, the good news is that it’s linear by definition. The bad news is that it becomes a bit quirky in Actionscript. With the following links, I hope to answer some questions I regularly get asked for the EditImage component.

What you should know

An excellent starting point is Senocular’s introduction in transformation matrices. This should give you enough motivation to muddle through affine transformation and friends in vector calculations. Should you loose your patience while repeating or learning, go to the hands-on matrix transformation page of Adobe.

Once you are a champion in linear algebra and the matrix API of the Flash Player, you need to know that Adobe’s transformation matrix is the tranpose of the matrix that is usually used in math. Philip Kromer explains it on his blog. The same guy has also written a very usefull demo.

Free Flex component: EditImage 0.3

Demo / Source

Just an other alpha release of EditImage with some work in it:

• Introduced interfaces for EditImage and the tools
• Quite frequently, I use EditImage as an image display and non of the tools are needed. That is the reason I disabled all tools by default. They are not initialized until a tool is enabled.
• Squashed some bugs like correct resizing of EditImage and positions of cursor
• More refactoring and more API documentation
• First unit tests added but many more needed
• EditImage.swc, API documentation (/tmp/ant-doc/index.html) and link-report (/tmp/ant-swf/EditImageReport.html) included in EditImage.zip

What is still on the wish list?

• As reported by Gireesh, when snap to top/left is disabled, the image can be move to any position on the screen.
• More refactoring
• Plug in new tools such as adding shapes, drawing with a pencil, adding text

Image editing component in Flex, Updated

There is an update of the component.

I found some more time to update EditImage. What’s now in the component?

1. Cropping including constrains to size ratio and minimal height and width.
2. Scaling including constrains to size ratio
3. Rotating including constrains to steps. Rotating snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
4. Snap to the initial top left position.
5. Serialize the sum of the transformations so you can store and retrieve the image edits.
6. Reset the image to the original image dimension and orientation
7. Reset image transformations to last set state.
8. Source code is under the BSD license. Some icons are under LGPL.

What’s missing?

1. No single test has been written.
2. More documentation
3. There are some low hanging fruits for performance improvements.
4. Provide user feedback when hitting limits.
5. Visual frames for picture

Have fun and report bugs.

Image editing component in Flex: EditImage

There is an update of the component.

I needed a simple image manipulation tool, similar to the one in Word. As I may want to use it in commercial products, the license is of importance. Here are the three options I found:

TransformManager

Jack Doyle has written the TransformManager component. On his blog, you also find some interesting image effects. Unfortunately, he excludes commercial use without explicit permission in his license.

ObjectHandles

Marc Hughes published ObjectHandles. It works just fine and it is under the MIT license. I might use it somewhen but the next component was just a better fit:

TransformTool

TransformTool has been hacked by Trevor McCauley and extended by Alessandro Crugnola. Trevor’s license is found in the About section and says All source files and downloads on this site are completely free to use any way you see fit for personal or commercial use. They are provided as is with no guarantee or warranty and are to be used at your own risk. I guess this allows the BSD license. Alessandro agreed by mail.

With about 80 private variables and a whopping 1′790 lines of code, TransformTool.as implements most of the functionality. I started refactoring this class at first but I haven’t finished it yet. Before we go into the details, here is the Demo and the Source see Update.

What’s new in EditImage?

1. Cropping including constrains to size ratio
2. Serialize the sum of the transformations so you can store and retrieve the image edits.
3. Reset the image to the original image dimension and orientation
4. Reset image transformations to last set state.
5. If rotated, controls are rotated as well
6. Rotate snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
7. Snap to the initial top left position.
8. Refactored the different tools like scaling and cropping into their own package.
9. Minimal height and width for cropping.
10. Removed things I don’t need like registration point or skewing.
11. It is under the BSD license.

What’s missing?

1. This is a prototype, not a production-ready component!
2. No single test has been written.
3. Further clean up of code including documentation.
4. I have not yet touched the cursors. They currently don’t work at all.
5. Hunting some more bugs like reseting sometimes confuses the orientation of the controls.
6. Provide user feedback when hitting limits.