HTML5キャンバスピクセル処理を使用するためのインターフェイスの紹介

コンテンツの概要：この記事は、単純なコードの例とわずかにわいせつな画像デモを介した画像ピクセルデータ操作のキャンバスの共通インターフェイスを示しています。これらのインターフェイスを使用してより複雑な効果を実現する方法については、後続の章で引き続き議論されます。

1。キャンバス画像塗りつぶし。 2. Canvas画像データの設定/取得。 3.キャンバス画像データを作成します。 4.イメージャタタdataのちょっとした補足。 5。後で書いてください

/**

* @説明

* @param {number} xキャンバスから描画ポイントを開始する画像の左端からの距離

* @param {number} yキャンバスの上部から描画する画像の開始点間の距離

* @param {number}幅キャンバスに描かれた最終画像の幅

* @param {number}高さキャンバスに描かれた最終画像の高さ

*/

Context.drawimage（画像、x、y、幅、高さ）

DEMO_01は次のとおりです。

<canvas id = draw_image_canvas style = background：#ccc;> </canvas>

function $（id）{return document.getElementById（ID）; }

関数getImage（url、callback）{

var img = document.createelement（ 'img'）;

img.onload = function（）{

callback && callback（this）;

};

img.src = url;

document.body.AppendChild（IMG）;

}

関数drawimage（）{

var url = 'xiangjishi.png';

var canvas = $（ 'draw_image_canvas'）;

var context = canvas.getContext（ '2d'）;

getImage（url、function（img）{

canvas.width = img.width;

canvas.height = img.height;

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/4;

var drawheight = img.height/4;

context.drawimage（img、offsetx、offsety、drawwidth、drawheight）;

}）;

}

drawimage（）;

デモの説明：Xiangjishi.pngをロードします。読み込み後、キャンバスの左上隅に比べて座標（0、0）から始まるキャンバスにXiangjishi.pngを描きます。効果は次のとおりです。

これを見ると、コンテキストの4つのパラメーターの意味を理解できない場合があります。drawimage（画像、x、y、幅、高さ）。いくつかのパラメーターを単に変更して、効果を確認できます。

var offsetx = 20;

var offsety = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

context.drawimage（img、offsetx、offsety、drawwidth、drawheight）;

変更されたデモ効果は次のとおりです。上記のAPI説明と組み合わせることで、4つのパラメーターの意味を理解することは難しくないはずです。

Context.drawimage（画像、x、y、幅、高さ）

/**

* @descriptionキャンバスの特定の領域のピクセル情報を取得する

* @param {number} x情報の左端からの距離をキャンバスから取得するための距離

* @param {number} y情報のためにキャンバスの上部からの開始距離

* @param {number} width widthが取得した

* @param {number} height final height

*/

context.getimagedata（x、y、幅、高さ）

このメソッドは、3つの主要なプロパティを備えたImagedataオブジェクトを返します。

Imagedata.Width：行ごとにいくつの要素があるか

Imagedata.height：列ごとにいくつの要素があるか

Imagedata.Data：キャンバスから取得した各ピクセルのRGBA値を保存する1次元配列。この配列は、各ピクセルの4つの値（赤、緑、青、およびアルファの透明性）を保存します。各値は0〜255です。したがって、キャンバス上の各ピクセルは、この配列の4つの整数値になります。配列の充填順序は、左から右へ、上から下までです。

/**

* @description特定のイマゲタタを使用して特定の領域のピクセル情報を設定します

* @param {number} x X Point of Canvasから設定を開始します

* @param {number} yキャンバスのy点から設定を開始します

* @param {number} width widthが取得した

* @param {number} height final height

*/

Context.putimagedata（Imagedata、x、y）

以下は、demo_2を組み合わせて、getimagedata（）の使用と各パラメーターの対応する意味を説明するためです

DEMO_02のソースコードは次のとおりであり、DEMO_01に基づいてわずかに変更されています。

<canvas id = "draw_image_canvas" style = "background：#cc;"> </canvas>

<canvas id = "get_image_canvas" style = "background：#cc;"> </canvas>

function getandsetimagedata（）{

var url = 'xiangjishi.png';

getImage（url、function（img）{

$（ 'draw_image_canvas'）。width = img.width;

$（ 'draw_image_canvas'）。height = img.height;

var context = $（ 'draw_image_canvas'）。getContext（ '2d'）;

context.drawimage（img、0、0、img.width、img.height）;

//ピクセル情報を取得します

var offsetx = img.width/2;

var offsety = img.height/2;

var getimgWidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata（offsetx、offsety、getimgwidth、getimgheight）;

//ピクセル情報を設定し、ここで特定のコードを無視して、上記のピクセル情報が別のキャンバスにそのまま配置されていることを知ってください

var startx = 0;

var starty = 0;

var ct = $（ 'get_image_canvas'）。getContext（ '2d'）;

$（ 'get_image_canvas'）。width = img.width;

$（ 'get_image_canvas'）。height = img.height;

ct.putimagedata（imgagedata、startx、starty）;

}）;

}

この時点で、getimagedataメソッドの4つのパラメーターに対応する意味を基本的にクリアできます。 Putimagedataパラメーターを理解することは難しくありません。 DEMO_2のコードをわずかに変更した後、効果を見た後にそれを知ることができます。

function getandsetimagedata（）{

var url = 'xiangjishi.png';

getImage（url、function（img）{

$（ 'draw_image_canvas'）。width = img.width;

$（ 'draw_image_canvas'）。height = img.height;

var context = $（ 'draw_image_canvas'）。getContext（ '2d'）;

context.drawimage（img、0、0、img.width、img.height）;

//ピクセル情報を取得します

var offsetx = img.width/2;

var offsety = img.height/2;

var getimgWidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getimagedata（offsetx、offsety、getimgwidth、getimgheight）;

//ピクセル情報を設定します

var startx = img.width/2; //これは元々0でした

var starty = img.width/2; //これは元々0でした

var ct = $（ 'get_image_canvas'）。getContext（ '2d'）;

$（ 'get_image_canvas'）。width = img.width;

$（ 'get_image_canvas'）。height = img.height;

ct.putimagedata（imgagedata、startx、starty）;

}）;

}

DEMO_3ディスプレイ効果は次のとおりですが、自分でいくつかのパラメーターを変更しようとすると、よりよく理解できる場合があります。

/**

* @descriptionの画像データのセットを事前に作成し、Canvasオブジェクトにバインドします

* @param {number}幅幅によって作成された幅

* @param {number}高さの高さ

*/

Context.CreateImagedata（幅、高さ）

インターフェイスは比較的単純で、作成されたデータはGetImagedATAで取得したデータと同じように処理できます。ここでのみ、この一連の画像データがキャンバスの現在の状態を必ずしも反映しているわけではないことに注意する必要があります。

さらに、「HTML5 Advanced Programming」および多くの記事では、Imagedata.dataは配列と見なされていますが、実際には：

Imagedata.dataは、実際の配列ではなく、Imagedata.dataの種類を印刷できるクラス配列のオブジェクトを返します。

console.log（object.prototype.tostring.call（imgagedata.data））; //出力：[ObjectUint8ClampedArray]

次に、Imagedata.dataの特定の内容を印刷します。コンテンツは長いです。最初と最後の段落のみを見ることができます：

Imagedata.dataは、実際にはインデックスが0から始まり、幅*高さ*4-1に終わるオブジェクトです。

アレイに直接保存してみませんか？アレイの長さには上限があるため、制限長であると仮定すると、制限長を超える要素はキー値に保存されます。たとえば、データ[LimitLength + 100]は実際にはデータ['LimitLength + 100 +' ']です（LimitLengthの特定の値を覚えていません。興味がある場合は、チェックアウトできます）

ByteLength、ByteOffset、およびバッファープロパティについては、詳細に調査しておらず、誤解を招く読者を防ぐためにここで拡張しません。

限られたレベル、エラーがあるかどうかを指摘してください