Otwórz obraz lokalny na płótnie

Question

Próbuję wykonać próbnik kolorów obrazu javascript. Można otworzyć obraz lokalny na płótnie, bez przesyłania go na serwer?

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' /> 

Answer 1

Nie jest obsługiwany we wszystkich przeglądarce (IE i Opera AFAIK), ale można dostać URI danych przy użyciu 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' /> 

dodałem fiddle here jako przykład.