我有一些圖像在html中有白色背景。我需要刪除白色背景。我在想,我可以使所有的白色像素透明,但我不知道該怎麼做。我只想使用html/javascript。canvas ImageData刪除白色像素
6
A
回答
13
這裏是如何做到這一點..
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/
對於此代碼工作,圖像必須來自同一個域(出於安全原因)來作爲代碼。
0
那麼您從「getImageData」中從畫布對象獲取的圖像數據就是RGBA像素信息 - 即紅色,綠色,藍色和Alpha透明度。因此,您可以獲取圖像數據並一次遍歷四個像素。當你看到一個白色的,你可以把它歸零(和alpha值一起)。
現在事情是,你不會對結果滿意,因爲圍繞非白色元素仍然會有一個「光環」。原始圖像(有可能)在有色區域的邊緣處有點模糊,有效地消除鋸齒。因此,沿着邊緣的像素比主要圖像稍亮一些,並且在移除所有純白色圖像之後仍會看到這些像素。
要真正清理邊緣是非常棘手的,具體取決於你得到的是什麼樣的源圖像。我不認爲這是最前沿的圖像處理或任何其他,但它並不是微不足道的。
1
代替使用JPG,請在圖像周圍使用帶有透明背景的PNG。你會有更好的結果。
0
但是,如果你在畫之前只想清楚的imageData有一個較短的解決方案:)
function clearData(imageData )
{
var d = imageData.data;
var L = d.length;
for (var i = 3; i < L; i += 4)
{
d[i] = 0;
}
}
相關問題
- 1. 畫布刪除圖像中的白色像素
- 2. 從圖像中刪除白色背景
- 3. 從圖像中刪除白色背景
- 4. 刪除白色背景圖像css
- 5. 如何編輯像素並在html5和javascript中刪除canvas圖像中的白色背景
- 6. 從位圖中移除白色像素
- 7. 刪除png中的白色像素(alpha通道)
- 8. JavaScript Canvas白色屏幕
- 9. Java Canvas白色邊緣
- 10. WebBrowser.DrawToBitmap留下白色像素
- 11. Android canvas改變一些像素顏色
- 12. Android Canvas從白色過渡到紅色
- 13. Python:灰度圖像:使一切變白,除了黑色像素
- 14. 如何更改白色像素爲黑色像素
- 15. 從React中的canvas context.getImageData渲染ImageData
- 16. HTML5 Canvas ImageData不正確的rgb值
- 17. 保持對javascript canvas的引用imageData
- 18. HTML5 Canvas ImageData分配行爲怪異
- 19. 畫布imagedata多個像素插入
- 20. 刪除白色邊框並設置最終圖像尺寸matplotlib
- 21. 無法刪除英雄圖像底部的白色條紋
- 22. 如何刪除此PNG圖像的白色背景?
- 23. 從圖像C中刪除白色邊緣#
- 24. 如何從圖像中刪除白色邊框
- 25. 面料js或imagick從圖像中刪除白色
- 26. 刪除PNG圖像周圍的白色方塊
- 27. 如何刪除圖像的白色背景 - java
- 28. 刪除閃光燈中圖像上的白色背景
- 29. RMagick從圖像中刪除白色背景並使其透明
- 30. 如何刪除白色的空間?