Upload and display image

index.html

<script src = "https://www.dukelearntoprogram.com//course1/common/js/image/SimpleImage.js">
</script>
<h1>Image Practice</h1>
<canvas id = "cans"></canvas>
<p>
  Filename
  <input type = "file" multiple = "false" accept = "image/*" id = "input" onchange = "upload()" >
</p>

script.js

function upload(){
  var fileinput = document.getElementById("input");
  var canvas = document.getElementById("cans");
  var img = new SimpleImage(fileinput);
  img.drawTo(canvas);
}

style.css

#input{
  width:225px;
  font-size: 12pt;
}
canvas{
  height:200px;
  width:350px;
  border: 1px solid lightgrey;
}

Upload and display image.markdown

abNbmXy

A Pen by Justin Shi on CodePen.

License.