ひなたの雑記帳

function darker(src, dst)
{  
    var w,h;
   
    if(src.width > dst.width)
    {
        w = src.width;
    }
    else
    {
        w = dst.width;
    }
   
    if(src.height > dst.height)
    {
        h = src.height;
    }
    else
    {
        h = dst.height;
    }

    var ctx1 = src.getContext("2d");
    var canvas = document.createElement("canvas");
    canvas.setAttribute("width", w);
    canvas.setAttribute("height", h);
    ctx2 = canvas.getContext("2d");
    ctx2.fillStyle = "rgba(255,255,255,1)";
    ctx2.fillRect(0, 0, w, h);
    ctx2.drawImage(src, 0, 0);

    var canvas2 = document.createElement("canvas");
    canvas2.setAttribute("width", w);
    canvas2.setAttribute("height", h);
    ctx3 = canvas2.getContext("2d");
    ctx3.fillStyle = "rgba(255,255,255,1)";
    ctx3.fillRect(0, 0, w, h);
    ctx3.drawImage(dst, 0, 0);

    var result = ctx2.getImageData(0, 0, w, h);
    var blend = ctx3.getImageData(0, 0, w, h);
   
    var aO;
   
    for(var data = result.data, blend = blend.data, i = 0 ; i < data.length ; i+=4)
    {
        aO = (data[i+3]) + (blend[i+3]);
        data[i] = 255 - ((255 - data[i]) * (data[i+3]) + (255 - blend[i]) * (blend[i+3]));
        data[i+1] = 255 - ((255 - data[i+1]) * (data[i+3]) + (255 - blend[i+1]) * (blend[i+3]));
        data[i+2] = 255 - ((255 - data[i+2]) * (data[i+3]) + (255 - blend[i+2]) * (blend[i+3]));
    }
   
    ctx1.putImageData(result, 0, 0);
   
    return src;
}
globalAlphaを使ったときと同じ動作にするためには、
dst側のalphaの値をglobalAlphaの値で置き換えればいけるんじゃないかと思うけどまだ未確認。

この投稿は 2012年11月17日 土曜日 5:33 PM に JavaScript, プログラミング カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。