1

キャンバス内の別の画像の上に画像を描画しようとしています。最初の画像では、白いピクセルを削除して透明にしようとしていますが、黒になっています。

これは私が使用しているコードですが、正しくないようです。誰かが問題を見ていますか？

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

1 に答える 1

4

最後の値のオフセットを2から3に変更する必要があります。以来pix[i+3]、アルファチャネルを制御します。

  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/

于 2012-07-13T15:35:09.790 に答える