Iszard Posted January 28, 2016 Share Posted January 28, 2016 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'); } }; Link to comment Share on other sites More sharing options...
Sebi Posted January 29, 2016 Share Posted January 29, 2016 Well, the error is pretty clear. The image is tainted and you don't have the permission to access the image data. You need to fix the serverside CORS headers when serving the image e.g. Access-Control-Allow-Origin "*" Link to comment Share on other sites More sharing options...
Iszard Posted January 29, 2016 Author Share Posted January 29, 2016 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 Link to comment Share on other sites More sharing options...
drhayes Posted January 29, 2016 Share Posted January 29, 2016 What webserver are you using? Apache? Is your game in an iframe? Is the canvas' parent the <body> element or something else? Link to comment Share on other sites More sharing options...
Iszard Posted January 29, 2016 Author Share Posted January 29, 2016 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. Link to comment Share on other sites More sharing options...
Iszard Posted January 29, 2016 Author Share Posted January 29, 2016 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 Link to comment Share on other sites More sharing options...
Recommended Posts