时间戳

首页 > 解决方案 > 如何在 JavaScript/p5.js/HTML 中访问本地图像

javascript - 如何在 JavaScript/p5.js/HTML 中访问本地图像

问题描述

我想在 JavaScript (p5.js) 中显示本地文件夹中的图像文件。每次我尝试我都会得到：Access to image at "XXXXX" from origin "null" has been block by CORS policy: The response is invalid.

HTML、js 和图像都在文件树中，在媒体服务器的项目文件夹中。

他们必须在本地运行。从它们所在的文件夹以外的任何其他位置运行都不是一种选择（参考很多关于运行 Web 服务器的答案。

function setup() {
  createCanvas(96, 192);
  img = loadImage('images/square1-01.png'); // Load the image
}

function draw() {
  image(img, 0, 0);
}

//ALSO TRIED

img = loadImage('file://images/square1-01.png'); // Load the image

上面的文本是我从主文件中分离出来的一个超级简化版本，因此我可以独立运行它，这样我就可以在开始添加其他复杂层之前获取图像。因此，布局完全来自教程。

相关文件有：

.../web/d3test.html

.../web/d3test.js

.../web/images/square1-01

.../web/images/square2-01

.../web/images/square3-01

标签： javascripthtmlp5.js

解决方案

出于安全原因，JavaScript 被阻止访问这样的本地文件。您不希望每个网站都窥探您硬盘上的文件。这就是导致您的错误的原因。

您需要从 Web 服务器访问文件，而不是访问本地硬盘上的文件。您可以将您的草图（连同您的图像）上传到网络主机。无耻的自我推销：这是一个介绍托管选项的教程。

您还可以使用 P5.js编辑器。这是 P5.js 的免费编辑器，可自动将所有内容上传到网络主机。你可以在那里正常工作。

您还可以运行自己的本地 Web 服务器。

如果您真的，真的，真的需要在没有网络服务器的情况下运行它，那么您可以尝试此答案中描述的 File API或在您的浏览器中找到此答案中描述的设置。

推荐阅读