0

I try to work on a canvas with pixi.js in my local environment. But when I want to work with any image I have the "access-control-allow-origin" error message.

In my domain it work greate : https://guillaumeduclos.fr/ripple-effect

I have this message in local :

enter image description here

In my code when I load the images, I put the crossOrigin: ' ' line but it don't work again.

My code : 

<!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>

I don't know what can I do more to resolve this ? Thank you for your help.

Guillaume
  • 1,500
  • 3
  • 24
  • 33
  • Possible duplicate of [Deadly CORS when http://localhost is the origin](https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin) – Helder Sepulveda Aug 18 '18 at 15:31
  • you can tell by the errors (the urls start with file://) that he is not on localhost. He's just loading an html file in the browser – ZeWebDev Aug 18 '18 at 15:35

1 Answers1

0

Making an ajax request (which is what pixijs is trying to do) only works if youre using an http server. It wont work with just an html file, and thats why it works on your domain. So you need to have a local server for testing.

ZeWebDev
  • 194
  • 8