loadImage()无法加载图像（P5.js WebGL）

Question

我正在尝试加载一张名为"border.bmp"的图片，以便将其用作WebGL的纹理。以下是我引用该图片的方式。

var img;
function preload() {
    img = loadImage("assets/border.bmp");
}

然后我在控制台中获得了这个错误。

Access to Image at 'file:///C:/P5.js/empty-example/assets/border.bmp' from 
origin 'null' has been blocked by CORS policy: Invalid response. Origin 
'null' is therefore not allowed access.

这个错误消息是什么意思？它表示什么？我如何加载这个图片？

- Randy Matinee

---

解决方案是使用一个简单的Web服务器。这将花费您不到2分钟的时间。这里有一个和这里有更多。将您的p5.js文件夹提供服务，然后转到http：// localhost：8080或您决定使用的服务器所在的任何端口。 - gman

其他运行服务器的方式 - ggorlen

Answer 1

虽然以下内容并不能直接回答提问者的问题，但可以帮助像我一样搜索 P5.JS CORS 的其他人。

---

要绕过CORS限制，只需在https://cors-anywhere.herokuapp.com后添加被阻止的URL，即：

var = 'https://cors-anywhere.herokuapp.com/http://blocked.url'

---

P5.JS示例：

假设您想使用P5.JS从未启用CORS的服务器加载远程mp4视频（它可以是任何文件类型），针对这些情况，您可以使用：

var vid;
function setup() {
    vid = createVideo(['https://cors-anywhere.herokuapp.com/http://techslides.com/demos/sample-videos/small.mp4'], vidLoad);
}

// This function is called when the video loads
function vidLoad() {
    vid.play();
}

---

更新：

CORS Anywhere 的演示服务器 (cors-anywhere.herokuapp.com) 旨在展示该项目。但是，滥用行为已经变得如此普遍，以至于托管演示的平台 (Heroku) 已要求我关闭服务器，尽管我们采取了一些措施来应对滥用行为（例如在 #45 和 #164 中设置速率限制，并阻止其他形式的请求）。由于滥用和其受欢迎程度，停机时间越来越频繁（例如最近的#300、#299、#295、#294、#287）。

为了应对这种情况，我将做出以下更改：

1. 速率限制将从每小时 200 次（#164）降至每小时 50 次。
2. 到 2021 年 1 月 31 日，cors-anywhere.herokuapp.com 将停止作为开放代理服务器。
3. 从 2021 年 2 月 1 日起，cors-anywhere.herokuapp.com 将仅在访问者完成挑战后提供服务：用户 (开发人员) 必须访问 cors-anywhere.herokuapp.com 上的页面以暂时解锁其浏览器上的演示。这使开发人员可以尝试功能，帮助决定是否自主托管或寻找替代方案。

- Pedro Lobito

---

截至2020年，crossorigin.me似乎已经永久关闭。对我而言，如果我使用https://cors-anywhere.herokuapp.com代替crossorigin.me，同样的解决方案也可以工作。 - Mitchell van Zuylen

我不明白为什么要使用这个具体的地址：https://cors-anywhere.herokuapp.com，请问还有其他可选的地址吗？谢谢。 - Eduardo Gutierrez

不，它需要使用那个，因为它是专门用来绕过 CORS 的。https://cors-anywhere.herokuapp.com/ - Pedro Lobito

这个想法是fork这个项目并托管您自己的cors-anywhere实例，而不是攻击作者的服务器。 如果您有Heroku账户，并遵循存储库中的说明，那么它几乎可以零代码一键部署。 - ggorlen

Answer 2

gman的评论和Dale的回答都是正确的。我强烈建议在你对它们进行投票或忽视之前，花时间理解他们的意思。

CORS代表跨域资源共享，基本上它允许或防止一个站点上的JavaScript访问另一个站点上的内容。快速谷歌搜索“JavaScript CORS”或只搜索“cors”会给你提供大量信息，你应该仔细阅读。

因此，如果你遇到CORS错误，这意味着持有你的图像的站点不允许持有你的代码的站点访问该图像。在你的情况下，看起来你正在从一个file: URL加载内容，这不是从服务器加载的。这就是错误中Origin null部分的含义。

所以，第一步是听取gman的评论，并从本地Web服务器运行你的草图，而不是使用file: URL。他的评论已经包含了说明如何做到这一点的链接，或者你可以使用P5.js网络编辑器或CodePen或任何其他基本的Web主机。

最常见的设置是将图像文件包含在与代码相同的服务器中，因此这应该就是您需要做的全部。但是，如果您将图像存储在与代码不同的URL上，则第二步是按照Dale的答案设置您的图像服务器，以允许从代码服务器发出请求。

- Kevin Workman

Answer 3

CORS代表跨域资源共享。默认情况下，WebGL会阻止任何来自外部源的资源（图片、纹理等）。WebGL认为本地资源来自外部源。

您可以通过使用img.crossOrigin = ""; 来绕过这个限制。 我不是一个WebGL专家，所有这些信息都是从这里找到的。

- Dale

---

谢谢您的回复；然而，这是用p5.js编写的，它是JavaScript的一个库，那段代码不能用于我正在做的事情。不过这确实有助于我找到解决方案。 - Randy Matinee

Answer 4

如果你想在P5中加载本地图像，可以使用canvas的drawImage()函数而不是P5.js的image()函数。

let img;

function setup() {
    createCanvas(windowWidth,windowHeight);
    img = new Image();
    img.src = "assets/smiley.png";
}

function draw() {
    drawingContext.drawImage(img,mouseX,mouseY);
}

- Best of Best