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

HTML タグ完全ガイド

HTML canvas putImageData() メソッド

putImageData() は Canvas 2D API は、既存の ImageData オブジェクトからドットマップにデータを描画する方法です。描画された矩形が提供された場合、その矩形のピクセルのみを描画します。このメソッドはキャンバスの変換マトリックスに影響されません。

HTML canvas 参考マニュアル

オンラインサンプル

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

サンプル

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas getImageData()メソッドの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
あなたのブラウザは HTML5　canvas タグ。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d);
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
　　　　var imgData=ctx.getImageData(10,10,50,50);
　　　　ctx.putImageData(imgData,10,70);
}
</script>
<button onclick="copy()">コピー</button>
</body>
</html>

テストを見てみましょう ‹/›

ブラウザの互換性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は putImageData() メソッドをサポートしています。

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

定義と用法

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

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

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

JavaScript 语法

JavaScript 语法：	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);

パラメータの値

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

　HTML canvas 参考マニュアル

HTML: <template> タグ