THREE.js: Cross-origin image load denied by Cross-Origin Resource Sharing policy

Question

My Chrome version is 31.0.1650.57

I'm learning THREE.js and downloaded a planet sample from https://github.com/jeromeetienne/threex.planets/

But when I run the earth.html

a strange error happens as the title says:

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

I looked through the code and find something that might be related to this error:

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

But I don't know how to fix it, I'm relatively new to javascript,

hope someone would help me out!

Thanks a ton!

Solution 1

I fixed this problem by installing Node.js and running a local server to open this html!

Solution 2

Are you running this on a local filesystem (double-clicking the html file) or are you running it on a web server? If you run it on a web server you should avoid the cross-origin permission problems. (This is a security feature of browsers such as Chrome.)

Solution 3

Something like this should fix it.

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'

Solution 4

Use crossOrigin="anonymous" in your image tag as below.

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

View more solutions

Comments

[GuyGood]

github.com/mrdoob/three.js/wiki/How-to-run-things-locally does this help? You need a local server to run texture loading examples locally...

[Hans Sjunnesson]

Unfortunately, that wouldn't work with loading images through javascript. That's how it works when loading images via javascript, for WebGL.

[Newd]

Can you provide some context to your answer, that way future readers can learn how to apply it to their issues and not just in this situation. I also highly recommend taking a read through stackoverflow.com/help/how-to-answer, using that link as a reference can greatly help the visibility and clarity of your answer.