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 |
Canvas for Live Coding | 1,799 Kb |
Interests | 1,523 Kb |
Changing HTML Text with CSS and JS Week 3 | 1,829 Kb |
My Interests | 2,015 Kb |
Green Screen - Foreground and Background Images | 1,817 Kb |
A Pen by Anshu Arora | 1,558 Kb |
Webpage Example | 6,071 Kb |
Anshu Arora Webpage | 6,034 Kb |
Class 1 Week 1 | 1,263 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 |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
3D-box | Parthviroja | 2,346 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
A simple log in form made with css | Mayurelbhar | 2,160 Kb |
Pure CSS read more toggle | Idered | 2,344 Kb |
Dragonball Dragon Radar | DouglasGlover | 2,157 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 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!