canvas.toDataURL（“ image / png”）-如何工作以及如何对其进行优化

Question

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 computer down. Is there a way to optimize the base64 image before during or after to get better performance ?

function base64(url) {
    var dataURL;
    var img = new Image(),
        canvas = document.createElement("canvas"),
        ctx = canvas.getContext("2d"),
        src = url; 
    img.crossOrigin = "Anonymous";
    img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL('image/png');
        preload(dataURL);
        canvas = null;
    };
    img.src = url;
}

Basically this is my function but I wanted to see if there was a way to make this process perform better or if there was an alternative to canvas.toDataURL('image/png');

thanks

Answer 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..

Answer 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.