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.
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
0 ratings0% found this document useful (0 votes)
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.
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); }