公开托管的图像与自由CORS政策？ [英] publicly hosted image with a liberal CORS policy?

问题描述

我正在做一些测试，将图像加载到画布上，并使用一个私有托管的图像在我们的aws cdn。这个cdn有一个CORS政策，让我将图片加载到画布上。

I am doing some testing on loading images into canvas, and am using a privately hosted image on our aws cdn. This cdn has a CORS policy which lets me load the image into the canvas.

我想公开 github，jsbin等，但需要托管一个或两个与自由CORS政策。有没有我可以使用的图像？ Google和Google图片搜索没有提升任何内容。

I would like to publicly share my code with the world via github, jsbin, etc., but need to host an image or two with a liberal CORS policy. Is there an image out there which I could use? Google and Google Image search are not turning anything up.

推荐答案

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

I usually use http://imgur.com/ for images (same site as SO uses for their inline images) - no sign up required, just upload or paste in an image link and you're ready to go.

它支持CORS的要求，所以你可以直接链接和使用它与画布的像素提取。

It support CORS requirement so you can link directly and use it with canvas for pixel extraction.

如果你需要托管不同的文件除了图像I将建议Dropbox作为markE。

If you need to host different files in addition to image I would suggest DropBox as markE does.

但是，有任何免费服务，包括限制。 ImgUr和DropBox，所以一定要阅读使用条款（ToS）使用链接之前（即，他们没有意图作为CDN，所以你可能想检查一些商业CDN提供商）。

There are restriction however, as with any free service incl. ImgUr and DropBox, so be sure to read the Terms (ToS) of use before using the links (ie. none of them intent to function as a CDN so you might want to check out some commercial CDN providers).

如果允许，您可以在设置src之前设置crossOrigin：

If allowed you can do this in JavaScript - set crossOrigin before setting src:

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

HTML标记的As属性（顺序无关紧要）：

As attribute for HTML tag (order doesn't matter):

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

测试

Test

var img = new Image();
img.crossOrigin = "";
img.onload = test;
img.src = "http://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>

这篇关于公开托管的图像与自由CORS政策？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！