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画布制作黑色透明的

回答

相关问题