18

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

1 に答える 1

38

すべてのブラウザ（IEおよびOpera AFAIK）でサポートされているわけではありませんが、FileAPIを使用してデータURIを取得できます

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

例としてここにフィドルを追加しました。

于 2012-04-18T12:48:31.310 に答える