重用 HTML5 画布绘制内容的最有效方法

Question

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

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

策略二：使用离屏canvas的getImageData()方法获取ImageData实例。用img元素替换canvas元素并调用putImageData()它们。

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

Answer 1

使用 canvas 元素代替 img 元素。

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

context.drawImage(inMemoryCanvasElementReference,0,0);

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