canvas.toDataURL("image/png") - 它是如何工作的以及如何优化它

我想知道是否有人知道如何

canvas.toDataURL("image/png"); 

作品？我想更好地理解，因为有时它似乎确实降低了我的计算机速度。 有没有办法在之前、期间或之后优化 Base64 图像以获得更好的性能？

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;
}

基本上这是我的功能，但我想看看是否有办法让这个过程执行得更好，或者是否有 canvas.toDataURL('image/png'); 的替代方案。

thanks

toDataURL()调用时（同步）执行以下操作：

• 根据请求或支持的文件类型创建文件头（默认为 PNG）
• 根据文件格式压缩位图数据
• 将生成的二进制文件编码为 Base-64 字符串
• 前置 data-uri 标头并返回结果

将 data-uri 设置为源时（异步）：

• 字符串已验证
• Base-64部分被分离并解码为二进制格式
• 二进制文件经过验证然后解析并解压缩
• 将生成的位图设置为 Image 元素并调用适当的回调

这些都是耗时的步骤，并且由于它们是内部的，因此我们无法以任何理由利用它们。由于它们在给定的工作环境下得到了相当优化，因此我们几乎无法对其进行优化。

您可以使用 JPEG 与 PNG 来尝试不同的压缩方案。他们使用非常不同的压缩技术，根据图像大小和内容，在各种情况下，一种压缩技术可能比另一种更好。

我的2分..