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!

https://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... — GuyGood, Nov 24 '13 at 14:30
Yea I've fixed this by running a local server with Node.js, thanks a lot! — Wang Liang, Nov 28 '13 at 18:52

score 5 · Answer 1 · answered Nov 27 '13 at 14:12

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.)

score 3 · Accepted Answer · answered Nov 28 '13 at 18:53

3

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

answered Nov 28 '13 at 18:53

Wang Liang

941
2
15
34

score 3 · Answer 3 · answered Jun 26 '15 at 16:12

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'

answered Jun 26 '15 at 16:12

Michael Saunby

71
1

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 http://stackoverflow.com/help/how-to-answer, using that link as a reference can greatly help the visibility and clarity of your answer. – Newd Jun 26 '15 at 17:26

score 2 · Answer 4 · answered Jan 09 '14 at 01:40

2

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

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

answered Jan 09 '14 at 01:40

heshanlk

333
3
9

1

Unfortunately, that wouldn't work with loading images through javascript. That's how it works when loading images via javascript, for WebGL. – Hans Sjunnesson Jan 12 '14 at 20:56

score 0 · Answer 5 · answered Apr 24 '14 at 02:01

0

I konw that problem is you need to run your project or the Three.js example in server environment,like the above answer run your code in nodejs or Appserv these local serve

answered Apr 24 '14 at 02:01

Lanz

59
6

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

5 Answers5