ProgrammingFoundations/thegreenscreen.js at master · chanchanman/ProgrammingFoundations · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var image;

var fgImage = null;
var bgImage = null;

var greenThreshold = null;

function loadForegroundImage(){

  var imageFile = document.getElementById("fgfile");

  fgImage = new SimpleImage(imageFile);

  var canvas = document.getElementById("d1");

  fgImage.drawTo(canvas);

}

function loadBackgroundImage(){

  var imageFile = document.getElementById("bgfile");

  bgImage = new SimpleImage(imageFile);

  var canvas = document.getElementById("d2");

  bgImage.drawTo(canvas);

}

function greenScreen(){

  if(fgImage == null || !fgImage.complete()){
    alert("foreground image not loaded");
  }

  if(bgImage == null || !bgImage.complete()){
    alert("background image not loaded");
  }

  clearCanvas();

  var output = new SimpleImage(fgImage.getWidth(), fgImage.getHeight());

  for(var pixel of fgImage.values()){

    var x = pixel.getX();
    var y = pixel.getY();

    if(pixel.getGreen() > pixel.getBlue() + pixel.getRed()){

      var bgPixel = bgImage.getPixel(x,y);
      output.setPixel(x,y,bgPixel);
    }
    else{
      output.setPixel(x,y,pixel);
    }
  }

  var c1 = document.getElementById("d3");

  output.drawTo(c1);
}

function clearCanvas(){

  var dd1 = document.getElementById("d1");
  var dd2 = document.getElementById("d2");

  var ctx1 = dd1.getContext("2d");
  var ctx2 = dd2.getContext("2d");

  ctx1.clearRect(0,0,dd1.width,dd1.height);
  ctx2.clearRect(0,0,dd2.width,dd2.height);

}

function upload(){

  var dd1 = document.getElementById("d1");

  var fileinput = document.getElementById("finput");

  image = new SimpleImage(fileinput);

  image.drawTo(dd1);

}

function makeGray(){

  for(var pixel of image.values()){

    var avg = (pixel.getRed()+pixel.getGreen()+pixel.getBlue())/3;

    pixel.setRed(avg);
    pixel.setGreen(avg);
    pixel.setBlue(avg);

  }

  var imgcanvas = document.getElementById("d1");

  image.drawTo(imgcanvas);

}