Jump to content

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


nduhu
 Share

Recommended Posts

I've told you what caused it, it's up to you to figure out how to fix it, as no-one else has access to your server / PC.

 

But essentially you've an image coming in from somewhere that is tainting the canvas. Maybe locally, maybe remotely, who knows.

 

Time to get your sherlock hat on and start checking dev tools network requests / code.

Link to comment
Share on other sites

hi, 

i found the problem.
if i remove the red code , i'm not get an error again. however i'm still don't know the reason why like that. now i must remove this code, but i need use a pixel perfect for only click in painted area of image . whether i do wrong in this code or i do wrong in my method?

 

 createObject: function(x,y, figure, color, status){
         // console.log('figure :'+figure+' color : '+color);
        var comparisonObject;
        var assetFix= 'object'+color;
        //  console.log(assetFix);
        comparisonObject = this.add.sprite(x, y, assetFix);
        comparisonObject.crossOrigin = "Anonymous";
        comparisonObject.animations.add('default',[figure],20, false);
        comparisonObject.anchor.setTo(0.5,0.5);
        comparisonObject.scale.setTo(0,0);
        var comparisonObjectShadow;
        comparisonObjectShadow = this.add.sprite(x, y, assetFix);
        comparisonObjectShadow.animations.add('default',[figure+7],20, false);
        comparisonObjectShadow.anchor.setTo(0.5,0.5);
        //console.log("Anonymous");
        comparisonObjectShadow.scale.setTo(0,0);
        this.add.tween(comparisonObjectShadow.scale).to({x:1,y:1}, 300, Phaser.Easing.Linear.None, true, 0);
 
        comparisonObject.inputEnabled = true;
        comparisonObject.events.onInputDown.add(this.clickAnswer, this);
        comparisonObject.answer = status;
        comparisonObject.inputEnabled = false;
        this.add.tween(comparisonObject.scale).to({x:1,y:1}, 300, Phaser.Easing.Linear.None, true, 0);
        var tween = this.add.tween(comparisonObject).to({y:comparisonObject.position.y}, 300, Phaser.Easing.Linear.None, true, 0);
        tween.onComplete.add(this.activateObject, this);
 
        this.comparisonArray.push(comparisonObject);
        this.comparisonShadowArray.push(comparisonObjectShadow);
    },
    activateObject: function(compare, pointer){
        compare.inputEnabled=true;
        compare.input.pixelPerfectClick = true;
    },
Link to comment
Share on other sites

  • 3 months later...

It does. You just have to be running a proper development environment. You can't expect to just drag or open html files into a browser and for everything to work properly - that isn't how browsers work any more. Either serve the file through a local httpd server, or an IDE like Brackets, or a remote host. Or configure your browser to bypass all of its sandbox security settings. Then the canvas won't be tainted and pixel perfect clicks will work just fine. This is a development / local configuration issue, nothing to do with Phaser.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...