HORIZONTALLY MIRRORED

horizontally mirroring jpeg & png / horizontally mirroring in canvas

Joost van Meeteren




Floating trunk - examples 1

JPEG - original photo & horizontally mirrored copy

Floating trunk - JPEG - original position Floating trunk - JPEG - horizontally mirrored position


Floating trunk - examples 2

PNG - original photo & horizontally mirrored copy

Floating trunk - PNG - original position Floating trunk - PNG - horizontally mirrored position


Floating trunk - examples 3

Canvas - original photo & horizontally mirrored copy

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


Editing photos. There are two methods available to mirror digital images. Programs like Office Picture Manager can be used for this purpose using the mirror transform process. The results of using the mirror transform process can be exported to a new file. The second method is using HTML Canvas.

The advantages of HTML Canvas. Mirroring and rotating an image can be executed with a source photo (in JPEG and PNG) by using Canvas mirror transform and rotate (a javascript code). Canvas nr. 1 represents the original position. Number 2 is the horizontally mirrored version. But nr. 1-2 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 mirrored and rotated version of it. And secondly, you can easily adjust the mirror transform and rotate process without compromising the quality of the original JPEG.


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


WebDevelopment and WebDesign 2002-2024 © Joost van Meeteren
Web Developer/Designer/Photographer
Last update Friday, December 20, 2024 at 08:31