如何在IE5中創建非黑色的html5畫布中的透明像素

Question

我試圖在畫布上的另一個圖像上繪制圖像，在第一個圖像中，我試圖去除白色像素並使它們透明，但它們變黑了。

這是我正在使用的代碼，但它看起來不正確。 有誰看到這個問題？

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();
}

Answer 1

您需要將最后一個值的偏移量從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
    }

對不起，這是我上一個問題的錯。 我在答案中提供了我的代碼中的拼寫錯誤，但小提琴完美無缺。

http://jsfiddle.net/loktar/BtbSM/