Question

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

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（＆＃39; image / png＆＃39;）;

谢谢

Answer 1

在调用（同步）时，

toDataURL()执行以下操作：

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

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

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

这些是耗时的步骤，因为它们是内部的，我们无法出于任何原因使用它们。由于它们已被优化，因为它们被赋予了它们所处的上下文，因此我们无法对它们进行优化。

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

我的2美分..

Answer 2

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

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

canvas.toDataURL（“image / png”） - 它是如何工作的以及如何优化它

2 个答案: