How should the marker be found?

Manually click onto the 4 corners in clockwise order to start the perspective correction
Click inside the inner white area of the marker to start the perspective correction
not implemented yet: Automatic marker detection: Click anywhere in the image to start the perspective correction

Dimensions

DPI of output image:
Inner Width of marker in mm:
Inner Height of marker in mm:

How should the perspective correction be done? (Multiple output paths can be selected for comparison)

Javascript/Canvas using No Filter/Nearest Neighbour (slow for large images)
Javascript/Canvas using Bilinear Interpolation (slow for large images)
ImageMagick command line (recommended for larger DPI)

How does it work? Show me the guts!

Show Sobel Gradient Image
Show Mask Image used for clipping
Show Clipped Gradient Image
Show Clipped Sobel Gradient Image with vectorized lines

This is just a testing ground for some ideas I want to try out...

The basic idea is this: You attach a printed marker (a black rectangle, I use this svg which has an inner size of 170x250mm) next to the flat surface you are interested in (in this example a star wars poster that you want to augment somehow) and take a picture. Because we have the marker and we know its size in the real world we can automagically do a size and perspective correction of the flat surface. You can then modify the corrected image in gimp or photoshop and when you print it out it will fit right into the place where the image came from: the real world flat surface :) The whole thing runs in javascript in the webbrowser thanks to html5 :)

The perspective and scaling is derived from the vectorized inner contour of the black frame of the marker. The lines are vectorized with an antialiased search in the radon transformed gradient image (I always wanted to write this sentence:). Adjust the DPI of the output image to get more detail but be aware that the resulting image might be huge.

Clifford's NumJS is used for solving the 8-dimensional linear equation that appears in the perspective matrix calculations...and thanks to clifford also for writing cliprect.cc...my perspective correction code is just a 1:1 translation of clifford's code to js (so this makes this webpage GPL I guess:). Thanks to bernhard for showing me the radon transform in the context of line vectorization :)

The latest version of the full source code can be found here: https://bitbucket.org/wizard23/surfaceaugmenter

questions, ideas, comments to: wizards23+surfaces@gmail.com

I collect pictures of applications of the SurfaceAugmenter in this flickr set.

(GPL) by wizard23