重用 HTML5 画布绘图内容的最有效方法答案

【问题标题】：Most efficient way to reuse an HTML5 canvas's drawn content重用 HTML5 画布绘图内容的最有效方法
【发布时间】：2015-10-21 12:06:30
【问题描述】：

我使用屏幕外canvas 根据某些变量的运行时值动态生成某些图像。在屏幕外画布上绘制图像后，我想获取它并在我的 web 应用程序的几个地方使用它。

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

策略2：使用离屏画布的getImageData()方法获取ImageData实例。将img 元素替换为canvas 元素并在它们上调用putImageData()。

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

【问题讨论】：

【解决方案1】：

使用画布元素代替 img 元素。

然后将内存中的画布绘制到屏幕画布上。一个canvas元素可以使用另一个canvas作为drawImage源：

context.drawImage(inMemoryCanvasElementReference,0,0);

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

【讨论】：