Canvas 重复使用HTML5画布的最有效方法&x27；绘画内容

我使用屏幕外的

canvas

根据某些变量的运行时值动态生成某些图像。一旦在屏幕外的画布上绘制了图像，我就想得到它并在我的webapp的几个地方使用它

策略1:使用屏幕外画布的

toDataURL（）

方法获取包含图像的

数据：

URI，我可以通过编程方式在页面中的多个

img

元素上设置该URI，以显示图像

策略2:使用屏幕外画布的

getImageData（）

方法获取

ImageData

实例。将

img

元素替换为

canvas

元素，并对其调用

putImageData（）

---

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

使用画布元素而不是img元素

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

context.drawImage(inMemoryCanvasElementReference,0,0);

---

顺便说一句，imageData命令（

.getImageData

和

.putImageData

）的内存效率非常低，因为它们构建了一个全新的像素数据数组。它们也缺乏性能，因为它们没有GPU加速。

通过“在我的web应用程序的多个位置使用它”您是指在同一网页上的多个位置，还是指跨帖子？在同一网页上（反正是SPA）。非常感谢。这很有效。我只需要解决视网膜显示和设备像素比率的问题…