Upload and Display an Image
How do I make an upload and display an image?
What is a upload and display an image? How do you make a upload and display an image? This script and codes were developed by Anshu Arora on 15 September 2022, Thursday.
Upload and Display an Image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Upload and Display an Image</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js">
</script>
<h1>Upload and Display an Image</h1>
<canvas id="can"> </canvas>
<p> Filename: <input type="file" multiple="false" accept="image/*" id="finput" onchange="upload()"> </p>
<p> <input type ="button" value="Make Grayscale" onclick="makeGray()">
</p> <script src="js/index.js"></script>
</body>
</html>
Upload and Display an Image - Script Codes CSS Codes
canvas { height: 200px; brder: 1px olid lightgray;
}
input { font-size: 14pt;
}
Upload and Display an Image - Script Codes JS Codes
//define a global varable - image
var image;
function upload() { var imgcanvas = document.getElementById("can"); var fileinput = document.getElementById("finput"); image = new SimpleImage(fileinput); image.drawTo(imgcanvas);
}
function makeGray() { for (var pixel of image.values()) { var avg = 1/3*(pixel.getRed()+pixel.setGreen()+pixel.getBlue()); pixel.setRed(avg); pixel.setGreen(avg); pixel.setBlue(avg); } var imagcanvas = document.getElementById("can") image.drawTo(imgcanvas);
}
Developer | Anshu Arora |
Username | anshusaxenaarora |
Uploaded | September 15, 2022 |
Rating | 3 |
Size | 1,938 Kb |
Views | 36,432 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Green Screen - Foreground and Background Images | 1,817 Kb |
Anshu Arora Webpage | 6,034 Kb |
Upload and Display an Image | 1,938 Kb |
Class 1 Week 1 | 1,263 Kb |
Canvas for Live Coding | 1,799 Kb |
Interests | 1,523 Kb |
A Pen by Anshu Arora | 1,558 Kb |
Changing HTML Text with CSS and JS Week 3 | 1,829 Kb |
My Interests | 2,015 Kb |
Webpage Example | 6,071 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Video mute | Leon9208 | 2,131 Kb |
The CodePen Logo | Kindofone | 4,259 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Base-Style | Daniel_gooss | 2,614 Kb |
AngularJS Skills | Supro | 3,312 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!