Javascript 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'）

感谢

toDataURL（）

在调用时（同步）执行以下操作：

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

将数据uri设置为源时（异步）：

• 字符串已验证
• Base-64部分被分离并解码为二进制格式
• 二进制文件验证，然后解析和解压缩
• 结果位图设置为Image元素并调用正确的回调

这些都是耗时的步骤，由于它们是内部的，我们无法出于任何原因利用它们。由于它们是非常优化的，因为它们是在给定的环境中工作的，所以我们几乎无法对它们进行优化

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

---

我的2美分..

高性能替代品是。它速度极快、异步，并产生一个blob，该blob也可以交换到磁盘，从主观上说，它更有用。
不幸的是，它是在Firefox中实现的

---

仔细地做了基准点标记后，就没有办法了，因为canvas.toDataURL本身就是数量级的瓶颈。

谢谢，我会尝试使用不同的基准点，看看我的性能有什么不同。是否有更进一步的压缩Base-64字符串的方法，使其具有更少的颜色或像素？你还知道另一种选择吗？@naeluh不，base-64只是编码的二进制数据（文件本身），与图像本身无关。JPEG将保存RGB，而PNG将保存RGBA。但是jpeg使用的是有损压缩，而PNG则不是，所以你需要根据它来加权。现在Chrome支持它。