CROPPED IMAGES

cropping jpeg & png / cropping in canvas

Joost v@n Meeteren


Mushrooms - examples 1

JPEG - original photo & cropped copy

Mushrooms - JPEG - original size Mushrooms - JPEG - cropped size


Mushrooms - examples 2

PNG - original photo & cropped copy

Mushrooms - PNG - original size Mushrooms - PNG - cropped size


Mushrooms - examples 3

Canvas - original size & three cropped sizes

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.


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

The advantages of HTML Canvas. Cropping an image in Canvas can be done with a single source photo (in JPEG and PNG). Canvas nr. 1 represents the original sizes. Numbers 2-4 are cropped 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 cropped versions of it. And secondly, you can easily adjust the values of the cropping without compromising the quality of the original JPEG.


Compare. See also BLACK & WHITE IMAGES and ROTATED 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 Wednesday, November 20, 2019 at 08:15