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.

这是什么错误信息？这是什么意思？如何加载图像？

Answer 1

gman的评论和Dale的回答都是正确的。我强烈建议您在投票或解雇之前花时间准确理解他们所说的内容。

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

因此，如果您收到CORS错误，则表示保留您图片的网站不会让保存您代码的网站访问该图片。在您的情况下，您似乎正在从file:网址加载内容，这是从服务器加载的不。这就是错误Origin null部分的含义。

因此，第一步是听取gman的评论并从本地网络服务器运行草图而不是使用file: URL。他的评论已包含解释如何执行此操作的链接，或者您可以使用the P5.js web editor或CodePen或任何其他基本网络托管服务商。

最常见的设置是将图像文件包含在与代码相同的服务器中，因此这几乎应该是你需要做的。但是，如果您将图像存储在与代码不同的URL中，则第2步是遵循Dale的答案并设置图像服务器以允许来自代码服务器的请求。

Answer 2

虽然以下内容并未直接回答OP问题，但它可以帮助像我这样的其他人在此处搜索 P5.JS CORS 。

要绕过 CORS限制，只需在URL之后添加阻止 https://crossorigin.me/，即：

var = 'https://crossorigin.me/http://blocked.url'

P5.JS示例：

让我们假设您要使用P5.JS来自未启用CORS的服务器加载远程mp4视频（可以是任何文件类型），对于这些情况，您可以使用：

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

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

Answer 3

CORS代表Cross-origin resource sharing。默认情况下，WebGL将阻止来自任何外部源的任何资源（图像，纹理等）。 WebGL认为本地资源来自外部。

您可以使用img.crossOrigin = "";绕过此我不是webGL的专家，所有这些信息都被发现here

Answer 4

如果要在P5中加载本地图像，可以使用画布的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);
}

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

4 个答案: