Canvasで画像の白を透過にする
前回、Canvasで、
PNG画像の透過(アルファチャンネル)からシルエットを作成する方法を考えてみましたが、
今回は、投下していないJPGなどの画像で、
白い部分を透過させる方法について考えてみました。
↓作ってみたもの
DEMO
方法
今回はCanvasに画像を読み込み、
各ピクセルの暗さを透過度(アルファチャンネル)に反映する方法を使いました。
|
1 | <canvas id="canvas" width="320" height="320"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | var $canvas = document.getElementById("canvas"), //Canvas要素の取得 $ctx = $canvas.getContext("2d"), //canvasのコンテキストの設定 $img = new Image(); //イメージオブジェクトの呼び出し $img.src = "images/bird.jpg"; //イメージオブジェクトに画像を読み込み $img.onload = function() { $ctx.drawImage($img, 0, 0); //Canvasに読み込んだ画像を表示 var $originalImageData = $ctx.getImageData(0, 0, 320, 320), //オリジナルの画像DATAを確保 $transmittedImageData = $ctx.getImageData(0, 0, 320, 320), //透過用の画像DATAを確保 $originalData = $originalImageData.data, //オリジナルのdataを保存する場所 $transmittedData = $transmittedImageData.data, //透過用のdataを保存する場所 isClicked = false; //クリックのトグルのためのフラグを準備 //透過用のdataを作成 for(var i = 0; i < $transmittedData.length; i += 4){ //各カラーチャンネルで、一番暗い値を取得 var minLuminance = 255; if($transmittedData[i] < minLuminance) minLuminance = $transmittedData[i]; if($transmittedData[i + 1] < minLuminance) minLuminance = $transmittedData[i + 1]; if($transmittedData[i + 2] < minLuminance) minLuminance = $transmittedData[i + 2]; //一番暗い値を、アルファチャンネルに反映(明るいところほど透明に) $transmittedData[i + 3] = 255 - minLuminance; } //クリックしたときに、トグルでオリジナル画像と透過画像を切り替え $canvas.addEventListener("click", function() { if(isClicked) { //オリジナル画像をCanvasに表示 $originalImageData.data.set($originalData); $ctx.putImageData($originalImageData,0,0); isClicked = false; } else { //透過画像をCanvasに表示 $transmittedImageData.data.set($transmittedData); $ctx.putImageData($transmittedImageData,0,0); isClicked = true; } }); } |
JavaScriptのおおまかな流れは、
- Canvasを準備して、画像ファイルをCanvasに読み込む
- getImageData()で読み込んだ画像のピクセルデータを取得
- 各ピクセルのカラー情報を分析して、RGBの一番くらい値を不透明度としてアルファチャンネルに反映
となっています。
ただ、DEMOを見ていただけるとわかると思いますが、
元の画像と透過させた画像を比べると、若干もとより薄い感じになってしまいました。
もっと正確な透過の方法が見つかったら、またご紹介したいと思います。
Author Profile
SHARE
