将 Google Drive 中的图像加载到 HTML Canvas 会导致 Canvas 被污染

Question

当我像这样从 Google Drive 将图像加载到画布中时：

var folderID = "0B5Oh0J4bIygXUVNCa3JOVlc1WU0";
var sprt = new Image();
sprt.src = 'https://googledrive.com/host/' + folderID + '/ground1.png';

当我尝试在画布上渲染此图像时，我收到一条错误消息，指出由于跨源错误，画布已被污染。有没有办法让我从 Google Drive 加载图片？

我设置了以下，但是还是不行：

sprt.crossOrigin = "Anonymous";

包含该文件的文件夹也设置为公共访问。

Answer 1

您需要在存储桶上设置 CORS 配置，其中包含您希望与之共享存储桶的所有来源，以及您希望在该存储桶上允许的请求方法。

您必须有一个服务器托管具有适当的 Access-Control-Allow-Origin 标头的图像。添加 crossOrigin 属性会生成请求标头。

这里是示例code。