How to upload image in web page using Javascript?
Question
I want to upload the image in web page. There is no error in the code but still I can't upload the image in web page and show it in canvas. The image is upload in the web page but it not show in the canvas which i created. Please help me to find what wrong with my code? here is the code for hole html page.
function upload(){ var dd=document.getElementById('can'); var filein=document.getElementById('finp'); var img = new SimpleImage(filein); img.drawTo(dd); } function docolor(){ var dd1=document.getElementById("can2"); var colin=document.getElementById("clr"); var col=colin.value; dd1.style.backgroundColor=col; }
<html> <head> <script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js"></script> </head> <body> <h3>HTML code for canvas and upload button</h3> <canvas id="can"> </canvas> <h3>Load Image</h3> <input type="file" multiple="false" accept="image/*" id="finp" onclick="upload()" > </body> </html>
1 answers
solution1
1 ACCPTED 2020-11-01 02:33:00
I think there is a mismatch in the IDs you use in HTML elements and JS Code.
function upload(){ var dd=document.getElementById('can'); var filein=document.getElementById('finp'); var img = new SimpleImage(filein); img.drawTo(dd); } function docolor(){ var dd1=document.getElementById("can2"); var colin=document.getElementById("clr"); var col=colin.value; dd1.style.backgroundColor=col; }
<script src="http://www.dukelearntoprogram.com/course1/common/js/image/SimpleImage.js" ></script> <canvas id='can' class='canvasRoundCorders'></canvas> <input id='finp' type='file' accept='image/*' onchange="upload()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to upload an image using image url from web in javascript or jquery?
How do you upload a file to a http web page using JavaScript?
How to upload an image and display it in the same page using html, javascript / jquery
How to get all image urls from a web page using javascript?
How to convert a web page to PDF or image using Javascript?
How to print a very large image that is on the web page using JavaScript
display an image in a web page using javascript arrays
loading a image to a web page asynchronously using JavaScript
image upload to web service in JavaScript
Web page image effects - JavaScript? How else?
Related Tags