CanvasでPNGの透過を利用してシルエット画像を作る

Canvasでは描画した画像を操作することで、様々な処理を行うことができます。

その中でも、PNGの不透明度(アルファチャンネル)を利用した、シルエット画像の作成方法について考えてみました。

↓作ってみたもの
DEMO

方法

CanvasをHTMLに準備
CanvasにPNG画像を読み込む
Canvasの画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)
操作した画像データをCanvasに描画

1. CanvasをHTMLに準備


&lt;canvas id="canvas" width="320" height="320"&gt;&lt;/canvas&gt;

1	<canvas id="canvas" width="320" height="320"></canvas>

2. CanvasにPNG画像を読み込む


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に読み込んだ画像を表示

    ・・・
}

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の画像データを操作(不透明度(アルファチャンネル)以外を一定の値に)


$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 &lt; $silhouetteData.length; i += 4){
	$silhouetteData[i] = 109; //Rチャンネル
	$silhouetteData[i + 1] = 181; //Gチャンネル
    	$silhouetteData[i + 2] = 229; //Bチャンネル
        //不透明度以外を一定の値に変更
    }
    …
}

$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に描画


    //シルエット画像をCanvasに表示
    $silhouetteImageData.data.set($silhouetteData);
    $ctx.putImageData($silhouetteImageData,0,0);
}

//シルエット画像をCanvasに表示

$silhouetteImageData.data.set($silhouetteData);

$ctx.putImageData($silhouetteImageData,0,0);

}

DEMO

アルファチャンネルの振り分けを以下のように設定すれば、
半透明の画像からシルエットを作成することも可能です。


    //シルエット用のdataを作成
    for(var i = 0; i &lt; $silhouetteData.length; i += 4){
        $silhouetteData[i] = 122; //Rチャンネル
        silhouetteData[i + 1] = 192; //Gチャンネル
        $silhouetteData[i + 2] = 105; //Bチャンネル
        if($silhouetteData[i + 3] &gt; 100) //不透明度が100以上の場合は不透明に
            $silhouetteData[i + 3] = 255;
        else //不透明度が100未満の場合は透明に
            $silhouetteData[i + 3] = 0;
        //不透明度以外を一定の値に変更
    }