javascript - canvas.toDataURL("imagepng") - how does it work and how to optimize it - Stack Overflow

admin管理员组

文章数量:1290429

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 puter 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

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 puter 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

• javascript
• canvas

Share Improve this question Follow asked May 1, 2014 at 17:44 naeluhnaeluh 9711111 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 unpressed
• 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 pression schemes by using JPEG versus PNG. They are using very different pression techniques and depending on the image size and content one can be better than the other in various situations.

My 2 cents..

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.

本文标签： javascriptcanvastoDataURL(quotimagepngquot)how does it work and how to optimize itStack Overflow