Failed to execute ‘texImage2D‘ on ‘WebGLRenderingContext‘: The image element contains cross-origin

Uncaught DOMException: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The image element contains cross-origin data, and may not be loaded.

解决方法1：
将图片转换为Base64编码，直接有效。可通过以下地址进行在线转换。

http://www.jq22.com/demo/baseToImage201807250139/
可直接将您代码调用图片的地方修改如：

var texture = THREE.ImageUtils.loadTexture(‘cloud10.png’);
修改后

var texture = THREE.ImageUtils.loadTexture('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7O+Lm6Pj5+f39/f39/dzh49HY2v39/dXb3v7//9fd3/n5+tjd4P///9fd3/X299fc3+vt7s7V2NXb3vP09fn5+vP09ejs7ebp69Xb3ens7uLm6Nbc3tjd4OLm6Nfc39bc3t+95aqGH30n7VWuFX644aVYPtv9z85iUYJRSzza9huaHb/o5fCPKOGlUznqkUa1hPTT15nrrAfh5CLpoe/h8lYELNYZqBdQAAAABJRU5ErkJggg==');

    
    

    
    
1

解决方法2：

直接对浏览器进行调整，下面以chrome浏览器为例

chrome跨域修改

–disable-web-security，我们在目标中添加上这一句就可以了记得中间有一个空格，然后关上浏览器，重新手动打开输入地址，（我的是本地文件html直接拖放进入，不要使用dw快捷F12打开，第一次无效，我也不知道为什么）问题解决 （具体可参照图片附1），同时附上问题的原因：

1. 首先没有服务器环境（如：本地的 html网页，操作本地的图片），

   就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。

   因为本地测试用的图片是文件夹内的，js跨域限制是不能获取非同一域名下的数据的，

   而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。

2. 为了阻止欺骗，浏览器会追踪 image data。

   当把一个和canvas的域不同的图片放到canvas上，这个canvas就成为 “tainted”(被污染的)，浏览器就不让你操作该canvas 的任何像素。

链接: [http://www.jq22.com/web-skill78]

解决方法3：
首先第一步打开iis搭建本地服务器。
参考http://jingyan.baidu.com/article/2a138328ae4b85074b134f55.html
我的电脑是win10是可以成功运行起来的
接着在开始菜单搜索栏搜索iis 打开管理器
DOMException: Failed to execute texImage2D on WebGLRenderingContext: Tainted canvases may not be loaded.问题解决 - 违规用户 - 违规用户的博客
然后右键网站添加应用程序查找你所有部署网站的文件文件夹。（注意把你的主页文件改为index.html）

DOMException: Failed to execute texImage2D on WebGLRenderingContext: Tainted canvases may not be loaded.问题解决 - 违规用户 - 违规用户的博客
然后右键管理应用程序 浏览，即可在默认的浏览器打开你的网页，
然后去你网页中的代码
DOMException: Failed to execute texImage2D on WebGLRenderingContext: Tainted canvases may not be loaded.问题解决 - 违规用户 - 违规用户的博客

注意：1.html 是你创建iis的时候的别名
一切确定之后刷新就可以啦！
成功的完成了纹理的渲染

作者：shy_1207
链接：https://www.jianshu.com/p/db8f11f1f32c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
链接: [linkhttps://www.jianshu.com/p/db8f11f1f32c]