<h1> the image uploadeer pages </h1>
<div>
<script src = "http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"> </script>
</div>
<canvas id = "d1">
</canvas>
<div>
<input type = "text" id = "finput">
<input type = "button" value = "Upload! (doesn't work)" onclick = "upload()">
</div>
<canvas id = "c2">
</canvas>
<p>
<input type = "file" multiple = "false" accept = "image/*" id = "finput2" onchange = "upload2()">
</p>
<p>
<input type = "button" value = "Make Greylin Scales" onclick = "grayscale()">
</p>
<canvas id = "c3">
</canvas>
/*Downloaded from https://www.codeseek.co/DanniAsoma/greylin-scales-bRWBya */
canvas {
border: 2px dotted gray;
margin-left: 100px;
}
div {
margin-left:100px;
}
p {
margin-left: 100px;
}
/*Downloaded from https://www.codeseek.co/DanniAsoma/greylin-scales-bRWBya */
function upload() {
var fileinput = document.getElementById("finput");
var filename = fileinput.value;
alert("Chose " + filename);
}
var image;
//global variable!
function upload2() {
var canvas = document.getElementById("c2");
var disimage = document.getElementById("finput2");
image = new SimpleImage(disimage);
image.drawTo(canvas);
}
function grayscale() {
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("c3");
image.drawTo(imgcanvas);
}
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
