Im a complete beginner, im taking a online course from duke university (english is not my native tongue). I am doing a mini project and I have to create several buttons that alter an uploaded image to a website.
However i have written a few functions that alter the image already earlier in the program. But now I have to connect them with the HTML code to the canvas and such and I can’t get it to work. I have 1 function that is working which is the makeGray function but i’ve tried others and none of them work, either i get errors or the image simply doesnt change. So right now the makeGray function works but makeRed doesn’t.
HTML:
upload image
filename:
<input type=“button” value=“make gray”
onclick=“makeGray()”;>
<input type=“button” value=“red filter” onclick=“makeRed()”;>
Javascript:
function upload(){
var imgcanvas = document.getElementById(“can”);
var fileinput = document.getElementById(“finput”);
image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
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);
}
function makeRed(){
for (var pixel of image.values);{
pixel.setRed(200);
}
}
var imgcanvas = document.getElementById(“can”)
image.drawTo(imgcanvas);