0

I have two <canvas> elements in a document.

I want to draw a shape on canvas1, use the ctx1.getImageData() method to copy parts of that shape and animate these parts on canvas2.

I read that using ctx2.putImageData() is slower than using ctx2.drawImage().

How can i create an Image object from a CanvasPixelArray (which is returned from the ctx1.getImageData() call) in JavaScript?

(Note: I don't want to copy the whole canvas1 but only parts of it. Also, I don't care about old browsers)

4

2 に答える 2

1

私が何かを逃していない限り、これはあなたが望むことをするはずです：

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

この関数はと要素のdrawImage()両方で機能するため、ピクセルを操作する必要がない限り、新しいオブジェクトや一時的なオブジェクトを作成する必要はありません。imagecanvasimagecanvas

于 2012-05-07T00:45:06.857 に答える
0

私はそれを手に入れたと思います。に一時的なcanvas要素を作成してから、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;
}
于 2012-05-06T19:01:58.020 に答える