ROTATED IMAGES

rotating jpeg & png / rotating in canvas

Joost v@n Meeteren


Rotten apple - examples 1

JPEG - original photo & rotated copy

Rotten apple - JPEG - original position Rotten apple - JPEG - rotated position


Rotten apple - examples 2

PNG - original photo & rotated copy

Rotten apple - PNG - original position Rotten apple - PNG - rotated position


Rotten apple - examples 3

Canvas - original position & three rotated positions

Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.

Your browser does not support the HTML5 canvas tag. Your browser does not support the HTML5 canvas tag.


Rotating methods. There are two methods to rotate digital pictures. You can rotate a JPEG in a program like Picasa or Paint. Then the results of rotating can be exported to a new file. The second method is rotating the JPEG (or PNG) in HTML Canvas.

The advantages of HTML Canvas. Rotating an image in Canvas can be done with a single source photo (in JPEG and PNG). Canvas nr. 1 represents the original position. Numbers 2-4 are rotated versions. But nr. 1-4 are produced by one JPEG source file.

Conclusion. Using Canvas on a website is a very good choice. You avoid placing multiple images on the server, including the original photo and the rotated versions of it. And secondly, you can easily adjust the values of the rotation without compromising the quality of the original JPEG.


Compare. See also CROPPED IMAGES and BLACK & WHITE IMAGES and MIRRORED IMAGES and HORIZONTALLY MIRRORED IMAGES and FILTERED IMAGES and DETAILS ON THE FOREGROUND and TEXT ON IMAGES.


WebDevelopment and WebDesign 2002-2019 © Joost van Meeteren
Web Developer/Designer/Photographer
Last update Tuesday, May 21, 2019 at 09:03