web-dev-qa-db-ja.com

リベラルなCORSポリシーで公的にホストされている画像？

画像をキャンバスにロードするテストをいくつか行っており、aws cdnでprivatelyホスト画像を使用しています。このcdnには、画像をキャンバスにロードできるCORSポリシーがあります。

publicly github、jsbinなどを介してコードを世界と共有したいのですが、寛大なCORSポリシーで1つまたは2つのイメージをホストする必要があります。使用できる画像はありますか？グーグルとグーグル画像検索は何も上に向けていません。

htmlimagecanvascors
25
jedierikb

私は通常、画像に http://imgur.com/ を使用します（SOインライン画像に使用）と同じサイト）-サインアップは必要ありません。アップロードするか貼り付けるだけです画像リンクであなたは行く準備が整いました。

CORS要件をサポートしているため、直接リンクして、キャンバスでピクセル抽出に使用できます。

画像に加えてさまざまなファイルをホストする必要がある場合は、markEと同じように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>
28
user1693593

Dropbox.comでアカウントを開きます。

権限のあるいくつかの画像をパブリックフォルダーに入れます。

Dropboxパブリックフォルダーは、CORS準拠の方法でイメージをホストするため、パブリックに共有できます。

画像を右クリックすると、その画像への共有可能なリンクを公開できます。

プロジェクトで頑張ってください！ :)

1
markE