Image rotation by three affine transformations
source link: https://quuxplusone.github.io/blog/2021/11/26/shear-rotation/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Image rotation by three affine transformations
Via that same Hacker News piece that generated “Image rotation by shifting pixels” (2021-11-13): Any angular rotation can be expressed as the sum of three shear transformations. Shear right, then down, then right again; the result is an angular rotation!
Unlike the previous method for rotating by 90 degrees, this sum-of-shears method isn’t “pixel-conserving,” because you’ll end up shifting almost all the pixels by non-integer pixel offsets. So there has to be some interpolation to fit the data back onto the pixel grid. This interpolation slightly blurs the resulting image, even when rotating by 90 degrees.
In writing this JavaScript code I learned about the
context.setTransform
function, which makes the code for shearing an image almost disappointingly easy,
and this “rotation by composing affine transformations” business almost obvious.
Check it out on your own sample image below:
The Javascript/Canvas code embedded in the iframe above is also downloadable here.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK