doGreenScreen

doGreenScreen.markdown

两个问题： 第一：头像作为背景，小人作为前景，合成后，不能ClearCanvas; 第二：两次放相同的图片，比如Japan这张，然后第二次就不会呈现出来

index.html

<script src = "https://www.dukelearntoprogram.com//course1/common/js/image/SimpleImage.js">
</script>
<h1>Green Screen Web Page</h1>
<canvas id = "bgcans"></canvas>
<canvas id = "fgcans"></canvas>
<p>
  BackgroundImage:
  <input type = "file" multiple = "false" accept = "image/*" id = "bgimage" onchange = upload1()>
</p>
<p>
  ForegroundImage:
  <input type = "file" multiple = "false" accept = "image/*" id = "fgimage" onchange = "upload2()">
</p>
<p>
  <input type = "button" value = "Create Composite" id = "bt1" onclick = "doGreenScreen()">
  <input type = "button" value = "Clear Canvases" id = "bt2" onclick = "clearCanvas()" >
</p>

script.js

var img1 = null;
var img2 = null;
var canvas1;
var canvas2;
function upload1(){
  var bginput = document.getElementById("bgimage");
  canvas1 = document.getElementById("bgcans");
  img1 = new SimpleImage(bginput);
  img1.drawTo(canvas1);
}

function upload2(){
  var fginput = document.getElementById("fgimage");
  canvas2 = document.getElementById("fgcans");
  img2 = new SimpleImage(fginput);
  img2.drawTo(canvas2);
}
function Composite(){
  var output = new SimpleImage(img1.getWidth(),img1.getHeight());
  var greenThreshold = 240;
  for(var pixel of img1.values()){
    var x = pixel.getX();
    var y = pixel.getY();
    if(pixel.getGreen() > greenThreshold){
      var fgPixel = img2.getPixel(x,y);
      output.setPixel(x,y,fgPixel);
    }
    else{
      output.setPixel(x,y,pixel);
    }
  }
  return output;
}

function doGreenScreen(){
	if(img1 == null || !img1.complete()){
		alert("background image is not completely loaded!");
	}
	if(img2 == null || !img2.complete()){
		alert("foreground image is not completely loaded!");
	}
	clearCanvas();
	var img3 = Composite();
	img3.drawTo(canvas1);
}

function clearCanvas(){
	var ctx1 = canvas1.getContext("2d");
	ctx1.clearRect(0,0,canvas1.width,canvas2.height);
	var ctx2 = canvas2.getContext("2d");
	ctx2.clearRect(0,0,canvas2.width,canvas2.height)
}

style.css

canvas{
  height:180pt;
  width:240pt;
  border: 1px solid blue;
}
p{
  font-size:14pt;
}
#fgimage{
  font-size: 14pt;
}
#bgimage{
  font-size:14pt;
}
#bt1{
  font-size:14pt;
}
#bt2{
  font-size:14pt;
}