在畫布中打開本地圖像

Question

我正在嘗試製作一個javascript圖像顏色選擇器。 可以在畫布中打開本地圖像，而無需將其上傳到服務器？

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

不支持所有的瀏覽器（IE和Opera據我所知），但你可以使用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' /> 

得到一個數據URI我加了fiddle here作爲一個例子。