CanvasPixelArrayからImageオブジェクトを作成する方法

Question

文書には2つの<canvas>要素があります。

canvas1に図形を描画したい場合は、ctx1.getImageData()メソッドを使用してその図形の一部をコピーし、これらの部分をcanvas2にアニメーション化します。

ctx2.putImageData()を使用すると、ctx2.drawImage()を使用するよりも遅いことが読み取れます。

CanvasPixelArray（ctx1.getImageData()呼び出しから返される）からImageオブジェクトをJavaScriptで作成するにはどうすればよいですか？

（注：私は、全体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; 
}