FILTERED IMAGES

filtering jpeg & png / filtering in canvas

Joost v@n Meeteren


Mushrooms - examples 1

JPEG - original colors & filtered colors

Mushrooms - JPEG - original image Mushrooms - JPEG - filtered image


Mushrooms - examples 2

PNG - original colors & filtered colors

Mushrooms - PNG - original image Mushrooms - PNG - filtered image


Mushrooms - examples 3

Canvas - original colors & filtered colors

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.


Mushrooms - examples 4

Canvas - more filtered colors

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.

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 change digital images into black and white, sepia and saturation. Programs like Picasa can be used for this purpose using the black and white, sepia and saturation filter. The results of using these filters can be exported to a new file. The second method is using HTML Canvas.

The advantages of HTML Canvas. Changing an image into black and white, sepia and saturation can be executed with one source photo (in JPEG and PNG) by using a Canvas filter (a javascript code). Canvas nr. 1 represents the original colors. Number 2 is the black and white version, number 3 the sepia version and number 4 the saturation version. 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 (colored) photo and the black and white, sepia and saturation versions of it. And secondly, you can easily adjust the filters without compromising the quality of the original JPEG or PNG.


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


WebDevelopment and WebDesign 2002-2019 © Joost van Meeteren
Web Developer/Designer/Photographer
Last update Monday, March 18, 2019 at 09:43