javascript - 空白 Canvas HTML、JavaScript

Question

为什么我得到空白 Canvas ？ 当 e.target.result 更改为网络某处图像的正常 url(在 img.src = e.target.result 中)时，它工作得很好。使用 src=e.target.result 添加 img 标签也可以。

  function handleFileSelect(evt) {
    var files = evt.target.files; 
    for (var i = 0, f; f = files[i]; i++) {
      if (!f.type.match('image.*')) {
        continue;
      }
      var reader = new FileReader();
      reader.onload = (function(theFile) {
        return function(e) {
          var span = document.createElement('span');
          span.innerHTML = ['<canvas class="thumb" title="', escape(theFile.name), '" id="', escape(theFile.name), '"></canvas>'].join('');
          document.getElementById('photo-list').insertBefore(span, null);
          var ctx=document.getElementById(escape(theFile.name)).getContext("2d");
          var img=document.createElement('img');
          img.src = e.target.result;
          ctx.drawImage(img,0,0);
        };
      })(f);
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);

Answer 1

在代码中执行的位置

ctx.drawImage(img,0,0);

图像尚未完成加载(它是客户端，但加载仍然需要一些时间)。因此，将 drawImage 调用包装在 <img> 的加载处理程序中。元素，例如:

img.onload = (function (ctx) {
  return function () {
    ctx.drawImage(this, 0, 0);
  };
})(ctx);

Fiddle