3

The application PhotoFiltre has an option to stretch part of an image. You select a rectangular shape and you can then grab and move the vertexes somewhere else to make any quadrangle. The image part which you selected will stretch along. Hopefully these images make my point a little clearer:

before

after

Is there a general algorithm which can handle this? I would like to obtain the same effect on HTML5 canvas - given an image and the resulting corner points, I would like to be able to draw the stretched image in such a way that it fills the new quadrangle neatly.

A while ago I asked something similar, where the solution was to divide the image up in triangles and stretch each triangle so that each three points correspond to the three points on the original image. This technique turned out to be rather exprensive and I would like if there is a more general method of accomplishing this.

I would like to use this in a 3D renderer, but I would like to work with a (2D) quadrangle.

I don't know whether PhotoFiltre internally also uses triangles, or whether it uses another (cheaper) algorithm to stretch an image like this.

Does someone perhaps know if there is a cheaper or more general method/algorithm to stretch a rectangular image, so that it fills a quadrangle given four points?

Community
  • 1
  • 1
pimvdb
  • 151,816
  • 78
  • 307
  • 352

2 Answers2

3

The normal method is to start with the destination, pick an appropriate grid size and then for each point in the new shape calculate the corresponding point in the source image (possibly with interpolation depending on the quality you need)

Martin Beckett
  • 94,801
  • 28
  • 188
  • 263
  • Thanks a lot, I'm trying things out. Just wanted to add that I found this website after more searching: http://acko.net/files/projective/index.html. It seems interesting. – pimvdb Aug 22 '11 at 17:34
  • That's gonna take up a lot of performance. How can this be minimized without using a plugin? –  Nov 16 '17 at 18:18
1

Affine transform.

Given four points for the "stretched" figure and four points for the figure it should match (e.g. a rectangle), an affine transform provides the spatial mapping you need. For each point (x1,y1) in the original image there is a corresponding point (x2,y2) in the second, "stretched" image.

For each integer-valued pixel (x2, y2) in the stretched image, use the affine transform to find the corresponding real-valued point (x1, y1) in the original image and apply its color to (x2,y2).

http://demonstrations.wolfram.com/AffineTransform/

You'll find sample code for Java and other languages online. .NET has the Matrix class.

Rethunk
  • 3,976
  • 18
  • 32