Question

用户使用表单上传图像。图像应全部显示在画布中。仅显示多个图像之一。也许图像未正确加载？

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：

用var声明的变量的范围是其当前的执行上下文，它是封闭的函数，或者对于任何函数外部声明的变量，是全局的。如果您重新声明一个JavaScript变量，它将不会丢失其值。

这就是为什么您的reader变量仅适用于其中一张图片的原因。

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

const reader = new FileReader();

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

加载上传的图像但未显示表单

1 个答案: