Last Updated: February 25, 2016
·
1.389K
· juanpujol

Open local image with HTML 5

Say you want to open an image and play with canvas but you don't want to upload the image. Well, you can use the HTML 5 FileSystem API.

function draw() {
  var img = new Image(),
    ctx = document.getElementById('canvas').getContext('2d'),
    f = document.getElementById("uploadimage").files[0],
    url = window.URL || window.webkitURL,
    src = url.createObjectURL(f);

  img.src = src;
  img.onload = function() {
    ctx.drawImage(img,0,0);
    url.revokeObjectURL(src);
  }
}

<input type='file' name='img' size='65' id='uploadimage' />