Question

我的Chrome版本为31.0.1650.57

我正在学习THREE.js并从https://github.com/jeromeetienne/threex.planets/

下载了一个行星样本

但是当我运行earth.html

时

标题上写着一个奇怪的错误：

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

我查看了代码并找到了可能与此错误相关的内容：

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

但我不知道如何修复它，我对javascript相对较新，

希望有人能帮助我！

非常感谢！

Answer 1

您是在本地文件系统上运行它（双击html文件）还是在Web服务器上运行它？如果在Web服务器上运行它，则应避免跨源权限问题。（这是Chrome等浏览器的安全功能。）

Answer 2

我通过安装Node.js并运行本地服务器来打开这个html来解决这个问题！

Answer 3

在图片代码中使用crossOrigin="anonymous"，如下所示。

<img src="SOMETHING" crossOrigin="anonymous" /＆GT;

Answer 4

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'

Answer 5

我知道问题是您需要在服务器环境中运行您的项目或Three.js示例，就像上面的答案在节点js或Appserv中运行您的代码这些本地服务

THREE.js：跨源资源共享策略拒绝跨源图像加载

5 个答案: