javascript - 在 p5js 中使用通过 HTML DOM 文件 uploader 上传的图片

Question

我试图让用户通过 DOM 文件 uploader (即 <input type="file"></input>)上传他们的图像文件，但在我这样做之后我不确定如何将图像移动到 JavaScript 并使用 p5.js 处理它。如何将 HTML 文件转换为 p5.js 文件或像素数组，或者我可以在 JavaScript 中作为值使用或读取的任何内容？

首先我限制元素只接受.png和 .jpg文件。

然后我尝试使用 .file[0]语法并尝试使用 .value 通过其路径加载图像在loadImage()里面功能。

两者都不起作用，而且我通常不确定从这一点开始该做什么。

<div id="uploadMenu">
  <h4>Please select your image file:</h4>
  <input accept=".png, .jpg, .jpeg" type="file" id="imageUpload">
  <button onclick="fileToGrid()">Done</button>
  <script>
  </script>
  <script>
  let thisWindow = document.getElementById("uploadMenu");
  let windowWidth = thisWindow.style.width;
  console.log(windowWidth);
  thisWindow.style.left = `${innerWidth/2 - 100}px`
  thisWindow.style.top = `${innerHeight/2 - 50}px`
  </script>
</div>

function fileToGrid() {
  let uploadFromHTML = document.getElementById("imageUpload");
  let uploadedImage = loadImage(uploadFromHTML.value);
  let imageW = uploadedImage.width;
  let imageH = uploadedImage.height;
  console.log(imageW, imageH); 
// the end goal is to convert this image to an array of its pixel values
}

Answer 1

查看 createFileInput() 函数。引用是 here .

从那个页面:

let img;

function setup() {
  input = createFileInput(handleFile);
  input.position(0, 0);
}

function draw() {
  background(255);
  if (img) {
    image(img, 0, 0, width, height);
  }
}

function handleFile(file) {
  print(file);
  if (file.type === 'image') {
    img = createImg(file.data);
    img.hide();
  } else {
    img = null;
  }
}

该页面上的示例展示了如何在 P5.js 中创建文件输入，然后从中获取图像。

您可能可以对 DOM 中的现有文件输入执行相同的操作。