不支持所有浏览器（IE和Opera AFAIK），但您可以使用File API获取数据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' />

字符串
我添加了一个fiddle here作为示例。

我提出了以下jQuery用途：

$('#load-button').on('click', function(e){
  e.preventDefault();

  $('<input type="file" accept="*.png">').change(function(){

    var reader = new FileReader();
    reader.onload = function(event){

      var img = new Image();
      img.onload = function(){
        $('#canvas')[0].getContext('2d').drawImage(img, 0, 0);
      };

      img.src = event.target.result
    };

    reader.readAsDataURL(this.files[0]);
  }).click();
});

字符串
这些是要素：

<canvas id="canvas">
<button id="load-button" type="button">Load</button>

型