使用JS将图像的特定背景颜色设置为透明答案

【问题标题】：Set specific background color of image to transparent using JS使用JS将图像的特定背景颜色设置为透明
【发布时间】：2012-07-05 07:16:51
【问题描述】：

我正在使用以下代码来修改图像的透明度。然而，我想做的只是修改图像的背景颜色并将其 alpha 通道设置为 0 而不是整个图像。

以下代码将整个图像的 alpha 透明度设置为 0：

var ctx = this.data.getContext("2d");
var imgData = ctx.getImageData(0, 0, this.data.width, this.data.height);
ctx.putImageData(this.adjustImage(imgData), 0, 0);

adjustImage: function(iArray) {
    var imageData = iArray.data;
    for (var i = 0; i < imageData.length; i+= 4) {
        imageData[i+3] = 0;
    }

    return iArray;            
}

我正在寻求一些帮助，将图像中的一种颜色 rgb(255,0,255) 修改为透明。

【问题讨论】：

您可以获取特定像素的颜色，例如var imgd = ctx.getImageData(x, y, 1, 1); var data = imgd.data; var out = $('#result'); var hexString = RGBtoHex(data[0],data[1],data[2]);，然后您可以检查颜色是否与所需值匹配并设置alpha

标签： javascript

【解决方案1】：

还没有真正测试过，但这应该可以工作

var ctx = this.data.getContext("2d");
var imgData = ctx.getImageData(0, 0, this.data.width, this.data.height);
ctx.putImageData(this.adjustImage(imgData), 0, 0);

adjustImage: function(iArray) {
    var imageData = iArray.data;
    for (var i = 0; i < imageData.length; i+= 4) {
        if(imageData[i] === 255 && imageData[i+1] === 0 && imageData[i+2] === 255){
            imageData[i+3] = 0;
        }
    }

    return iArray;            
}

【讨论】：