Image load on canvas.

by jshacker

HTML

<label>Image File:</label><br />
<input type="file" id="imageLoader" name="imageLoader" />
<canvas id="imageCanvas"></canvas>

JavaScript

var imageLoader = document.getElementById("imageLoader")
imageLoader.addEventListener("change", handleImage, false)
var canvas = document.getElementById("imageCanvas")
var ctx = canvas.getContext("2d")

function handleImage(e) {
  var reader = new FileReader()
  reader.onload = function (event) {
    var img = new Image()
    img.onload = function () {
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0)
    }
    img.src = event.target.result
  }
  reader.readAsDataURL(e.target.files[0])
}