在Firefox以及Chrome中，现在可以将跨域图像加载到WebGL纹理中，前提是它们已获得CORS的批准。

最显著的是，此功能允许进行令人印象深刻的3D映射应用程序，例如Google MapsGL和诺基亚地图3D。

发生了什么

今年早些时候，WebGL规范编辑草案针对安全问题进行了更新。新增内容包括：

1. 一个强制性条款，禁止在一般情况下将跨域元素用作WebGL纹理。
2. 一个非规范性条款，专门允许具有CORS批准的跨域元素。为此，<img>元素的HTML规范进行了更新，添加了一个新的crossorigin属性。

第一个在Firefox 5中实现，第二个现在在Firefox 8中实现。

如何使用此功能

有两种CORS模式：“anonymous”（匿名）和“use-credentials”（使用凭据）。我们将重点关注“anonymous”，因为它是常见情况。Google Maps影像是一个使用匿名CORS提供图像的绝佳示例，例如：

http://khm0.googleapis.com/kh?v=95&x=0&y=0&z=0

为了将其作为WebGL纹理使用CORS加载，我们在其上设置crossOrigin属性

var earthImage = new Image();
earthImage.crossOrigin = "anonymous";

现在我们像往常一样加载它

    earthImage.onload = function() {
      // whatever you usually to do load WebGL textures
    };
    earthImage.src = "http://khm0.googleapis.com/kh?v=95&x=0&y=0&z=0";

就是这样！除了设置crossOrigin属性之外，我们无需执行任何其他操作。这是一个完整的自包含示例。

HTTP头

如果我们研究此图像的HTTP头（例如，使用Firefox的Web控制台），我们会发现请求头包含

Origin: null

这是在img元素上设置此crossOrigin属性的效果。并且响应头包含

Access-Control-Allow-Origin: null

这是服务器支持此文件CORS的效果。

在HTML中执行此操作

当然，也可以在HTML中设置此属性，在这种情况下，它不区分大小写

<img src="http://khm0.googleapis.com/kh?v=95&x=0&y=0&z=0" crossorigin="anonymous">

并且由于“anonymous”是crossorigin属性的缺失值默认值和无效值默认值，因此我们可以为其传递任何无效值，甚至可以省略其值

<img src="http://khm0.googleapis.com/kh?v=95&x=0&y=0&z=0" crossorigin>

即将推出：Canvas 2D drawImage的CORS批准

如果首先将CORS批准的跨域图像绘制到2D
画布上，然后使用该画布作为WebGL纹理的源？这
个好消息是，这将在Firefox 9中起作用，Firefox 9即将进入Beta
通道。此修复意味着像这样的演示将在Firefox 9中运行得非常
好。