HTML5画布使黑色透明

Question

我有大量的黑色背景图像,例如:

是否可以通过Javascript忽略黑色(#000000)并在画布上绘制？看起来像这样？

基本上尝试采用黑色像素并使其成为alpha通道.

Answer 1

因此,您需要遍历所有像素并更改所有黑色像素的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){为if(data[i]+ data[i+1] + data[i+2]==0){如果您知道仅使用#000黑色的事实.