HTML5画布制作黑色透明的
问题描述:
我有一个黑色的背景上的大量图像,下面是一个例子:HTML5画布制作黑色透明的
是否有可能通过JavaScript不得不忽略黑色(#000000)并让它画在画布上?看起来像这样?
基本上试图采取黑色像素,并使其alpha通道。
答
所以你需要通过所有像素运行,并改变所有的黑色像素的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黑人被使用。
答
您可以使用混合模式来完成该操作。
将上下文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"/>
答
如何将图片另存为.svg文件...从那里您可以更改所有颜色和其他设置
不是我所知道的。但是,您可以使用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