webGL && jsFiddle - 画像がダウンロードされていません

Question

jsFiddleでwebGLを使用しようとしていますが、コードで画像をダウンロードして使用することができません。すべてがローカルホスト上の私の例ではうまく動作しているページで動作しますが、jsFiddleはイメージを受け付けていません。

var image = document.createElement("img"); 
image.src = "http://s29.postimg.org/ct644q1dz/sp_dom1.jpg"; 
image.onload = function() { 
     // some magic :P 
     ... 
}; 

There私の問題を例です。これは私がスクリプトにイメージをダウンロードしていることはどのようにある

..私は、オンラインで自分のコードを共有するのが大好きだが、私はすることはできませんよ。
解決方法はありませんか？

Answer 1

WebGLには画像が同じ起点からのものではないため、CORS（クロスオリジンリソース共有）のアクセス許可が必要です。言い換えれば、画像はjsfiddle.netからではありません。s29.postimg.org

あなたが解決できるかどうかは、画像のサーバーによって決まります。この場合s29.postimg.org。それは画像を使用する許可を与えなければならない。

また、これらのアクセス許可を要求する必要があります。それはまだ許可を与えるものではありません、その後postimg.org動作しない場合は

image.crossOrigin = ""; // added 
image.src = ... 

を追加します。

のパーミッションが、両方imgur.comとflickr.com行いを与えるものではありません、それはpostimg.orgを表示されます上記の試験から、ここ

[ 
 
    "https://s29.postimg.org/ct644q1dz/sp_dom1.jpg", 
 
    "https://i.imgur.com/lsQoyEIm.png", 
 
    "https://c2.staticflickr.com/2/1638/26142586042_8815f263b7.jpg", 
 
].forEach(loadImage); 
 
    
 
function loadImage(url) { 
 
    var image = document.createElement("img"); 
 
    var hostname = (new URL(url)).hostname; 
 
    image.crossOrigin = ""; 
 
    image.src = url; 
 
    image.onload = function(e) { 
 
    log("**CAN** use image " + e.target.src + 
 
     ". Permission given by " + hostname); 
 
    }; 
 
    image.onerror = function(e) { 
 
    log("can **NOT** use image '" + e.target.src + 
 
     "'. Permission not given by " + hostname); 
 
    } 
 
} 
 

 
function log(msg) { 
 
    var elem = document.createElement("p"); 
 
    elem.appendChild(document.createTextNode(msg)); 
 
    document.body.appendChild(elem); 
 
}

を、それを試してみましょう。

https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/