canvas - 重用 HTML5 Canvas 绘制内容的最有效方式

Question

我使用离屏 canvas 根据某些变量的运行时值动态生成某些图像。在屏幕外 Canvas 上绘制图像后，我想获取它并在我的网络应用程序的多个位置使用它。

策略 1: 使用屏幕外 Canvas 的 toDataURL() 方法获取包含图像的 data: URI，我可以以编程方式设置页面中应该显示它的多个 img 元素。

策略二:使用离屏 Canvas 的getImageData()方法获取ImageData实例。将 img 元素替换为 canvas 元素并对其调用 putImageData()。

哪种策略在内存方面更有效？哪个更“地道”？我试图避免复制保存显示图像实例所需的内存。其他建议？

Answer 1

使用 canvas 元素代替 img 元素。

然后将内存 Canvas 绘制到屏幕 Canvas 上。 Canvas 元素可以使用另一个 Canvas 作为 drawImage 源:

context.drawImage(inMemoryCanvasElementReference,0,0);

顺便说一句，imageData 命令(.getImageData 和.putImageData)的内存效率非常低，因为它们构建了一个全新的像素数据数组。它们还缺乏性能，因为它们没有 GPU 加速。