WebGL自学课程(6):WebGL加载跨域纹理出错Uncaught Error: SECURITY_ERR: DOM Exception 18

来源：互联网发布：中国传媒大学数据新闻编辑：程序博客网时间：2024/04/28 11:31

最近在学习WebGL，用图片对WebGL进行纹理贴图，其中图片是从其他网站跨域获取的，

image.src = "http://otile1.mqcdn.com/tiles/1.0.0/osm/"+level+"/"+column+"/"+row+".jpg";

用Chrome 22运行网页，每次在执行到gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);时就会出现错误：Uncaught Error: SECURITY_ERR: DOM Exception 18。

如果把图片换成本地的图片就不会有问题，后来发现是跨域的原因导致的。Chrome13和Fifefox5版本以后就增加了安全性，跨域获取图片受到了限制，解决方案就是设置image的crossOrigin属性为空，修改后的代码如下：

image.crossOrigin = '';//很重要，因为图片是跨域获得的，所以一定要加上此句代码image.src = "http://otile1.mqcdn.com/tiles/1.0.0/osm/"+level+"/"+column+"/"+row+".jpg";

问题解决，参考http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html