HTML5 Canvas ピクセル処理の概要 インターフェイス_html5 チュートリアル スキル

内容の概要: この記事では、簡単なコード例と少しひどい画像デモを通じて、画像ピクセル データ操作におけるキャンバスの一般的なインターフェイスを示します。これらのインターフェイスを使用してより複雑な効果を実現する方法については、後続の章で引き続き説明します。
1. キャンバス画像データの設定/取得; 4. imageData.data についての追加。
1.画像

コードをコピー

コードは次のとおりです:

/**
* @description
* @param {Number} x 画像の描画開始点とキャンバスの左端との距離
* @param {Number} y 描画開始点間の距離画像とキャンバスの上部
* @param {Number} width キャンバスに描画される最終画像の幅
* @param {Number} height キャンバスに描画される最終画像の高さ
*/
context.drawImage(image, x, y, width, height)

demo_01 は次のとおりです:

コードをコピー

コードは次のとおりです:

function $(id) { return document.getElementById(id) }
function getImage(url, callback){
var img = document.createElement('img'); ;
img.onload = function( ){
callback && callback(this)>};
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;
vardrawWidth = img.width/ 4;
vardrawHeight = img.height/4;
context.drawImage(img, offsetX, offsetY, drawingHeight); >}
drawImage();


デモ手順: xiangjishi.png を読み込みます。読み込みが完了したら、キャンバスの左上隅を基準とした座標 (0, 0) から開始します。


これを見ると、context.drawImage(image, x) の 4 つのパラメータの意味がよくわからないかもしれません。 、y、幅、高さ)、いくつかのパラメータを変更するだけで効果を確認できます:

コードをコピー

コードは次のとおりです: var offsetX = 20; vardrawWidth = img.width/2; ;

context.drawImage(img, offsetX, offsetY,drawWidth,drawHeight);

上記の API の説明と組み合わせると、理解するのは難しくないはずです。 4 つのパラメータの意味

コードをコピー

コードは次のとおりです:

context.drawImage(image, x, y, width, height)

2. キャンバス画像データの取得/設定

コードをコピーします

コードは次のとおりです:

/*** @description キャンバスの特定領域のピクセル情報を取得します* @param {Number} x 情報取得開始点からキャンバス左端までの距離 * @param {Number} y 情報取得の開始点 キャンバス上からの開始距離

* @param {Number} width 取得した幅

* @param {Number} height 最終的な高さ

*/
context .getImageData(x, y, width, height)


このメソッドは、主に 3 つの属性を持つ ImageData オブジェクトを返します。
imageData.width: 各行に含まれる要素の数
imageData.height: 各列に含まれる要素の数
imageData.data: Canvas から取得した各ピクセルの RGBA 値を格納する 1 次元配列。この配列は、ピクセルごとに赤、緑、青、アルファの 4 つの値を保持します。各値は 0 ～ 255 です。したがって、キャンバス上の各ピクセルは、この配列内の 4 つの整数値になります。配列は左から右、上から下に埋められます。

コードをコピーします


コードは次のとおりです:

/**
* @description 特定のimageDataを使用してキャンバスの特定領域のピクセル情報を設定します
* @param {Number} x キャンバスのx点から設定します
* @param {Number} y キャンバスの y 点から
* @param {Number} width 幅を取得
* @param {Number} height 最終的な高さ
*/
context.putImageData(imageData, x, y)

以下では、demo_2 を使用して getImageData() の使用法とそれぞれのパラメータ 対応する意味
DEMO_02 のソース コードは次のとおりで、demo_01 に基づいてわずかに変更されています。

コードをコピー

コードは次のとおりです:

コードをコピー

コードは次のとおりです。

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'); .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(offsetX, offsetY, getImgWidth, getImgHeight);情報はここでは無視してください。特定のコードについては、上記で取得したピクセル情報をそのまま別のキャンバスに配置できることがわかります。
var startY = 0;
var ct = $(' get_image_canvas') .getContext('2d');
$('get_image_canvas').width = img.width;
$('get_image_canvas').height =
ct.putImageData( imageData, startX , startY);
})
}



demo_2 表示効果は次のとおりです

:

この時点で、基本的に 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(offsetX, offsetY, 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; startX, startY);
});
}


demo_3 の表示効果は次のとおりですが、いくつかのパラメーターを自分で変更してみると、よりよく理解できるかもしれません。

3. キャンバス画像データの作成

コードをコピー

コードは次のとおりです。

/*** @description あらかじめ画像データ一式を作成し、キャンバスオブジェクトにバインドします * @param {Number} width 作成した幅 * @param {Number} height 作成した高さ

*/

context.createImageData(width, height)

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

4. imageData に関するいくつかの追加点

「HTML5 高度なプログラミング」や多くの記事では、imageData.data は配列として扱われますが、実際には次のとおりです。

コードをコピー


コードは次のとおりです。

imageData.data は実際の配列ではなく、配列のようなオブジェクトを返します。
console.log(Object) .prototype .toString.call(imgageData.data)); //出力: [object Uint8ClampedArray]

次に、imageData.data の特定の内容を出力します。内容は長く、先頭と部分のみです。上のセクションから、
imageData.data は実際にはオブジェクトであり、そのインデックスは 0 から始まり、width*height*4-1 まで続くことがわかります。

配列に直接格納してはどうでしょうか?配列の長さには上限があるため、limitLength と仮定すると、limitLength を超える要素はキー値の形式で格納されます。たとえば、data[limitLength 100] は実際には data['limitLength 100 ''] になります ( limitLength の特定の値を覚えておいてください。興味のあるお子様はそれを確認してください)
最後の byteLength、byteOffset、およびbuffer 属性については、詳しく研究されていないため、読者の誤解を招くことを防ぐためにここでは展開しません。 。
5. 後ろに書いてください
レベルは限られていますが、間違いがあればご指摘ください