跨源安全错误

Question

我正在尝试制作一个用户脚本，让玩家可以在本地浏览器上显示他的玩家的自定义风格。 returns 游戏中的 flair 纹理制作 canvas 的函数，它获取包含所有 flair 的 flair 图像的正确部分，然后从中制作 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);

跨源安全错误

Cross origin security error

javascript

jquery

cross-domain

webgl

html5-canvas