CanvasでPNGの透過を利用してシルエット画像を作る
Canvasでは描画した画像を操作することで、様々な処理を行うことができます。
その中でも、PNGの不透明度(アルファチャンネル)を利用した、シルエット画像の作成方法について考えてみました。
↓作ってみたもの
DEMO
方法
- CanvasをHTMLに準備
- CanvasにPNG画像を読み込む
- Canvasの画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)
- 操作した画像データをCanvasに描画
1. CanvasをHTMLに準備
|
1 | <canvas id="canvas" width="320" height="320"></canvas> |
2. CanvasにPNG画像を読み込む
|
1 2 3 4 5 6 7 8 9 | var $canvas = document.getElementById("canvas"), //Canvas要素の取得 $ctx = $canvas.getContext("2d"), //canvasのコンテキストの設定 $img = new Image(); //イメージオブジェクトの呼び出し $img.src = "images/bird.png"; //イメージオブジェクトに画像を読み込み $img.onload = function() { $ctx.drawImage($img, 0, 0); //Canvasに読み込んだ画像を表示 ・・・ } |
3. Canvasの画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 | $img.onload = function() { $ctx.drawImage($img, 0, 0); //Canvasに読み込んだ画像を表示 $silhouetteImageData = $ctx.getImageData(0, 0, 320, 320), //シルエット用の画像DATAを確保 $silhouetteData = $silhouetteImageData.data; //シルエット用のdataを保存する場所 //シルエット用のdataを作成 for(var i = 0; i < $silhouetteData.length; i += 4){ $silhouetteData[i] = 109; //Rチャンネル $silhouetteData[i + 1] = 181; //Gチャンネル $silhouetteData[i + 2] = 229; //Bチャンネル //不透明度以外を一定の値に変更 } … } |
Canvas上のRGBチャンネルの値を一定の値に固定することで、元画像の色の情報をなくし、
不透明度だけを残すことで、シルエットのデータができます。
4. 操作した画像データをCanvasに描画
|
1 2 3 4 | //シルエット画像をCanvasに表示 $silhouetteImageData.data.set($silhouetteData); $ctx.putImageData($silhouetteImageData,0,0); } |
アルファチャンネルの振り分けを以下のように設定すれば、
半透明の画像からシルエットを作成することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 | //シルエット用のdataを作成 for(var i = 0; i < $silhouetteData.length; i += 4){ $silhouetteData[i] = 122; //Rチャンネル silhouetteData[i + 1] = 192; //Gチャンネル $silhouetteData[i + 2] = 105; //Bチャンネル if($silhouetteData[i + 3] > 100) //不透明度が100以上の場合は不透明に $silhouetteData[i + 3] = 255; else //不透明度が100未満の場合は透明に $silhouetteData[i + 3] = 0; //不透明度以外を一定の値に変更 } |
Author Profile
SHARE
