MarksCode MarksCode - 1 year ago 110
jQuery Question

Cross origin security error

I'm trying to make a userscript that allows a player to have a custom flair for his player shown on just the local browser. The function that returns the flair texture in the game makes a canvas that gets the right section of the flair image which holds all the flairs, then makes a PIXI texture out of that. Whenever I try assign my own PIXI texture to the player, whose source is a picture on imgur, I get the error:

Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

Does anybody know if there is a way to get around this?

For context: Here is the flair texture function:

tagpro.renderer.getFlairTexture = function(e, t) {
var n = PIXI.TextureCache[e];
if (!n) {
var r = document.createElement("canvas");
r.width = 16, r.height = 16;
var i = r.getContext("2d");
i.drawImage($('#flair').get(0), t.x * 16, t.y * 16, 16, 16, 0, 0, 16, 16), n = PIXI.Texture.fromCanvas(r), PIXI.TextureCache[e] = n
return n

is just an image whose source is from the actual games website (

Answer Source

Try it:

var img = $('#flair').get(0);
img.crossOrigin = "Anonymous";
i.drawImage(img, t.x * 16, t.y * 16, 16, 16, 0, 0, 16, 16);