Canvas.todataurl("image/png") - How Does It Work And How To Optimize It

I wanted to know if there was anyone out there that knows how canvas.toDataURL('image/png'); works? I want to understand better because at times it seems to really slow my comput

Solution 1:

toDataURL() does the following when called (synchronously):

• Creates a file header based on the file type requested or supported (defaults to PNG)
• Compresses the bitmap data based on file format
• Encodes the resulting binary file to Base-64 string
• Prepends the data-uri header and returns the result

When setting a data-uri as source (asynchronously):

• String is verified
• Base-64 part is separated and decoded to binary format
• Binary file verified then parsed and uncompressed
• Resulting bitmap set to Image element and proper callbacks invoked

These are time-consuming steps and as they are internal we cannot tap into them for any reason. As they are pretty optimized as they are given the context they work in there is little we can do to optimize them.

You can experiment with different compression schemes by using JPEG versus PNG. They are using very different compression techniques and depending on the image size and content one can be better than the other in various situations.

My 2 cents..

Solution 2:

The high performance alternative is canvas.toBlob. It is extremely fast, asynchronous, and produces a blob which can also be swapped to disk, and is subjectly speaking simply far more useful. Unfortunately it is implemented in Firefox, but not in chrome.

Having carefully bench-marked this, there is no way around because canvas.toDataURL itself is the bottleneck by orders of magnitude.