Question

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

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

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

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

（注意：我不想复制整个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元素，然后使用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;
}

如何从CanvasPixelArray创建Image对象

2 个答案: