Green Screen Web Page
Upload and Display an Image
Libraries, Files, Images
• We'll need some new programming
concepts and tools to create a Green
Screen web page
• Continue creating interactive web pages
using the new concepts and tools
• Build toward creating Green Screen
page and the course MiniProject
Prototype to Simplify
• We'll need a new type of HTML input
element to upload file
Prototype to Simplify
• Text input File input
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype HTML
<input type="text" id="finput" >
<input type="button" value="Upload"
onclick="upload()" >
Prototype JavaScript
function upload() {
var fileinput = document.getElementById("finput");
var filename = fileinput.value;
alert("Chose " + filename);
}
Prototype JavaScript
function upload() {
var fileinput = document.getElementById("finput");
var filename = fileinput.value;
alert("Chose " + filename);
}
Prototype JavaScript
function upload() {
var fileinput = document.getElementById("finput");
var filename = fileinput.value;
alert("Chose " + filename);
}
File Input, SimpleImage, Library
• We'll use the last Pen as a model, extend
with new concepts
• Replace text and button with file input
• Create SimpleImage from DLTP library
• Create something, extend functionality
• Helps conceptually
• Helps minimize potential bugs
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload HTML
<input type="file" multiple="false"
accept="image/*" id="finput"
onchange="upload()" >
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
Include JS library
Include JS library
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
File Upload JavaScript
function upload() {
var imgcanvas = document.getElementById("can");
var fileinput = document.getElementById("finput");
var image = new SimpleImage(fileinput);
image.drawTo(imgcanvas);
}
