キャンバスでローカル画像を開く

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を追加しました。