THREE.js: Cross-origin-image laden verweigert, um Cross-Origin Resource Sharing policy

Meine Chrome version 31.0.1650.57

Ich bin lernen THREE.js und Download planet der Probe aus https://github.com/jeromeetienne/threex.planets/

Aber wenn ich das earth.html

einen seltsamen Fehler passiert, wie der Titel sagt:

THREE.WebGLRenderer 59 three.min.js:424
Cross-origin image load denied by Cross-Origin Resource Sharing policy. earth.html:1
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': the canvas has been tainted by cross-origin data. threex.planets.js:73
(anonymous function) threex.planets.js:73

Schaute ich durch den code und finden Sie etwas, das könnte im Zusammenhang mit dieser Fehlermeldung:

THREEx.Planets.baseURL  = '../'
...
map: THREE.ImageUtils.loadTexture(THREEx.Planets.baseURL+'images/earthmap1k.jpg'),

Aber ich weiß nicht, wie man es beheben, ich bin relativ neu in javascript,

hoffe jemand würde mir helfen!

Dank einer Tonne!

InformationsquelleAutor Wang Liang | 2013-11-23
  1. 5

    Laufen Sie diese auf einem lokalen Dateisystem (Doppelklick auf die html-Datei) oder sind Sie es läuft auf ein web server? Wenn Sie führen Sie es auf einem web-server, sollten Sie vermeiden, das cross-origin-Probleme mit den Berechtigungen auftreten. (Dies ist ein Sicherheitsfeature von Browsern wie Chrome.)

    InformationsquelleAutor Anselan
  2. 3

    Behob ich dieses problem durch die Installation Node.js und einem lokalen server zu öffnen Sie diese html -!

    InformationsquelleAutor Wang Liang
  3. 2

    Verwenden crossOrigin="anonymous" in Ihrem image-tag als unten.

    <img src="SOMETHING" crossOrigin="anonymous" />

    • Leider, das wird wohl nicht klappen mit dem laden der Bilder über javascript. Das ist, wie es funktioniert, wenn das laden von Bildern mittels javascript für WebGL.
    InformationsquelleAutor heshanlk
  4. 2

    Etwas wie dieses Problem beheben sollte.

    var imageObj = new Image()
imageObj.onload = function(){
 THREE.ImageUtils.loadTexture(imageObj)
 //or maybe load image into canvas?
}
imageObj.crossOrigin="anonymous"
imageObj.src = THREEx.Planets.baseURL+'images/earthmap1k.jpg'
    • Können Sie einige Rahmen für Ihre Antwort, der Weg der Zukunft können die Leser erfahren, wie Sie auf Ihre Themen und nicht nur in dieser situation. Auch ich empfehle ein Lesen durch die stackoverflow.com/help/how-to-answer, mit, dass link als Referenz kann erheblich dazu beitragen, die Sichtbarkeit und Klarheit Ihrer Antwort.
    InformationsquelleAutor Michael Saunby
  5. 0

    Ich konw, dass problem ist, dass Sie brauchen, um Ihr Projekt auszuführen, oder die Three.js Beispiel in server-Umgebung,wie die oben genannten beantworten ausführen von code in nodejs oder Appserv diese lokalen dienen

    InformationsquelleAutor Lanz
Schreibe einen Kommentar