Canvas (中国語ではキャンバスと訳されます) には、HTML5 に新しい <canvas> 要素があり、JavaScript と組み合わせてキャンバス内にグラフィックスを動的に描画できます。
今日は、Canvas でのグラフィック描画ではなく、画像の処理方法について説明します。
このプロセスはおそらく非常に単純で、主に次の 3 つのステップに分かれています。
そう、象を冷蔵庫に詰め込むのと同じくらい簡単なんです（笑）。
1.メインAPIプロセス全体で使用される主な Canvas API は次のとおりです。
名前が示すように、このメソッドは Canvas キャンバス上に画像を描画するために使用されます。具体的な用途は次の 3 つです。
① キャンバス上に画像を配置します: context.drawImage(img,x,y)
② キャンバス上に画像を配置し、画像の幅と高さを指定します: context.drawImage(img,x,y,width,height)
③ 画像を切り取り、切り取った部分をキャンバス上に配置します: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
上記のパラメータ値については、次の表で説明します。
| パラメータ | 説明する |
|---|---|
| 画像 | 使用する画像、キャンバス、またはビデオを指定します。 |
| SX | オプション。カットを開始する x 座標の位置。 |
| シ | オプション。せん断を開始する y 座標の位置。 |
| 幅 | オプション。トリミングされた画像の幅。 |
| 身長 | オプション。切り取られた画像の高さ。 |
| × | キャンバス上の画像の x 座標位置を配置します。 |
| y | キャンバス上の画像の y 座標位置を配置します。 |
| 幅 | オプション。使用する画像の幅。 (画像を拡大または縮小) |
| 身長 | オプション。使用する画像の高さ。 (画像を拡大または縮小) |
このメソッドは、Canvas キャンバスから画像データを取得するために使用されます。具体的な使用方法は次のとおりです。
キャンバスの指定された長方形範囲内のピクセル データを取得します: var ImageData = context.getImageData(x,y,width,height)
上記のパラメータ値については、次の表で説明します。
| パラメータ | 説明する |
|---|---|
| × | コピーを開始する左上隅の x 座標。 |
| y | コピーを開始する左上隅の y 座標。 |
| 幅 | コピーされる長方形領域の幅。 |
| 身長 | コピーされる長方形領域の高さ。 |
このメソッドは、幅、高さ、データの 3 つのプロパティを持つ ImageData オブジェクトを返します。これは、画像内の各ピクセルのデータを保存するため、主に使用するデータ配列です。これらのデータを取得した後、それらを処理し、最終的に Canvas キャンバスに書き換えることで、画像の加工と変換を実現します。データ配列の具体的な使用法については、次の例で確認できます。
3. putImageData()このメソッドは非常に簡単で、画像データを Canvas キャンバスに書き換えるために使用されます。具体的な使用方法は次のとおりです。
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
上記のパラメータ値については、次の表で説明します。
| パラメータ | 説明する |
|---|---|
| 画像データ | キャンバスに戻す ImageData オブジェクトを指定します。 |
| × | ImageData オブジェクトの左上隅の x 座標 (ピクセル単位)。 |
| y | ImageData オブジェクトの左上隅の y 座標 (ピクセル単位)。 |
| ダーティーX | オプション。キャンバス上の画像を配置する水平方向の値 (x) (ピクセル単位)。 |
| 汚い | オプション。キャンバス上の画像を配置する水平方向の値 (y) (ピクセル単位)。 |
| ダーティ幅 | オプション。キャンバス上に画像を描画するために使用される幅。 |
| 汚れた高さ | オプション。キャンバス上に画像が描画される高さ。 |
このメソッドは、上記の 3 つのメソッドとは異なります。このメソッドは、データ URI を含む文字列を返します。この文字列は、<img の src 属性に入力するために直接使用できます。 >タグの具体的な使い方は以下の通りです。
var dataURL = Canvas.toDataURL(type, encoderOptions);
上記のパラメータ値については、次の表で説明します。
| パラメータ | 説明する |
|---|---|
| タイプ | オプション。画像形式、デフォルトはimage/pngです。 |
| エンコーダオプション | オプション。指定した画像形式がimage/jpegまたはimage/webpの場合、画質を0～1から選択できます。値の範囲を超える場合は、デフォルト値の 0.92 が使用されます。他のパラメータは無視されます。 |
この例では、コードを通じてカラー画像を白黒画像に処理する方法を簡単に紹介します。
<!--HTML--><canvas id=canvas width=600 height=600></canvas><input id=handle type=button value=画像の処理/><input id=create type=button value=画像の生成/><div id=result></div>
//JavaScriptwindow.onload = function(){ var Canvas = document.getElementById(canvas), //Canvas キャンバス オブジェクトを取得します context = Canvas.getContext('2d'); //2D コンテキスト オブジェクトを取得します。ほとんどの Canvas API はこのオブジェクトのメソッド var image = new Image(); //画像オブジェクトを定義します image.src = 'imgs/img.jpg'; image.onload = function(){ //ここに注意してください。後続の操作はすべて、画像が正常に読み込まれた後に実行する必要があります。そうでない場合、画像は無効に処理されます。 context.drawImage(image,0,0) // キャンバスの左上隅 (0,0) から画像の描画を開始します。 Canvas のデフォルト サイズは画像の実際のサイズです。 var handle = document.getElementById(handle); var create = document.getElementById(create); // 画像処理ボタンをクリックして画像を処理します。 var imgData = context.getImageData(0,0,canvas.width,canvas.height); //画像データ オブジェクトを取得します。 var data = imgData.data; //配列内の各ピクセルは 4 つの要素で保存されます。それぞれ赤、緑、青、透明度の値を表します。 var Average = 0 for (var i = 0; i < data.length; i+=4) { Average = Math.floor((data[i]+data[i+1]+data[i+2])/3) //赤、緑、青の値を平均してグレースケール値を取得します data[i] = data[i+1] = data[i+2] = 平均; 各ピクセルのカラー値を書き換えます} imgData.data = data; // 加工した画像データを Canvas キャンバスに書き換えると、キャンバス内の画像が白黒になります }; create.onclick = function(){ // 画像生成ボタンをクリックして画像をエクスポートします var imgSrc = Canvas.toDataURL( ); // 画像の DataURL を取得します var newImg = new Image() var result = document.getElementById(result); // 画像のパスを src に割り当てます。結果.innerHTML = '';おそらく、上記のコードはあまりよく書かれておらず、理解するのが簡単ではないようです。より深く理解するには、自分で書いてみるのが最善です。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。