Javascript 如何从CanvasPixelArray创建图像对象

我在一个文档中有两个

元素

我想在画布1上绘制一个形状，使用

ctx1.getImageData（）

方法复制该形状的部分并在画布2上设置这些部分的动画

我读到使用

ctx2.putImageData（）

比使用

ctx2.drawImage（）

慢

如何从JavaScript中的

CanvasPixelArray

（从

ctx1.getImageData（）

调用返回）创建

Image

对象

---

（注意：我不想复制整个画布，而只复制其中的一部分。另外，我不在乎旧的浏览器）

我想我知道了。我必须创建一个临时canvas元素，然后使用

canvas.toDataURL（）

方法。不过，我很想找到一个不使用临时画布的解决方案

//ctx1和ctx2是canvas1和canvas2的二维上下文对象
var image_data=ctx1.getImageData（23,43,20,20）；
var image=getImageObjectByImageData（图像数据）；
ctx2.drawImage（图像，20,30）；
函数getImageObjectByImageData（$image\u data）
{
var temp_canvas=document.createElement（'canvas'）；
temp_canvas.height=$image_data.width；
temp_canvas.width=$image_data.height；
var temp_context=temp_canvas.getContext（'2d'）；
temp_context.putImageData（$image_data，0,0）；
var img=新图像（）；
img.width=$image\u data.width；
img.height=$image\u data.height；
img.src=temp_canvas.toDataURL（）；
返回img；
}

这应该是您想要的，除非我遗漏了什么：

ctx2.drawImage（画布1、源x、源y、源宽度、源高度、目的x、目的y、目的宽度、目的高度）

drawImage（）
函数同时适用于
image
和
canvas
元素，因此无需创建新的
image
对象或临时
canvas
，除非您需要操纵像素。
如果您关心性能，那么你真的应该测量这个和direct
putImageData
之间的差异。我不知道这是可能的。它实际上比使用图像对象更快（至少在我的实现中是这样）。非常感谢。