Geek Answers Handbook

THREE.js: cross-original image upload prohibited by Cross-Origin resource sharing policy

My version of Chrome is 31.0.1650.57

I study THREE.js and download the sample planet from https://github.com/jeromeetienne/threex.planets/

But when I run earth.html

a strange error occurs when the header 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 found 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 help me!

Thank you, ton!

+7
javascript cors cross-domain canvas
source share
5 answers

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

+3
source share

Are you running this on the local file system (double-clicking on the html file) or are you using it on a web server? If you run it on a web server, you should avoid cross-origin permissions issues. (This is a security feature of browsers like Chrome.)

+5
source share

Use crossOrigin="anonymous" in the image tag, as shown below.

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

+2
source share

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'
+2
source share

I understand that the problem is that you need to run a project or Three.js example in a server environment , for example, the above answer will run your code in nodejs or Appserv of these local services

0
source share

More articles:


All Articles