BinaryDevelop
  1. ホーム
  2. Web制作
  3. html5

Canvasシリーズのフィルター効果

2022-01-31 16:41:04

キャンバスは本当にすごいもので、あらゆるグラフィックやテキスト、ビットマップを描けるだけでなく、ビットマップに対して複雑なピクセル操作や加工をすることができます。ですから、フィルタのようなことも、実は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"; // Self-provided image link
img.onload = (e) => {
	ctx.drawImage(img, 0, 0, 800, 800); // the first 800 means draw the width of the image, the second 800 means draw the height of the image
}

キャンバスの最初の描画の効果

次のステップは、画像のピクセルを使って何かをすることです。これを行うには、まず画像のピクセル情報をCanvasから取得する必要があり、この情報は getImageData() を使用して行います。 

// ... Omitting the previous code
img.onload = (e) => {
	// ... Omitting the previous code
    img = ctx.getImageData(0, 0, 800, 800); // Get the byte data containing the color of each pixel
}

各ピクセルポイントの赤、緑、青の値を取得するためにピクセルポイントをトラバースするため、画像のサイズは800 * 800となります。したがって 

// ... Omitting the previous code
img.onload = (e) => {
	// ... Omit the preceding code
    var pixelLen = 800 * 800; // Get the number of pixels
    for(var i = 0; i < pixelLen * 4; i += 4) {
        var redC = img.data[i], // the first byte unit represents the red color
            greenC = img.data[i + 1], // the second byte unit represents green
            blueC = img.data[i + 2], // the third byte unit represents blue
            alpha = img.data[i + 3]; // the fourth byte unit represents transparency
    }
}

このループで、画像データに含まれる各ピクセル点の具体的な色値が得られます。注意すべき点は、各ピクセル点のデータは1ビットではなく、隣接する4ビットで、その点の赤、緑、青、透明の値を表していることです。つまり、ビットマップバイトデータの配列長は、ピクセル数×4となり、forループの中で適宜処理されることになります。

グレースケール効果は、各ポイントの赤、緑、青の値を平均化し、その結果の平均値をそのピクセルポイントの赤、緑、青の値に同じように代入し、最終的に putImageData() メソッドを用いて、画像を再描画します。 

// ... Omitting the previous code
img.onload = (e) => {
	// ... Omit the preceding code
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... Omit the preceding code
        var grey = parseInt((redC + greenC + blueC) / 3); // get the grey value after averaging
        img.data[i] = grey; // change the red value
        img.data[i + 1] = grey; // change the green value
        img.data[i + 2] = grey; // change the blue value
    }

    ctx.putImageData(img, 0, 0, 800, 800); // redraw the image
}

このとき、次のようにグレースケールの効果が生まれます。

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

透明度の制御は、4バイト目に相当する値を変更するだけで可能で、0～256の範囲があり、0は完全な透明度、256は完全な不透明度を表します。例 

// ... Omitting the previous code
img.onload = (e) => {
	// ... Omit the preceding code
    for(var i = 0; i < pixelLen * 4; i += 4) {
   		// ... Omit the preceding code
        img.data[i + 3] = 128; // 50% transparency
    }
    // ... Omit the previous code
}

キャンバスの3つ目の描画効果 - 透明度を上げる

その結果、画像の1ピクセルあたり4つのデータの値をコントロールすることで、フィルター効果を得ることができるのです。とても簡単ですね。

参考にしてください。

は、その HTML5の基本、コア技術、最先端事例を紹介

リュウ・ファン著

上記はこの記事の内容です、あなたが学ぶのを助け、あなたがより多くのスクリプトホームをサポートすることを願っています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します