36

我正在对将图像加载到画布中进行一些测试，并在我们的 aws cdn 上使用私有托管的图像。这个 cdn 有一个 CORS 策略，可以让我将图像加载到画布中。

我想通过 github、jsbin 等公开分享我的代码，但需要托管一两个具有自由 CORS 政策的图像。有没有我可以使用的图像？谷歌和谷歌图片搜索没有出现任何问题。

4

2 回答 2

41

我通常将http://imgur.com/用于图像（与 SO 用于其内联图像的站点相同） - 无需注册，只需上传或粘贴图像链接即可开始使用。

它支持 CORS 要求，因此您可以直接链接并将其与画布一起用于像素提取。

如果除了图像之外您还需要托管不同的文件，我会建议 DropBox 像 markE 那样。

然而，有限制，与任何免费服务一样，包括。ImgUr 和 DropBox，因此请务必在使用链接之前阅读使用条款 (ToS)（即，它们都不打算用作 CDN，因此您可能需要查看一些商业 CDN 提供商）。

启用 CORS 使用

如果允许，您可以在 JavaScript 中执行此操作 - 在设置 src 之前设置 crossOrigin：

var img = new Image();
img.crossOrigin = "";  // or "anonymous", will be interpreted the same
...
img.src = "...";

作为 HTML 标签的属性（顺序无关紧要）：

<img crossOrigin="" src="" ...>

测试

var img = new Image();
img.crossOrigin = "";
img.onload = test;
img.src = "https://i.imgur.com/fHyEMsl.jpg";

function test() {

  var ctx = document.querySelector("canvas").getContext("2d");
  ctx.drawImage(this, 0, 0);
  
  // This will fail if no CORS support, otherwise all OK
  try {
    ctx.getImageData(0, 0, 10, 10);
    alert("All OK");
  } 
  catch(err) {
    alert("No CORS support...");
  }
}
<canvas></canvas>

于 2013-11-07T00:08:23.540 回答
0

在 dropbox.com 上开设一个帐户。

将一些您有权访问的图像放入您的公用文件夹中。

Dropbox 公用文件夹以符合 CORS 的方式托管图像，因此它们是可公开共享的。

您可以通过右键单击该图像来获取公共图像的可共享链接。

祝你的项目好运！:)

于 2013-11-06T22:30:38.640 回答