如何在html5中的canvas下实现ps中的叠加效果

lookingforward_lh 2012-07-10 11:57:55

思路：获取两张图片给的像素点，然后按照算法进行计算，但是效果不对....求大侠指教啊~~
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>家居秀体验系统-光线测试</title>
</head>
<body>
叠加输出：<canvas id="id_out" width="414" height="576"></canvas><hr>
基础图：<canvas id="id_door" width="414" height="576"></canvas><hr>
配色图：<canvas id="id_lights" width="414" height="576"></canvas>
<script>
var count = 0 ;
var img_door = new Image();
img_door.src="door.png";
img_door.onload=function(){
count ++ ;
drawCanvas();
}
var img_lights = new Image();
img_lights.src="lights.png";
img_lights.onload=function(){
count ++ ;
drawCanvas();
}

var getOverLayData = function(B,A,tB,tA) {//像素点

if (B!=0&&A!=0){
var tpA=tA/255;
var tpB=tB/255;
var tpA2=(tpA+tpB-tpA*tpB);
var demultiply=255/tpA2;

var pA=A/255*tpA;
var pB=B/255*tpB;

var C=(pA*pB+pA*(1-tpA)+pB*(1-tpB))*demultiply;

}else if (A==0||B==0){
if (A!=0){
C=A;
}else{
C=B;
}

}

return C;
}
var _getOverLayData = function(B,A) {//透明度

var tA=A/255;
var tB=B/255;
var tA2=(tA+tB-tA*tB);
var C=tA2*255;

return C;
}

var drawCanvas = function(){
if(count>1)
{
//执行画布
var ctx_out=document.getElementById("id_out").getContext("2d");
var ctx_door=document.getElementById("id_door").getContext("2d");
var ctx_lights=document.getElementById("id_lights").getContext("2d");

ctx_lights.drawImage(img_lights,0,0); //写门数据到
ctx_door.drawImage(img_door,0,0); //写光线

var ctx_door_data = ctx_door.getImageData(0,0, img_door.width , img_door.height);
var ctx_lights_data = ctx_lights.getImageData(0,0, img_lights.width, img_lights.height);
var ctx_out_data = ctx_door_data;
alert("l---"+ctx_lights_data.data.length);
alert("D---"+ctx_door_data.data.length);
for(var i=0;i<ctx_lights_data.data.length;i=i+4)
{
var MultiplyColor = [255, 105, 0];
var door_r=ctx_door_data.data[i+0];
var door_g=ctx_door_data.data[i+1];
var door_b=ctx_door_data.data[i+2];
var door_T=ctx_door_data.data[i+3];
var light_r=ctx_lights_data.data[i+0];
var light_g=ctx_lights_data.data[i+1];
var light_b=ctx_lights_data.data[i+2];
var light_T=ctx_lights_data.data[i+3];

ctx_out_data.data[i ] = getOverLayData(light_r,door_r,light_T,door_T);//R
ctx_out_data.data[i+1] = getOverLayData(light_g,door_g,light_T,door_T); //G
ctx_out_data.data[i+2] = getOverLayData(light_b,door_b,light_T,door_T); //B
ctx_out_data.data[i+3] = _getOverLayData(light_T,door_T); //alpha值，透明度

}

ctx_out.putImageData(ctx_out_data,0,0); //把结果写到canvas

}
}

</script>
</body>

...全文