Javascript 在p5js中使用通过HTML DOM文件上传器上传的图像

我试图允许用户通过DOM file uploader（即

）上传他们的图像文件，但在我这么做之后，我不确定如何将图像移动到JavaScript并使用p5.js处理它。如何将HTML文件转换为p5.js文件或像素数组，或者转换为任何可以在JavaScript中使用或读取的值

首先，我限制元素只接受

.png

和

.jpg

文件

然后我尝试使用

.file[0]

语法，并尝试在

loadImage（）

函数中使用

.value

通过其路径加载图像

两者都不起作用，我只是不确定从这一点上该怎么办

<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>

---

查看

createFileInput（）

函数。参考文献是

从该页：

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中的现有文件输入执行相同的操作。

我发布这篇文章已经有一段时间了，但我发现了这一点

所以我们首先找到upload dom元素，在这个例子中，我的id被称为“upload”

然后我们得到上传的文件

const myImageFile = selectedFile.files[0];

然后，我们可以通过执行以下操作创建图像的URL

let urlOfImageFile = URL.createObjectURL(myImageFile);

如果我们使用p5.js，我们现在可以这样做来获取p5jsImage对象

let imageObject = loadImage(urlOfImageFile);

如果您想绘制图像，我建议您在此基础上创建一个回调函数，因为它可能不会立即加载。总而言之，这就是：

const selectedFile = document.getElementById('upload');
const myImageFile = selectedFile.files[0];
let urlOfImageFile = URL.createObjectURL(myImageFile);
let imageObject = loadImage(urlOfImageFile, () => {image(imageObject, 0, 0)});

---

或者，您也可以使用相同的URL作为图像dom元素的src。

另外，我没有使用jQuery，主要是因为我还不太了解它是什么，我不确定它是否值得学习。我认为它可以工作，但我正在寻找一种不同的方法来实现这一点，而无需导入dom库。仅仅为了1分钟就导入整个库感觉不太好function@VadimKim你可以看看图书馆在幕后是如何做到这一点的。如果我是你，我会用图书馆。

let imageObject = loadImage(urlOfImageFile);

const selectedFile = document.getElementById('upload');
const myImageFile = selectedFile.files[0];
let urlOfImageFile = URL.createObjectURL(myImageFile);
let imageObject = loadImage(urlOfImageFile, () => {image(imageObject, 0, 0)});