如何使用Javascript上传网页中的图片？

Question

我要上传网页中的图片。代码没有错误，但我仍然无法在网页中上传图片并在 canvas 中显示。该图像已上传到网页中，但未显示在我创建的 canvas 中。请帮我找出我的代码有什么问题？这是孔 html 页面的代码。

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>

Answer 1

我认为您在 HTML 元素和 JS 代码中使用的 ID 不匹配。

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

如何使用Javascript上传网页中的图片？

How to upload image in web page using Javascript?

html

javascript

css

web-deployment