我使用离屏 canvas
根据某些变量的运行时值动态生成某些图像。在屏幕外 Canvas 上绘制图像后,我想获取它并在我的网络应用程序的多个位置使用它。
策略 1: 使用屏幕外 Canvas 的 toDataURL()
方法获取包含图像的 data:
URI,我可以以编程方式设置页面中应该显示它的多个 img
元素。
策略二:使用离屏 Canvas 的getImageData()
方法获取ImageData
实例。将 img
元素替换为 canvas
元素并对其调用 putImageData()
。
哪种策略在内存方面更有效?哪个更“地道”?我试图避免复制保存显示图像实例所需的内存。其他建议?
最佳答案
使用 canvas 元素代替 img 元素。
然后将内存 Canvas 绘制到屏幕 Canvas 上。 Canvas 元素可以使用另一个 Canvas 作为 drawImage 源:
context.drawImage(inMemoryCanvasElementReference,0,0);
顺便说一句,imageData 命令(.getImageData
和.putImageData
)的内存效率非常低,因为它们构建了一个全新的像素数据数组。它们还缺乏性能,因为它们没有 GPU 加速。
关于canvas - 重用 HTML5 Canvas 绘制内容的最有效方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33258874/