使用Pixi.js加载Chrome精灵-前端问题

Chrome loading sprites with Pixi.js(使用Pixi.js加载Chrome精灵)

本文介绍了使用Pixi.js加载Chrome精灵的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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)