Sign in to follow this  
Iszard

pixelPerfectOver causing 'cross-origin'

Recommended Posts

Hey Phaser's,

I'm having a problem were I am setting up input events on a sprite and if I turn on pixelPerfectOver then I get a nasty crash when I touch the sprite:

"Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data."

This does not happen with loading assets, so its not a loading issue which all web search results of this error indicate. My access is given in htaccess file. There is no problem if I turn pixelPerfectOver off. The pixelPerfectOver setting is the source of this issue. The following example is modified from my source to cut out the unrelated fat.

function PurchaseView() {
    this.purchaseCmp_group = game.add.group();

    var i, iTot,
        bPosX = [35, 265, 35, 265],
        bPosY = [75, 75, 305, 305],
        cBtn;

    iTot = bPosX.length;
    for (i=0;i<iTot;i++) {
        cBtn = game.add.sprite(bPosX, bPosY, 'BuyCards', 'BuyCard'+(i+1)+'.png', this.purchaseCmp_group);
        cBtn.inputEnabled = true;
        cBtn.input.pixelPerfectOver = true;  // <-- commenting out this line will remove the error
        cBtn.input.useHandCursor = true;

        cBtn.events.onInputUp.add(this.btnUp, this);

        this.cardSelAr.push(cBtn);
    }
};
PurchaseView.prototype.btnUp = function(sprite, pointer, isOver) {
    if (isOver) {
        console.log('Correctly Touched');
    }
};

Share this post


Link to post
Share on other sites

So I can load and display the image but i don't have permission to pixelPerfectOver it? Please explain.

 

Also please read the question as I stated that  Access-Control-Allow-Origin "*" was already set

Share this post


Link to post
Share on other sites

Resolve the issue by adding :

this.load.crossOrigin = 'Anonymous';

To the create: function() {} of my first state. "Boot.js" as per the Phaser Game Template for anyone using that.


 

Share this post


Link to post
Share on other sites

The server I was using was a local Vagrent - VM - Ubuntu running apache, However the issue was resolved, it's actually buried in the phaser.js plugin in the comments about the issue and the resolution steps. Just posting the resolution for ease of future devs

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.