Javascript 如何在html5画布中创建IE9中非黑色的透明像素

我试图在画布中的另一幅图像上画一幅图像，在第一幅图像中，我试图去除白色像素并使其透明，但它们正在变黑

这是我正在使用的代码，但它看起来不正确。有人看到问题了吗

function draw_graphic(canvas,context,lgo_type,gph_img,rib_type, hl_col,hl_txt,cp_col,cp_txt,in_col,in_txt,img_src,ban_bor) {
    // add the graphic image
    if (gph_img!="") {
        var img3 = new Image();
        img3.src = gph_img;

        img3.onload = function() {

            /*/////////////////////////////////////////*/
            var img6 = new Image();
            img6.src = remove_all_pixels(img3, 255, 255, 255);
            img6.onload = function() {
            /*/////////////////////////////////////////*/
                context.globalCompositeOperation = 'destination-out';
                if (rib_type=="1" || rib_type=="3" || rib_type=="5") {
                    context.drawImage(this,0,0,143,105);
                } else {
                    context.drawImage(this,465,0,143,105);
                }
                context.globalCompositeOperation = 'source-over';

                draw_logo(canvas,context,lgo_type,rib_type, hl_col,hl_txt,cp_col,cp_txt,in_col,in_txt,img_src,ban_bor);
            }
        };
    } else {
        draw_logo(canvas,context,lgo_type,rib_type, hl_col,hl_txt,cp_col,cp_txt,in_col,in_txt,img_src,ban_bor);
    }
}


function remove_all_pixels(image, r_val, g_val, b_val) {
    var canvas2 = document.createElement('canvas');
    var ctx = canvas2.getContext("2d");

    canvas2.width = image.width;
    canvas2.height = image.height;

    ctx.drawImage(image,0,0);

    var imgd = ctx.getImageData(0, 0, canvas2.width, canvas2.height);
    var pix = imgd.data;

    for (var i = 0, n = pix.length; i < n; i += 4) {
        var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        if(r == r_val && g == g_val && b == b_val){ 
            pix[i] = 0;
            pix[i+1] = 0;
            pix[i+2] = 0;
            pix[i+2] = 0;
        }
    }

    ctx.putImageData(imgd, 0, 0);
    return canvas2.toDataURL();
}

函数绘图图形（画布、上下文、lgo类型、gph\U img、rib\U类型、hl\U col、hl\U txt、cp\U col、cp\U txt、in\U col、in\U txt、img\U src、ban\U bor）{
//添加图形图像
如果（gph_img！=“”）{
var img3=新图像（）；
img3.src=gph\u img；
img3.onload=函数（）{
/*/////////////////////////////////////////*/
var img6=新图像（）；
img6.src=删除所有像素（img3、255、255、255）；
img6.onload=函数（）{
/*/////////////////////////////////////////*/
context.globalCompositeOperation='destination out'；
如果（肋骨|U型==“1”|肋骨|U型==“3”|肋骨|U型==“5”）{
drawImage（这个，0,0143105）；
}否则{
drawImage（本文件，465,0143105）；
}
context.globalCompositeOperation='source over'；
绘制徽标（画布、背景、lgo_类型、肋骨_类型、hl_col、hl_txt、cp_col、cp_txt、in_col、in_txt、img_src、ban_bor）；
}
};
}否则{
绘制徽标（画布、背景、lgo_类型、肋骨_类型、hl_col、hl_txt、cp_col、cp_txt、in_col、in_txt、img_src、ban_bor）；
}
}
函数删除所有像素（图像、r值、g值、b值）{
var canvas2=document.createElement（'canvas'）；
var ctx=canvas2.getContext（“2d”）；
canvas2.width=image.width；
canvas2.height=image.height；
ctx.drawImage（图像，0,0）；
var imgd=ctx.getImageData（0,0，canvas2.width，canvas2.height）；
var pix=imgd.data；
对于（变量i=0，n=pix.length；i

您需要将最后一个值的偏移量从2更改为3。因为

pix[i+3]

控制alpha通道

  if(r == r_val && g == g_val && b == b_val){ 
        pix[i] = 0;
        pix[i+1] = 0;
        pix[i+2] = 0;
        pix[i+3] = 0; // Change i+2, to i+3
    }

对不起，这是你最后一个问题中我的错。是我在回答中提供的代码中的一个输入错误，但是小提琴工作得很好

---

您需要将最后一个值的偏移量从2更改为3。因为

pix[i+3]

控制alpha通道

  if(r == r_val && g == g_val && b == b_val){ 
        pix[i] = 0;
        pix[i+1] = 0;
        pix[i+2] = 0;
        pix[i+3] = 0; // Change i+2, to i+3
    }

对不起，这是你最后一个问题中我的错。是我在回答中提供的代码中的一个输入错误，但是小提琴工作得很好