WebGL && jsFiddle - Bild wird nicht

Question

heruntergeladen Ich versuche, mit WebGL auf jsFiddle zu arbeiten, aber ich bin nicht in der Lage, ein Bild in Code herunterzuladen und zu verwenden. Alles funktioniert gut, Seite mit meinem Beispiel auf localhost ausgeführt, aber jsFiddle akzeptiert kein Bild. Ich würde gerne meinen Code online zu teilen, aber ich bin nicht in der Lage ..

Dies ist, wie ich Bild in Skript herunterzuladen bin:

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

There Beispiel mit meinem Problem.
Sie haben keine Ahnung, wie Sie es lösen können, bitte?

Answer 1

WebGL erfordert CORS (Cross-Origin Ressourcenfreigabe) Berechtigungen für Bilder, weil Ihr Bild nicht vom selben Ursprung ist. Mit anderen Worten das Bild ist nicht von jsfiddle.net es ist von s29.postimg.org

Ob Sie es lösen können, ist bis zum Server des Bildes. In diesem Fall s29.postimg.org. Es muss die Erlaubnis geben, das Bild zu verwenden.

Sie müssen auch diese Berechtigungen anfordern.

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

hinzufügen Wenn es immer noch nicht postimg.org funktioniert dann die Erlaubnis nicht nicht geben.

versuchen Lassen Sie hier

[ 
 
    "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); 
 
}

Aus dem obigen Test es postimg.org erscheint nicht über die Berechtigung geben, aber beide imgur.com und flickr.com tun.

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