javascript - 跨源安全错误

Question

我正在尝试制作一个用户脚本，允许玩家在本地浏览器上显示他的玩家的自定义风格。游戏中返回天赋纹理的函数会创建一个 Canvas ，获取包含所有天赋的天赋图像的右侧部分，然后从中生成 PIXI 纹理。每当我尝试将自己的 PIXI 纹理分配给播放器(其来源是 imgur 上的图片)时，我都会收到错误:

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

有人知道是否有办法解决这个问题吗？

上下文:这是天赋纹理函数:

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
}

其中 $("#flair").get(0) 只是一个图像，其来源来自实际游戏网站 ( http://static.koalabeast.com/images/flair.png )。

Answer 1

尝试一下:

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