Javascriptでcanvas上の画像の指定色を透過させる | 極めて冴えない普通人の気まぐれブログ

こんばんは。きわさです。

今回は、Javascriptで画像の指定した色を透過させる方法です。

function test(r, g, b) {
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext("2d");
    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    for(var i = 0; i < (imageData.width*imageData.height); i++) {
        if((imageData.data[i*4] == r) &&
           (imageData.data[i*4+1] == g) &&
           (imageData.data[i*4+2] == b)) {
            imageData.data[i*4+3] = 0;
        }
    }
    context.putImageData(imageData, 0, 0);
    return;
}

この関数 test で何をしているかと言うと、
まず引数のr, g, bはRGBによる色指定で、例えば黄色の場合はr=255, g=255, b=0といった感じです。

次にimageDataです。getImageData(x, y, w, h)はx, yの位置から幅w、高さhの画像データを取得します。
すると、imageData.width, imageData.heightにはそれぞれw, hが格納され、imageData.dataにはw*h*4の配列が格納されます。
4というのはrgbaのことです。300 x 300の画像の場合は、imageData.data.lengthは300*300*4=360000となり、データは
imageData.data[0] : 画像(0, 0)位置のrの値
imageData.data[1] : 画像(0, 0)位置のgの値
imageData.data[2] : 画像(0, 0)位置のbの値
imageData.data[3] : 画像(0, 0)位置のaの値
imageData.data[4] : 画像(1, 0)位置のrの値
…
といった感じになります。
aは透明度で0(透明)～255(不透明)です。

あとは幅x高さの分だけループさせ、dataの[i*4], [i*4+1], [i*4+2]がそれぞれr, g, bと一致する場合は指定色と判断し、[i*4+3]の透明度に0(透明)を設定しています。
最後にputImageData(imageData, x, y)でimageDataをx, yの位置に出力しています。

サンプルを置いておきます。
RGB値をテキストボックスに直接入力するか、画像をクリックして自動入力し、
透過ボタンを押すと、指定した色の箇所を透過させます。canvasの背景は黒にしています。
完了ボタンを押すと右クリックで保存可能な透過PNGに変換します。

R: ±
G: ±
B: ±

画像編集ソフト等を使わずにJavascriptのみで透過画像が作れると色々便利ですね。

コメントを残す