在画布中打开本地图像

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作为一个例子。