CODEWITHSUNDEEP
javascripthtmlcssweb-deployment
Mohit_Yede
Mohit_Yede

Reputation: 13

How to upload image in web page using Javascript?

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>

Upvotes: 0

Views: 535

Answers (1)

Harshana
Harshana

Reputation: 5476

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

Upvotes: 1

Related Questions