HTML5 Canvas 使黑色透明

我有大量黑色背景的图像，例如：

是否有可能通过Javascript忽略黑色（#000000）并将其绘制在画布上？出现这样的情况？

基本上是尝试获取黑色像素并使其成为 Alpha 通道。

因此，您需要遍历所有像素并更改所有黑色像素的 alpha 值。

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

此代码创建一个缓冲区（空画布）来绘制原始图像。完成后，它将获取此缓冲区画布的所有像素，然后迭代所有像素并检查它们的值。我将红色、蓝色和绿色值相加，看看它们是否小于 10（只是以防某些像素不是纯黑色 0），但在人眼看来会呈现黑色。如果它小于 10，它只会将该像素的 alpha 值变为 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){ to if(data[i]+ data[i+1] + data[i+2]==0){如果你知道事实，只使用#000 黑人。