Scribd
Upload
60 views

01 - Upload and Display An Image - UploadAndDisplayImage

The document discusses creating a green screen web page that allows uploading and displaying an image. It introduces new HTML and JavaScript concepts needed to build a prototype that includes a file input element and uses the SimpleImage library to upload an image file and draw it to a canvas element. The prototype is developed incrementally, starting with text and button elements, then replacing them with a file input to select an image and JavaScript code to load and display the selected image.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
60 views

01 - Upload and Display An Image - UploadAndDisplayImage

The document discusses creating a green screen web page that allows uploading and displaying an image. It introduces new HTML and JavaScript concepts needed to build a prototype that includes a file input element and uses the SimpleImage library to upload an image file and draw it to a canvas element. The prototype is developed incrementally, starting with text and button elements, then replacing them with a file input to select an image and JavaScript code to load and display the selected image.

Uploaded by

Dr Phil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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);
}

You might also like