HTML5 Canvas 使黑色透明

Question

我有大量黑色背景的图片，这里是一个例子：

是否可以通过 Javascript 忽略黑色 (#000000) 并在 canvas 上绘制？出现这样？

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

Answer 1

您可以使用混合模式来实现。

将上下文 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"/>

Answer 2

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

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

此代码创建一个缓冲区（空canvas）来绘制原始图像。完成后，它会获取此缓冲区 canvas 的所有像素，然后遍历所有像素并检查它们的值。我将红色、蓝色和绿色值相加以查看它们是否小于 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(); 
}

如果您知道仅使用 #000 黑色，则可以轻松地将此行 if(data[i]+ data[i + 1] + data[i + 2] < 10){ 更改为 if(data[i]+ data[i+1] + data[i+2]==0){。

Answer 3

如何将图片保存为 .svg 文件...您可以从那里更改所有颜色和其他设置

Answer 4

Felipe 的回答解决了我的问题。 Alpha 像素操作不有效（例如，将每 4 个像素设置为 0）以在同时将多个图像添加到 same 上下文中时保留 alphatransparency。

例如：

this.ctx1.putImageData(output, 0, 0); // without setting the context's globalCompositeOperation, this image is written over by the next putImage operation
this.ctx1.putImageData(output, 20, 0);

到这里查看混合选项。 https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

HTML5 Canvas 使黑色透明

HTML5 Canvas Make Black Transparent

javascript

html

canvas

transparent

alpha