canvas 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這個方法的返回值。

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

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

---

對於此代碼工作，圖像必須來自同一個域（出於安全原因）來作爲代碼。

Answer 2

那麼您從「getImageData」中從畫布對象獲取的圖像數據就是RGBA像素信息 - 即紅色，綠色，藍色和Alpha透明度。因此，您可以獲取圖像數據並一次遍歷四個像素。當你看到一個白色的，你可以把它歸零（和alpha值一起）。

現在事情是，你不會對結果滿意，因爲圍繞非白色元素仍然會有一個「光環」。原始圖像（有可能）在有色區域的邊緣處有點模糊，有效地消除鋸齒。因此，沿着邊緣的像素比主要圖像稍亮一些，並且在移除所有純白色圖像之後仍會看到這些像素。

要真正清理邊緣是非常棘手的，具體取決於你得到的是什麼樣的源圖像。我不認爲這是最前沿的圖像處理或任何其他，但它並不是微不足道的。

Answer 3

代替使用JPG，請在圖像周圍使用帶有透明背景的PNG。你會有更好的結果。

Answer 4

但是，如果你在畫之前只想清楚的imageData有一個較短的解決方案:)

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