Canvasシリーズのフィルターエフェクト

Canvas は本当に魔法のようなもので、さまざまなグラフィック、テキスト、ビットマップを描画できるだけでなく、ビットマップ上で複雑なピクセル操作や処理を実行することもできます。したがって、フィルタなどは実際に Canvas を使用して実装できます。次に、奇跡を目撃する時が来ました。

まず、Canvas コンテナーが必要です。次に例を示します。

 <canvas id=myCanvas width=800 height=800></canvas>

次に、Canvas を使用して画像を描画する必要があります。

 var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// 独自の画像リンクを準備します img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//最初の 800 は描画された絵の幅を表し、次の 800 は描画された絵の高さを表します}

Canvasの最初の描画の効果

次のステップでは、画像のピクセルに対していくつかの操作を実行します。このような操作を実装するには、まず Canvas から画像のピクセル情報を取得する必要があります。この情報の取得はgetImageData()によって実現できます。

 // ... 前のコードを省略 img.onload = (e) => {// ... 前のコードを省略 img = ctx.getImageData(0, 0, 800, 800) // それぞれの色を取得ピクセルバイトデータ}

画像のサイズは 800 * 800 であるため、各ピクセルの赤、緑、青の値を取得するにはピクセルを走査する必要があります。したがって：

 // ... 前のコードを省略 img.onload = (e) => {// ... 前のコードを省略 varxelLen = 800 * 800 // ピクセル数を取得 for(var i = 0; i <PixelLen * 4; i += 4) { var redC = img.data[i], // 最初のバイト単位は赤を表します greenC = img.data[i + 1], // 2 番目のバイト単位は緑 blueC を表します= img.data[i + 2], // 3 番目のバイト単位は青のアルファを表します = img.data[i + 3] // 4 番目のバイト単位は透明度を表します}}

上記のループを通じて、画像データに含まれる各ピクセルの特定の色の値を取得します。注意すべき点は、各ピクセルのデータは 1 ビットではなく、隣接する 4 ビットであり、それぞれ赤、緑、緑を表します。ポイントの青、および透明度の値。したがって、実際には、ビットマップ バイト データの配列長は、ピクセル数の 4 倍に等しくなります。for ループでは、この機能もそれに応じて処理します。

各ポイントの赤、緑、青の値を平均し、生成された平均値をピクセルの赤、緑、青の値に割り当てることで、最後に、 putImageData()メソッドを使用して画像を再描画するだけです。コードは次のとおりです。

 // ... 前のコードを省略 img.onload = (e) => { // ... 前のコードを省略 for(var i = 0; i <xelLen * 4; i += 4) { // . .. 前のコードは省略します。 var grey = parseInt((redC + greenC + blueC) / 3); // 平均後の灰色の値を取得します img.data[i] = grey; // 赤色の値を変更します。 +1] = grey; // 緑の値を変更します img.data[i + 2] = grey; // 青の値を変更します } ctx.putImageData(img, 0, 0, 800, 800); // 画像を再描画します

このとき、以下に示すように、グレースケール効果が形成されます。

Canvas が 2 回目の画像を描画します - グレースケール効果

透明度を制御するには、4 番目のバイト単位に対応する値を変更するだけで済みます。値の範囲は 0 ～ 256 で、0 は完全な透明度を表し、256 は完全な不透明度を表します。例えば：

 // ... 前のコードを省略 img.onload = (e) => { // ... 前のコードを省略 for(var i = 0; i <xelLen * 4; i += 4) { // . .. 前のコードを省略 img.data[i + 3] = 128; // 透明度 50% } // ... 前のコードを省略 }

キャンバスの 3 番目の描画効果 - 透明度を高める

このように、画像内の各ピクセルごとに 4 つのデータの値を制御することで、フィルターの効果を得ることができます。

参考文献:

『HTML5の基礎知識とコア技術と最先端事例』Liu Huan編著

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。