Chrome 使用 Pixi.js 加载精灵答案

【问题标题】：Chrome loading sprites with Pixi.jsChrome 使用 Pixi.js 加载精灵
【发布时间】：2017-06-05 21:32:54
【问题描述】：

Chrome 版本 55.0.2883.95 似乎无法使用 Pixi.js 加载精灵。但是，Firefox 50.1.0 版似乎可以正常使用以下脚本。

代码：

<!doctype html>
<meta charset="utf-8">
<body>
<script src="pixi.js"></script>
<script>

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

PIXI.loader.add("cat.png").load(setup);

function setup() {
  var cat = new PIXI.Sprite(PIXI.loader.resources["cat.png"].texture);

  stage.addChild(cat);

  renderer.render(stage);
}
</script>
</body>

文件夹：

Pixi.js
cat.png
index.html

Chrome 错误：

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/konradwright/Desktop/SO12017/cat.png may not be loaded.
    at Texture.upload (file:///Users/konradwright/Desktop/SO12017/pixi.js:1911:9)
    at TextureManager.updateTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:16440:27)
    at WebGLRenderer.bindTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:17108:33)
    at SpriteRenderer.flush (file:///Users/konradwright/Desktop/SO12017/pixi.js:21351:35)
    at WebGLRenderer.render (file:///Users/konradwright/Desktop/SO12017/pixi.js:16896:30)
    at setup (file:///Users/konradwright/Desktop/SO12017/index.html:18:12)
    at MiniSignal.dispatch (file:///Users/konradwright/Desktop/SO12017/pixi.js:7068:18)
    at Loader._onComplete (file:///Users/konradwright/Desktop/SO12017/pixi.js:5414:25)
    at file:///Users/konradwright/Desktop/SO12017/pixi.js:5451:24
    at next (file:///Users/konradwright/Desktop/SO12017/pixi.js:6610:17)

【问题讨论】：

标签： javascript image google-chrome sprite pixi.js

【解决方案1】：

一般来说，出于安全原因，您can't load local files asynchronously in Chrome。

相反，您需要运行本地服务器来提供文件。

我个人使用Node.js 和http-server 模块。它非常易于使用。只需安装 Node.js，然后打开命令提示符。运行

npm install -g http-server

安装 http-server 模块。如果您有权限问题，请尝试

sudo npm install -g http-server

之后，转到您要在其中提供网站的文件夹 (cd path/to/project/folder)。运行

http-server

它将开始在http://127.0.0.1:8080 又名http://localhost:8080 运行服务器。将其输入浏览器即可。

还有许多其他的服务器解决方案，但这个几乎不需要任何工作。

【讨论】：

谢谢迈克。你的指导很好，我什至做了一个图片教程。然而，我遇到了一个障碍。指示未能完成要求他们完成的任务。你能帮我复习一下吗？ imgur.com/a/xIntM
@KonradWright 在我看来是一个典型的权限错误。试试sudo npm install -g http-server。
谢谢迈克！您能否更新您的答案以反映这些变化？

【解决方案2】：

可能有效的简单解决方案是“Web Server for Chrome”应用程序。您启动它，选择希望使用的文件夹并转到 URL（例如您选择的 127.0.0.1:port）

这是一个简单的服务器，不能使用 PHP，但对于简单的工作，可能是您的解决方案：

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

【讨论】：