Canvas putImageData() メソッド

Canvas リファレンスマニュアル

定義と使用方法

putImageData() 指定された ImageData オブジェクトからの画像データをキャンバスに戻すメソッド。

ヒント：参照 getImageData() 指定されたキャンバスの矩形のピクセルデータをコピーするメソッド。

ヒント：参照 createImageData() 新しい空白の ImageData オブジェクトを作成するメソッド。

例

以下のコードは、getImageData()を使ってキャンバス上の指定された矩形のピクセルデータをコピーし、putImageData()を使って画像データをキャンバスに戻します：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="green";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}

自分で試してみる

文法

context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

パラメータの値

パラメータ 説明
imgData キャンバスに戻す ImageData オブジェクトを指定。
x ImageData オブジェクトの左上隅の x 座標、ピクセル単位。
y ImageData オブジェクトの左上隅の y 座標、ピクセル単位。
dirtyX オプション。水平方向の値（x）、ピクセル単位で、キャンバス上に画像を配置する位置。
dirtyY オプション。水平方向の値（y）、ピクセル単位で、キャンバス上に画像を配置する位置。
dirtyWidth オプション。キャンバス上に画像を描画するために使用される幅。
dirtyHeight オプション。キャンバス上に画像を描画するために使用される高さ。

ブラウザのサポート

この表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

注記：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

Canvas リファレンスマニュアル