How to compress .png images when exporting from Canvas using toDataURL()?

Question

Need to generate .png images that are about ~20k in size using HTML5 canvas. Unfortunately, when creating .pngs using the toDataURL() method, you cannot specify quality like you can with jpegs.

Any ideas for a workaround? toDataURL seems to be the only way to generate images from Canvas and canvas seems to be the best tool for image processing without server interaction. Appreciate any suggestions.

Answer 1

There IS a way to have compression for PNG images using lossless zlib deflate process http://www.w3.org/TR/PNG-Compression.html . There is a library (https://github.com/ShyykoSerhiy/canvas-png-compression) that provides shim for HTMLCanvasElement.toDataURL() when image type is 'image/png' and enables ability to provide 'quality' as second parameter to HTMLCanvasElement.toDataURL() for png.

NOTE that it provides better results(smaller size) only in Chrome. Firefox sometimes has better compression than canvas-png-compression(as for 0.0.3 version).

Answer 2

You can do something by scaling it down and then scaling it up again.

• Scale down by drawing it on a smaller canvas, then get the data url.

• Create an image object set the data url as its source.

• Draw on the original canvas with this img object (obviously inside the onload event callback)

• Find the size ratio of the canvases to give you optimum result by experimenting a bit.