首页 > 解决方案 > 如何在不遇到 CORS 问题的情况下托管 PIXI.js 可以访问的图像?

问题描述

我一直在使用 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 创建图像,但我还没有找到从绘制的图形创建精灵的方法。 在不会遇到 CORS 相关问题的 PIXI.js 上托管图像的最佳方式是什么?

标签: javascriptgraphicspixi.js

解决方案


我相信您需要使用渲染器中的 .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));

推荐阅读