HTML5畫布製作黑色透明的

我有一個黑色的背景上的大量圖像，下面是一個例子：HTML5畫布製作黑色透明的

是否有可能通過JavaScript不得不忽略黑色（＃000000）並讓它畫在畫布上？看起來像這樣？

基本上試圖採取黑色像素，並使其alpha通道。

2016-02-26 Sosa

不是我所知道的。但是，您可以使用ImageMagick將所有圖像轉換爲離線狀態：'convert withblack/x.png -transparent black transparent/x.png' – Amadan

是的。這是可能的。您可以在畫布上加載圖像，然後訪問圖像數據並覆蓋想要變爲alpha的顏色。看到這裏的指導：https://hmp.is.it/creating-chroma-key-effect-html5-canvas/ –

@Amadan謝謝你！我認爲這可能是我最好的方法，因爲我有數百個這樣的小黑BG圖像。客戶端上的密集程度可能較低，只需將它們全部下載爲透明PNG即可。我看到我可以將所有數百個圖像放在一個文件夾中，然後運行'mogrify -transparent black * .png'和瞧！ – Sosa

所以你需要通過所有像素運行，並改變所有的黑色像素的Alpha值。

https://jsfiddle.net/0kuph15a/2/

此代碼創建緩衝液（空白畫布）來繪製的原始圖像。一旦完成，它將獲取此緩衝區畫布的所有像素，然後遍歷所有像素並檢查其值。我將紅色，藍色和綠色的值加起來，看看它們是否小於10（只是說明某些像素不是純黑色0），但是在肉眼看來會呈現黑色。如果是小於10它只是簡單地將那個像素的爲0。

var canvas = document.getElementById('main'); 

var ctx = document.getElementById('main').getContext('2d'); 
var tile = new Image(); 
tile.src = document.getElementById('image').src; 
tile.onload = function() { 
    draw(tile); 
} 

function draw(img) { 
    var buffer = document.createElement('canvas'); 
    var bufferctx = buffer.getContext('2d'); 
    bufferctx.drawImage(img, 0, 0); 
    var imageData = bufferctx.getImageData(0,0,buffer.width, buffer.height); 
    var data = imageData.data; 
    var removeBlack = function() { 
     for (var i = 0; i < data.length; i += 4) { 
      if(data[i]+ data[i + 1] + data[i + 2] < 10){ 
       data[i + 3] = 0; // alpha 
      } 
     } 
     ctx.putImageData(imageData, 0, 0); 
    }; 
removeBlack(); 
}

阿爾法值可以很容易地改變這條線if(data[i]+ data[i + 1] + data[i + 2] < 10){到if(data[i]+ data[i + 1] + data[i + 2] < 0){如果你知道一個事實，僅＃000黑人被使用。

來源

2016-02-26 17:08:12 ericjbasti

使用'getImageData'獲取並使所有黑色像素透明是一個很好的開始。:-)鑽石形狀內可能會有所需的黑色像素，因此您可能會優化您的解決方案，以僅影響鑽石外側的黑色像素。 Fex：從第== 0行開始左上角，col == 0。向右移動並清除所有黑色像素，直到達到非黑色像素。在行== 1，col == 0處重新啓動。向右移動並清除所有黑色像素，直到達到非黑色像素爲止......等等。重複，從四個角落開始。 – markE

這正是我一直在尋找的謝謝！ – Sosa

您可以使用混合模式來完成該操作。

將上下文globalCompositeOperation更改爲screen，您可以獲得該結果。這裏有一個例子：

var canvas = document.getElementById("canvas"); 
 
var context = canvas.getContext("2d"); 
 

 

 
var image = new Image(); 
 
image.src = "https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png"; 
 

 
image.onload = function() { 
 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
 

 
    var blackImage = new Image(); 
 
    blackImage.src="http://www.printmag.com/wp-content/uploads/Sillitoe-black-white.gif"; 
 
    blackImage.onload = function(){ 
 
    context.globalCompositeOperation = "screen"; 
 
    context.drawImage(blackImage, 0, 0, canvas.width, canvas.height); 
 
    } 
 

 
};

<canvas id="canvas" width="300" height="250"></canvas> 
 

 
<hr/> 
 
<h1>Images used:</h1> 
 

 
<img src="https://images.blogthings.com/thecolorfulpatterntest/pattern-4.png"/> 
 

 
<img src="http://www.printmag.com/wp-content/uploads/Sillitoe-black-white.gif"/>

來源

2016-02-26 04:13:16 Filipe

謝謝你的迴應！我在我的主代碼上試過了，但它似乎沒有工作。這是一個例子[jsfiddle]（https://jsfiddle.net/0kuph15a/）。 – Sosa

畫布有黑色背景。 [JSFiddle]（https://jsfiddle.net/0kuph15a/1/） – Filipe

我知道它默認填充黑色，但我想要真正的透明度 – Sosa

如何將圖片另存爲.svg文件...從那裏您可以更改所有顏色和其他設置

來源

2016-02-26 17:14:11 DaudiHell

HTML5畫布製作黑色透明的

回答

相關問題