加载以不显示的形式上传的图像

Question

用户使用表单上传图片。图片应全部显示在 canvas 中。仅显示多个图像中的一个。可能图片加载不正确？

html:

let value = 0;
var images = [];

function setup() {
    createCanvas(320, 270);
    
    background(0);
 
 
  const form = document.querySelector('form');

  frameRate(2);
  
  form.addEventListener('submit', e => {
      e.preventDefault();
  
      var preview = document.querySelector('img'); //selects the query named img
      var files = form.querySelector('[type=file]').files;
      

      if (files[0]) {
        for(let i = 0; i < files.length; i++){
          var reader  = new FileReader();
          reader.onloadend = function () {
            //preview.src = reader.result;
            images[i] = loadImage(reader.result);
            console.log('new image added')
            console.log(images[i]);
          }
          reader.readAsDataURL(files[i]); //reads the data as a URL
          
        }
      }
  });
  
  
  }

  
  let cursor = 0;
  
function draw() {
    background(0);
    if(images.length > 0){ image(images[cursor], 0, 0, width, height - 20); }

    cursor ++;
    if(cursor >= images.length){ cursor = 0}

    fill(255);
    textSize(16);
    text(value, 10, height - 10);

    console.log(cursor);
}

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>image_classification</title>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
 <script src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"></script>
 <script src="sketch.js"></script>

</head>
<body>

    <h1>Welcome to the site!</h1>

    <form id="imgs" method="post" enctype="multipart/form-data">
        images:
        <input type="file" name="files[]" multiple>
        <input type="submit" value="Upload File" name="submit">
    </form>

    <br/>

</body>
</html>

我什至不知道问题出在哪里。是我错误地将图像插入到数组中，还是我对 JavaScript 的异步性质做错了什么？

提前致谢。

Answer 1

您的问题是由 JavaScript 范围界定引起的。

看看你的这部分代码：

for(let i = 0; i < files.length; i++){
  var reader  = new FileReader();
  reader.onloadend = function () {
    images[i] = loadImage(reader.result);
  }
  reader.readAsDataURL(files[i]);
}

因为您使用的是 var 关键字，所以您的 reader 实际上在 函数范围 中。来自 MDN:

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global. If you re-declare a JavaScript variable, it will not lose its value.

这就是为什么您的 reader 变量似乎只适用于您的一张图片。

最简单的解决方法是在此处使用 const 而不是 var：

const reader = new FileReader();

const 关键字在 块作用域 中创建变量，这可能是您最初期望 var 做的事情。

加载以不显示的形式上传的图像

Loading images uploaded with a form not showing

html

javascript

forms

image

p5.js