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

【问题标题】：canvas.toDataURL("image/png") - how does it work and how to optimize itcanvas.toDataURL("image/png") - 它是如何工作的以及如何优化它
【发布时间】：2015-10-21 02:31:40
【问题描述】：

我想知道有没有人知道怎么做

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');

谢谢

【问题讨论】：

标签： javascript canvas

【解决方案1】：

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

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

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

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

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

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

我的 2 美分..

【讨论】：

谢谢，我将尝试使用不同的基准进行基准测试，看看我的性能差异。是否有进一步压缩 Base-64 字符串，例如使其具有更少的颜色或像素？你还知道另一种选择吗？
@naeluh 不，base-64 只是编码的二进制数据（文件本身），与图像本身无关。 JPEG 将节省 RGB，而 PNG 将节省 RGBA。但是 jpeg 使用有损压缩，而 PNG 不是，因此您需要基于此进行加权。

【解决方案2】：

高性能替代方案是canvas.toBlob。它非常快速、异步，并且可以生成一个也可以交换到磁盘的 blob，并且从主题上讲更有用。
不幸的是，它是在 Firefox 中实现的，but not in chrome。

仔细地对此进行了基准测试，没有办法解决，因为 canvas.toDataURL 本身就是数量级的瓶颈。

【讨论】：

Chrome 现在支持它。