在 Chrome 上使用 drawImage 和 Canvas 非常慢

Posted 2023-03-05

【中文标题】在 Chrome 上使用 drawImage 和 Canvas 非常慢

【英文标题】：Using drawImage with Canvas is very slow on Chrome

【发布时间】：2013-04-08 00:23:11

【问题描述】：

我一直在尝试使用 drawImage 将 SVG 文件的大量实例绘制到画布上。通过使用 SVG 作为源创建单个图像元素，然后为画布上的每个实例使用 drawImage，我希望即使有大量实例，我也可以非常快速地在画布中生成合成图像。

性能方面，这在 Firefox 中运行良好 - 我可以在大约 300 毫秒内绘制 60,000 个实例。但是在 Chrome 上它非常慢：16,000 个实例需要 5 秒以上。我在jsfiddle 上放了一个版本的代码，它演示了Chrome 上的问题。

我有一个我如何在下面调用 drawImage 的示例，其中画布上填充了尽可能多的大小 x 大小的图像。我读过一个建议，尝试使用第二个隐藏画布来缓冲所有实例，然后通过一次调用更新可见画布。但这并没有影响性能，各个 drawImage 调用似乎仍然使事情陷入困境。

对出了什么问题以及我能做些什么来解决它有什么想法吗？

            svgImg = new Image;

            can.width = 1800; can.height = 900;
            svgImg.onload = function () 
                if (internalSize == size)
                    return;
                internalSize = size;
                var timeBefore = new Date().getTime();
                var tot = 0;

                var canWidth = can.width;
                var canHeight = can.height;
                for (var x = 0; x < canWidth; x += size) 
                    for (var y = 0; y < canHeight; y += size) 
                        ctx.drawImage(svgImg, x, y, size, size);
                        tot++;
                    
                
                document.getElementById('count').innerhtml = "Total Count: " + tot;
                var timeAfter = new Date().getTime();
            ;
            svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg";
            svgImg.width = size;
            svgImg.height = size;

【参考方案1】：

减速 1：当源或目标画布在 RAM 中而另一个画布在 GPU 上时发生。

Slowdown 2：在 src 和 dest 画布大小不同时发生

---

相关bug：http://code.google.com/p/chromium/issues/detail?id=170021

我注意到了同样的问题，并将案例简化为将一个空白画布绘制到另一个。当画布尺寸相同时，这似乎不是问题，但在某一点上，性能会急剧下降。这是jspref，以及我的结果：

注意 255x255 到 100x100 和 260x260 到 100x100 的区别。

【讨论】：

这太疯狂了。感谢您进行此测试。

这对我来说也是如此。在我将画布制作成完全相同的大小之前，我看到了大量的延迟。

虽然错误跟踪器说错误已修复，但 Sam 的观点仍然成立，即当画布大小不同时会出现减速。我已经更新了答案以反映这一点。