Open local image in canvas

html, javascript, jquery

Solution

Not supported in all browser (IE and Opera AFAIK) but you could get a data URI using the File API

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d')
    , img = new Image()
    , 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' />

I added a fiddle here as an example.

Problem

i'm trying to make an javascript image color picker. It is possible to open local image in canvas, without uploading it to server ? ``` function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.onload = function(){ ctx.drawImage(img,0,0); } img.src = $('#uploadimage').val(); } <input type='file' name='img' size='65' id='uploadimage' /> ```

Original source