javascript - Html5 Canvas resize

Question

Am using canvas to resize image at the client side and then upload that image to the server. My intention was to resize the image to half of its original dimensions and wanted to see a decrease in the file size. But the resized image size is always greater than the original.

For example,

I was resizing a 2.5 MB JPEG image file with dimensions 2592 x 1936 to 1296 x 968 (JPEG file) and tried to upload it to the server. On the server I see that the file is saved with the 3.5 MB size.

Is there something that we can do while resizing with html5 canvas so that if we are decreasing the dimensions we could expect some decrease in the file size like compression.

Answer 1

If you are using toDataURL, you can set the second argument to a number between 0.0 and 1.0. This is the JPEG quality level, with 1.0 meaning very high quality and a very large image and nearer to 0.0 meaning lower quality smaller image.

So, for example, you could try:

 data = downsizedCanvas.toDataURL("image/jpeg", 0.2);

Here's a description in the w3c reference: www.w3.org: toDataURL

It looks like there has been a bug in Firefox to do with ignoring the quality, so you might need to test in some modern browsers.