Scribd
Upload
82 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
82 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
We take content rights seriously. If you suspect this is your content, claim it here.
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