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

时间:2015-10-21 12:06:31

标签: canvas data-uri getimagedata off-screen putimagedata

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

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

策略2:使用屏幕外画布的getImageData()方法获取ImageData实例。将img元素替换为canvas元素,并在其上调用putImageData()

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

1 个答案:

答案 0 :(得分:1)

使用canvas元素而不是img元素。

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

context.drawImage(inMemoryCanvasElementReference,0,0);
BTW,imageData命令(.getImageData.putImageData)内存效率非常低,因为它们构建了一个全新的像素数据数组。它们也缺乏性能,因为它们不是GPU加速的。