如何从CanvasPixelArray创建图像对象

Question

我在文档中有两个<canvas>元素。

我想在canvas1上绘制一个形状，使用ctx1.getImageData()方法复制该形状的部分并在canvas2上为这些部分设置动画。

我读过使用ctx2.putImageData()比使用ctx2.drawImage()慢。

如何在JavaScript中使用CanvasPixelArray（从ctx1.getImageData()调用返回）创建Image对象？

（注：我不想复制整个canvas1但它只是部分还有，我不关心旧的浏览器。）

Answer 1

这应该做你想要什么，除非我失去了一些东西：

ctx2.drawImage(canvas1, source_x, source_y, source_width, source_height, dest_x, dest_y, dest_width, dest_height);

的drawImage()功能既image和canvas元素的作品，所以没有必要建立一个新的image对象或临时对象canvas除非您需要操作像素。

Answer 2

我觉得我得到它。我必须创建一个临时画布元素，然后使用canvas.toDataURL()方法。不过，我很想找到一个不使用临时画布的解决方案。

// ctx1 and ctx2 are the 2d context objects for canvas1 and canvas2 

var image_data = ctx1.getImageData(23, 43, 20, 20); 
var image = getImageObjectByImageData(image_data); 

ctx2.drawImage(image, 20, 30); 

function getImageObjectByImageData($image_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 = new Image(); 
     img.width = $image_data.width; 
     img.height = $image_data.height; 
     img.src = temp_canvas.toDataURL(); 

    return img; 
}