如何在WebGL画布中绘制Facebook个人资料图片以避免跨域安全问题？

我正在尝试用HTML5编写一个Facebook游戏，最近Chrome的安全性发生了变化，禁止在WebGL画布上绘制任何跨域图像。我不是WebGL方面的专家，我希望有某种方法可以做到这一点，但我忽略了这一点

例如，是否可以同时使用2D画布和WebGL 3D画布？这是我绕过这个问题的一种方法

以下是一些更详细的信息：

在我的游戏中，我想从Facebook上绘制用户的个人资料图片。这张照片很容易在网上找到http://graph.facebook.com/[用户名]/图片。但是，这被标记为跨域图片，因此不允许将此图像用作WebGL纹理

以下是导致错误的代码的简化版本：

var anImage = new Image();
anImage.src = "http://graph.facebook.com/notreallytheusername/picture";

。。。等待图像加载

var texture = gGL.createTexture();
gGL.bindTexture(gGL.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, anImage);

上面的最后一行导致安全DOM异常

---

有什么建议可以避免这种情况吗？如何在高性能WebGL游戏上绘制Facebook照片？

除非提供图像的网站在响应中通过CORS标题选择跨来源请求（Facebook不这样做），否则您将无法绘制照片。而且，这种行为并非特定于Chrome；这是法律要求的。您可以找到有关中更改的原因和影响的更多信息