キャンバスImageData白いピクセルを削除する

Question

私は白い背景を持つhtmlでいくつかの画像を持っています。私は白い背景を削除する必要があります。私はすべての白いピクセルを透明にすることができると考えていましたが、それを行う方法はわかりません。私はhtml/javascriptを使いたいだけです。

Answer 1

はそれを行う方法..です

function white2transparent(img) 
{ 
    var c = document.createElement('canvas'); 

    var w = img.width, h = img.height; 

    c.width = w; 
    c.height = h; 

    var ctx = c.getContext('2d'); 

    ctx.drawImage(img, 0, 0, w, h); 
    var imageData = ctx.getImageData(0,0, w, h); 
    var pixel = imageData.data; 

    var r=0, g=1, b=2,a=3; 
    for (var p = 0; p<pixel.length; p+=4) 
    { 
     if (
      pixel[p+r] == 255 && 
      pixel[p+g] == 255 && 
      pixel[p+b] == 255) // if white then change alpha to 0 
     {pixel[p+a] = 0;} 
    } 

    ctx.putImageData(imageData,0,0); 

    return c.toDataURL('image/png'); 
} 

とそれを使用するには、このメソッドの戻り値に画像のsrcを設定します。

---

このコードが動作するために

http://jsfiddle.net/gaby/UuCys/

var someimage = document.getElementById('imageid'); 
someimage.src = white2transparent(someimage); 

は、画像は、（セキュリティ上の理由 ）コードと同じドメインから来なければなりません。

Answer 2

「getImageData」を使用してキャンバスオブジェクトから返される画像データは、RGBAピクセル情報（赤、緑、青、アルファ透明度）だけです。したがって、画像データを取得して、一度に4つのピクセルを調べるだけで繰り返し処理できます。白いものが見えるときは、それをゼロにすることができます（アルファ値とともに）。

ここでは、まだ白以外の要素の周囲に「ハロー」が残っているため、結果に満足できません。元の画像は、色のついた領域のエッジで（おそらく）わずかにぼかされ、効果的にアンチエイリアス処理されます。したがって、メイン画像よりも少し明るいエッジに沿ったピクセルがあります。純粋な白いピクセルをすべて削除した後もそのピクセルが表示されます。

エッジを実際にクリーンアップするには、どのような種類のソース画像を使用するのかに応じて、かなりトリッキーです。私はそれが最先端の画像処理や何かではないと思っていますが、それは自明ではありません。ここで

Answer 3

JPGを使用する代わりに、画像の周囲に透明な背景を持つPNGを使用します。あなたはより良い結果を得るでしょう。

Answer 4

しかし、あなたがしたい場合は、単に短いソリューションがある描画する前に画像データをクリア:)

function clearData(imageData ) 
{ 
    var d = imageData.data; 
    var L = d.length; 
    for (var i = 3; i < L; i += 4) 
    { 
     d[i] = 0; 
    } 
}