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>

I'm not sure I actually understand what you want. At least it makes no sense to me at all. YOu cant upload an image to a webpage with HTML, CSS or JSS at all. You need PHP for it or a FTP-Programm to upload an image to a webserver. So I assume, you mean to link an image to your website, but then I have no idea why youw ant to do it with JS. But then again, I found no remarke for an image in your entire code. — tacoshy
– tacoshy, Commented Nov 1, 2020 at 2:30

Harshana · Accepted Answer · 2020-11-01 02:33:00Z

1

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()">

answered Nov 1, 2020 at 2:33

Harshana

5,5561 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to upload image in web page using Javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related