在Chrome上使用drawImage和Canvas非常慢 [英] Using drawImage with Canvas is very slow on Chrome

问题描述

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

I've been trying to draw a large number of instances of an SVG file to a canvas using drawImage. By creating a single image element using the SVG as the source, then using drawImage for each instance on the canvas, I was hoping I could produce a composite image in the canvas very quickly even with a large number of instances.

性能方面，这在Firefox中工作得很好 - 我可以在大约300ms内绘制60,000个实例。但在Chrome上，它非常慢：16,000个实例超过5秒。我已在 jsfiddle 上放置了一个版本的代码，这说明Chrome有问题。

Performance-wise, this works well in Firefox - I can draw 60,000 instances in about 300ms. But on Chrome it is terribly slow: 16,000 instances is taking over 5 seconds. I've put a version of the code on jsfiddle, which demonstrates the problem on Chrome.

我有一个如何调用drawImage的例子，在这里，canvas被填充尽可能多的x尺寸的图片。我读了一个建议，尝试使用第二个，隐藏的画布来缓冲所有的实例，然后更新可见的画布与一个调用。但是这并没有影响性能，单独的drawImage调用仍然似乎是让事情陷入困境。

I've got an example of how I'm calling drawImage below, where the canvas is filled with as many size x size images as possible. I had read a suggestion to try using a second, hidden canvas to buffer all the instances, then update the visible canvas with one call. But that didn't impact performance, the individual drawImage calls still appear to be bogging things down.

有任何想法，我可以做什么来解决它吗？

Any thoughts on what's going wrong and what I can do to fix it?

            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;

推荐答案

编辑：找到一个相关的错误： http://code.google.com/p/chromium/issues/detail?id= 170021

found a relevant bug: http://code.google.com/p/chromium/issues/detail?id=170021

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

Answer: The slowdown occurs when either the source or destination canvas is in RAM and the other canvas is on GPU.

我注意到同样的问题，简化了将一个空白画布绘制到另一个画布的情况。当画布尺寸相同时，它似乎并不是一个问题，但在某一点上，性能需要鼻子潜水。以下是 jspref 和我的结果：

I have noticed the same issue, and simplified the case to drawing one blank canvas to another. It doesn't seem to be an issue when the canvases are the same size, but at a certain point performance takes a nose dive. Here is the jspref, and my results:

请注意，255x255到100x100和260x260到100x100之间的差异。

Notice the difference in 255x255 to 100x100 and 260x260 to 100x100.

这篇关于在Chrome上使用drawImage和Canvas非常慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！