HTMLCanvasElement.toDataURL() to include compression for png image format.
This lib provides shim for
HTMLCanvasElement.toDataURL() when image type is
'image/png'. It adds ability to
provide quality as second parameter to
HTMLCanvasElement.toDataURL() function. Quality is a Number between 0 and 1
indicating image quality if the requested type is
'image/webp', for the image/png it indicate compression level.
Quality is normalized to compression level of zlib compression from 9 downto 0 (0 => 9, 1 => 0).
How it works
Canvas-png-compression accesses to raw data of canvas using getImageData method of context. It then pako to apply zlib conversion to the filtered imageData(one of those filters is used for each row if image Sub, Up, Average, Paeth from filters spec). Compressed data is then packed with other chunks into one Uint8Array buffer that represents png image. It then is converted using window.btoa to base64 string;
Install using bower
bower install canvas-png-compression
npm install canvas-png-compression
Then you'll need to include
Then you can use
CanvasPngCompression.replaceToDataURL(); to replace
HTMLCanvasElement.toDataURL() with canvas-png-compression implementation.
If for some reason you need to revert to native implementation, use:
Passing params to pako
You can pass params to pako's zlib deflate like this:
then open http://localhost:3000/demo/demo.html
I've got my inspiration from: