如何在不遇到 CORS 问题的情况下托管 PIXI.js 可以访问的图像？答案

【问题标题】：How to host image that can be accessed by PIXI.js without running into CORS issue?如何在不遇到 CORS 问题的情况下托管 PIXI.js 可以访问的图像？
【发布时间】：2020-07-29 21:45:46
【问题描述】：

我一直在使用 PIXI.js 创建一个基本游戏。当我尝试在远程位置玩游戏时，我遇到了一个基于 CORS 的问题：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the
remote resource at http://example.com/myimage.png.
(Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我已通过在外部和本地计算机上托管图像来尝试此操作。

作为一种解决方法，我一直在尝试使用 PIXI 库使用 javascript 创建图像，但我还没有找到从绘制的图形创建精灵的方法。 在 PIXI.js 上托管不会遇到 CORS 相关问题的图像的最佳方式是什么？

【问题讨论】：

标签： javascript graphics pixi.js

【解决方案1】：

我相信您需要使用渲染器中的 .generateTexture 方法： http://pixijs.download/dev/docs/PIXI.Renderer.html#generateTexture

如果您这样创建应用程序：var app = new PIXI.Application() 您的渲染器将位于 app.renderer
比如：

var redSquare = new PIXI.Graphics();
redSquare.beginFill(0xffffff);
redSquare.drawRect(50,50,100,100);
redSquare.endFill();
var red = new PIXI.Sprite(app.renderer.generateTexture(redSquare));

【讨论】：