Question

我尝试在本地环境中使用pixi.js在画布上工作。但是，当我要使用任何图像时，都会出现“ access-control-allow-origin”错误消息。

在我的域中，效果很好：https://guillaumeduclos.fr/ripple-effect

我在本地收到此消息：

在我的代码中，当我加载图像时，我放置了crossOrigin：''行，但是它不再起作用。

我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>PixiJS Ripple</title>
    <script src="pixi.js"></script>
</head>
<body>
<script>
    var stage = new PIXI.Container();
    var renderer = PIXI.autoDetectRenderer(512, 512);
    document.body.appendChild(renderer.view);  

    // load assets
    PIXI.loader
        .add([{
            name: "bg",
            url: "https://guillaumeduclos.fr/ripple-effect/background.jpeg",
            crossOrigin: ''
        }])
        .add([{
            name: "map",
            url: "https://guillaumeduclos.fr/ripple-effect/map.png",
            crossOrigin: ''
        }])
        .load(setup);

    var ripples = [];

    function setup() {
        // background
        var bg = new PIXI.Sprite(PIXI.loader.resources.bg.texture);
        bg.anchor.set(0.5);
        bg.scale.set(0.6);
        bg.position.set(renderer.view.width/2, renderer.view.height/2);
        stage.addChild(bg);

        // add new ripple each time mouse is clicked
        renderer.view.addEventListener('mousedown', function(ev) {
            ripples.push(new Ripple(ev.clientX, ev.clientY));
            stage.filters = ripples.map(function(f) { return f.filter; });
        }, false);

        gameLoop();
    }

    function gameLoop() {
        requestAnimationFrame(gameLoop);

        // update ripples
        for(var i=0; i<ripples.length; i++) {
            ripples[i].update();
        }

        renderer.render(stage);
    }

    function Ripple(x, y) {
        // sprite
        this.sprite = new PIXI.Sprite(PIXI.loader.resources.map.texture);
        this.sprite.anchor.set(0.5);
        this.sprite.position.set(x, y);
        this.sprite.scale.set(0.1);
        stage.addChild(this.sprite);
        // filter
        this.filter = new PIXI.filters.DisplacementFilter(this.sprite);
    }

    Ripple.prototype.update = function() {
        this.sprite.scale.x += 0.025;
        this.sprite.scale.y += 0.025;
    }
</script>

我不知道该如何解决？谢谢您的帮助。

Answer 1

仅当您使用http服务器时，才可以进行ajax请求（pixijs试图这样做）。它不能只使用html文件，这就是为什么它可以在您的域上工作。因此，您需要有一台本地服务器进行测试。

解决PIXI.js中图像的access-control-allow-origin

1 个答案: