启用CORS使用

Question

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

我想公开通过github，jsbin等与世界分享我的代码，但需要使用自由CORS策略托管一两个图像。那里有我可以使用的图像吗？ Google和谷歌图片搜索没有任何改变。

Answer 1

我通常会将http://imgur.com/用于图片（与内嵌图片使用的SO相同） - 无需注册，只需上传或粘贴图片链接就可以了。

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

如果您需要托管除图像之外的其他文件，我建议使用DropBox作为标记。

但是，有任何免费服务包括限制。 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>

Answer 2

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

将您有权使用的一些图片放入公用文件夹。

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

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

祝你的项目好运！：）

公开托管的图像与自由CORS政策？

2 个答案:

启用CORS使用

测试