Interactive-Filter/script.js at main · alwaysnacy/Interactive-Filter · 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
108
109
110
111
112
var mainImage = null;

function loadImage() {
  var fileinput = document.getElementById("finput");
  mainImage = new SimpleImage(fileinput);
  var mainCanvas = document.getElementById("can");
  mainImage.drawTo(mainCanvas);
  if (mainImage != null) {
    alert("Image loaded!");
  } else {
    alert("Please upload again!")
  }
}

function makeGray() {
	var grayImage = new SimpleImage(mainImage.getWidth(), mainImage.getHeight());
	var mainCanvas = document.getElementById("can");
	clearCanvas();
	for (pixel of grayImage.values()) {
		var x = pixel.getX();
		var y = pixel.getY();
		var mainPixel = mainImage.getPixel(x, y);
		var red = mainPixel.getRed();
		var green = mainPixel.getGreen();
		var blue = mainPixel.getBlue();
		var gray = (red + green + blue) / 3;
		pixel.setGreen(gray);
		pixel.setBlue(gray);
		pixel.setRed(gray);
	}
	alert("Done converting.")
	grayImage.drawTo(mainCanvas);
}

function clearCanvas() {
	var mainCanvas = document.getElementById("can");
	var ctx = mainCanvas.getContext("2d");
	ctx.clearRect(0, 0, mainCanvas.width, mainCanvas.height);
}

function makeRed() {
	var mainCanvas = document.getElementById("can");
	var redImage = new SimpleImage(mainImage.getWidth(), mainImage.getHeight());
	for (pixel of redImage.values()) {
	  var x = pixel.getX();
	  var y = pixel.getY();
	  var mainPixel = mainImage.getPixel(x, y);
	  var red = mainPixel.getRed();
	  var green = mainPixel.getGreen();
	  var blue = mainPixel.getBlue();
	  var avg = (red + green + blue) / 3;
	  if (avg < 128) {
		pixel.setRed(avg * 2);
		pixel.setGreen(0);
		pixel.setBlue(0);
	  } else {
		pixel.setRed(red);
		pixel.setGreen(green);
		pixel.setBlue(blue);
	  }
  }
	alert("Done converting.")
	redImage.drawTo(mainCanvas);
}

function makeChromatic() {
	var mainCanvas = document.getElementById("can");
	var chImage = new SimpleImage(mainImage.getWidth(), mainImage.getHeight());
	var height = mainImage.getHeight()/6;
	for (pixel of chImage.values()) {
		var x = pixel.getX();
		var y = pixel.getY();
		var mainPixel = mainImage.getPixel(x, y);
		var red = mainPixel.getRed();
		var green = mainPixel.getGreen();
		var blue = mainPixel.getBlue();
		var avg = (red + green + blue) / 3;
		if (y < height) {
		  pixel.setRed(200);
		  pixel.setGreen(green);
		  pixel.setBlue(blue);
		} else if (y < height * 2) {
		  pixel.setRed(red);
		  pixel.setGreen(200);
		  pixel.setBlue(blue);
		} else if (y < height * 3) {
		  pixel.setRed(red);
		  pixel.setGreen(200);
		  pixel.setBlue(200);
		 }else if (y < height * 4) {
		  pixel.setRed(200);
		  pixel.setGreen(200);
		  pixel.setBlue(blue);
		} else if (y < height * 5) {
		  pixel.setRed(red);
		  pixel.setGreen(green);
		  pixel.setBlue(200);
		} else {
		  pixel.setRed(200);
		  pixel.setGreen(green);
		  pixel.setBlue(200);
		}
	  }
	alert("Done converting.")
	chImage.drawTo(mainCanvas);

}
function reset() {
	var mainCanvas = document.getElementById("can");
	clearCanvas();
	mainImage.drawTo(mainCanvas);
}