多个画布不能绘制图像。

Question

我希望能预览用户想要上传的图片。我尝试为每张图片创建画布以便更易操作。

如果我选择多张图片，只有最后一张会被显示，但实际上应该显示所有图片。

<input type="file" id="browseImages" multiple="multiple" accept="image/*">
<output id="list"></output>

document.getElementById('browseImages').addEventListener('change', handleFileSelect, true);

  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

    var canvas = document.createElement('canvas');
    canvas.width  = 110;
    canvas.height = 100;
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.onload = function() {
    ctx.drawImage(img, 0, 0, 100, 100);
}
    img.src = window.URL.createObjectURL(f);
    document.getElementById('list').appendChild(canvas);
    window.URL.revokeObjectURL(f);
    }
  }

- M9A

---

https://dev59.com/v3RB5IYBdhLWcg3wAjNH - Teemu

@Teemu 我不明白... - M9A

当图像的onload处理程序函数被执行时，for循环早已完成。因此，处理程序中的img和ctx变量具有在循环中最后分配的值。 - Teemu

Answer 1

将代码提取到另一个函数中，您可以获得所有绘制在画布上的内容。

HTML代码：

<input type="file" id="browseImages" multiple="multiple" accept="image/*">
<output id="list"></output>

Javascript代码：

document.getElementById('browseImages').addEventListener('change', handleFileSelect, true);

function handleFileSelect(evt) {                
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0; i < files.length; i++) {
    var f = files[i];
    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }
    createCanvas(f);
  }
}

function createCanvas(f){
  var canvas = document.createElement('canvas');
  canvas.width  = 110;
  canvas.height = 100;
  var ctx = canvas.getContext("2d");
  var img = new Image();
  img.src = window.URL.createObjectURL(f);
  window.URL.revokeObjectURL(f);

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

  document.getElementById('list').appendChild(canvas);
 };

这是 JSFiddle 的链接！

- Winner Crespo

---

搞定了！我想我对闭包规则感到困惑了！感谢您的帮助。 - M9A