18

画像を読み込んだ場合、そのすべてのピクセルをループして、白いピクセル (または指定した色) を透明にするにはどうすればよいですか?

これを行う方法についてのアイデアはありますが、ループ プロセスは 2 次元配列のようにする必要があるため、2 つの for ループが必要になります。

一番上の行の最初のピクセルから始めて、右に繰り返し、白のピクセルの場合は透明にし、白でない場合は右に1ピクセル移動して停止すると考えていました。次に、同じ行で、一番左のピクセルから始めて、白の場合は透明にしてから、左に 1 ピクセル移動するなどをチェックします。

次に、1行下に移動して、プロセス全体を繰り返します..

このようにして、実際の画像の白いピクセルを削除しません。

4

3 に答える 3

30

使用するのは非常に簡単で、画像が大きくなるほどパフォーマンスが大幅に向上することgetImageDataにputImageData注意してください。現在のピクセルが白かどうかを判断し、そのアルファを 0 に変更するだけです。

ライブデモ

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:0,b:0, a:0};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        // If its white then change it
        if(r == 255 && g == 255 && b == 255){ 
            // Change the white to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
            pix[i+3] = newColor.a;
        }
}

ctx.putImageData(imgd, 0, 0);​

また、値をファジーにして確認できるかどうかも尋ねられました。それは本当に簡単です。特定の範囲内にあるかどうかを確認するだけです。以下は白をオフにして真っ白な透明にします。

 // If its white or close then change it
    if(r >=230 && g >= 230 && b >= 230){ 
        // Change the white to whatever.
        pix[i] = newColor.r;
        pix[i+1] = newColor.g;
        pix[i+2] = newColor.b;
        pix[i+3] = newColor.a;
    }

その他のリソース

于 2012-07-13T14:23:44.027 に答える