如何從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; 
}