Failed to execute 'texImage2D' on 'WebGLRenderingContext'

... The image element contains cross-origin data, and may not be loaded. ... because the canvas has been tainted by cross-origin data"错误。

Failedtoexecute‘texImage2D‘on‘WebGLRenderingContext‘:Theimageelementcontainscross-origin 队友一直叫我撤 于 2021-04-0111:37:18 发布 4678 收藏 1 分类专栏： threejs 文章标签： javascript three.js 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/a123789999/article/details/115370447 版权 threejs 专栏收录该内容 6篇文章 0订阅 订阅专栏 UncaughtDOMException:Failedtoexecute‘texImage2D’on‘WebGLRenderingContext’:Theimageelementcontainscross-origindata,andmaynotbeloaded. 解决方法1：将图片转换为Base64编码，直接有效。

可通过以下地址进行在线转换。

http://www.jq22.com/demo/baseToImage201807250139/可直接将您代码调用图片的地方修改如： vartexture=THREE.ImageUtils.loadTexture(‘cloud10.png’);修改后 vartexture=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），同时附上问题的原因： 首先没有服务器环境（如：本地的html网页，操作本地的图片），就会报"Unabletogetimagedatafromcanvasbecausethecanvashasbeentaintedbycross-origindata"错误。

因为本地测试用的图片是文件夹内的，js跨域限制是不能获取非同一域名下的数据的，而本地的位置是没有域名的，所以浏览器都认为你是跨域，导致报错。

为了阻止欺骗，浏览器会追踪imagedata。

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

链接:[http://www.jq22.com/web-skill78] 解决方法3：首先第一步打开iis搭建本地服务器。

参考http://jingyan.baidu.com/article/2a138328ae4b85074b134f55.html我的电脑是win10是可以成功运行起来的接着在开始菜单搜索栏搜索iis打开管理器DOMException:FailedtoexecutetexImage2DonWebGLRenderingContext:Taintedcanvasesmaynotbeloaded.问题解决-违规用户-违规用户的博客然后右键网站添加应用程序查找你所有部署网站的文件文件夹。

（注意把你的主页文件改为index.html） DOMException:FailedtoexecutetexImage2DonWebGLRenderingContext:Taintedcanvasesmaynotbeloaded.问题解决-违规用户-违规用户的博客然后右键管理应用程序浏览，即可在默认的浏览器打开你的网页，然后去你网页中的代码DOMException:FailedtoexecutetexImage2DonWebGLRenderingContext:Taintedcanvasesmaynotbeloaded.问题解决-违规用户-违规用户的博客 注意：1.html是你创建iis的时候的别名一切确定之后刷新就可以啦！成功的完成了纹理的渲染 作者：shy_1207链接：https://www.jianshu.com/p/db8f11f1f32c来源：简书著作权归作者所有。

商业转载请联系作者获得授权，非商业转载请注明出处。

链接:[linkhttps://www.jianshu.com/p/db8f11f1f32c] 队友一直叫我撤 关注 关注 4 点赞 踩 1 收藏 0 评论 Failedtoexecute‘texImage2D‘on‘WebGLRenderingContext‘:Theimageelementcontainscross-origin UncaughtDOMException:Failedtoexecute‘texImage2D’on‘WebGLRenderingContext’:Theimageelementcontainscross-origindata,andm... 复制链接 扫一扫 专栏目录 Failedtoexecute'texImage2D'on'WebGLRenderingContext 叶巷的博客 05-16 1万+ "Failedtoexecute'texImage2D'on'WebGLRenderingContext"报这个错误是渲染模式的问题，应该把渲染模式转变为canvas就可以了 "renderMode":0, //"renderMode"setstherenderertype,onlyusefulonweb: //0- uni-app引入Cesium报错，Failedtoexecute‘texImage2D‘on‘WebGLRenderingContext‘ FFFKKC的博客 03-03 1847 Failedtoexecute'texImage2D'on'WebGLRenderingContext':Theimageelementcontainscross-origindata,andmaynotbeloaded 参与评论 您还未登录，请先 登录 后发表或查看评论 解决方法！：getImageDataon'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata. 热门推荐 w5167839的专栏 05-04 5万+ UncaughtSecurityError:Failedtoexecute'getImageData'on'CanvasRenderingContext2D':Thecanvashasbeentaintedbycross-origindata.  最近在自学html5CSS3很推荐李刚的这个书，今天在家里测试发现canvas中的getImageData报错 three.js:Failedtoexecute'texImage2D'on'WebGLRenderingContext解决方案 weixin_30917213的博客 11-29 4082 three.js加载图片时，出现Failedtoexecute'texImage2D'on'WebGLRenderingContext.Taintedcanvasesmaynotbeloaded.的错误 跨域安全问题。

解决办法： 1如果你用的是纹理题图：如： varloader=newTHREE.TextureLoader(); 加上： loader.... three.js在贴图时报错：DOMException:Failedtoexecute'texImage2D'on'WebGLRenderingContext dengjianma7223的博客 07-13 3709 在使用three.js给实例贴图片时报错： THREE.WebGLState:DOMException:Failedtoexecute'texImage2D'on'WebGLRenderingContext':Taintedcanvasesmaynotbeloaded. 如果你也是这报错，并且在safari中展示正常，但是chrome中抱此错， 那么... "Failedtoexecute'texImage2D'on'WebGLRenderingContext':taintedcanvasesmaynotbeloded." guoguicheng的博客 04-16 1万+ 出现这错误是因为threejs内部没有处理图片跨域问题，设置图片TextureLoader为允许跨域就可以了varloader=newTHREE.TextureLoader(); loader.setCrossOrigin("Anonymous"); cocosjs显示跨域图片的办法 9527的专栏 11-02 7950 在cocosjs中若要显示一张网络上的图片会遇到以下问题UncaughtSecurityError:Failedtoexecute'texImage2D'on'WebGLRenderingContext':thecross-originimageathttps://www.baidu.com/img/baidu_jgylogo3.gifmaynotbeloaded.虽 cesium云端服务器部署出现跨域问题 qq_44964344的博客 03-27 428 初学cesium，申请了cesium和天地图的token。

在本地使用nodejs发布服务，浏览器可以正常加载地球，天地图影像加载也都正常。

但当我把相同的东西部署到云端的虚拟主机上之后，就不行了，无法加载地球，出现了如下提示： Anerroroccurredwhilerendering.Renderinghasstopped. SecurityError:Failedtoexecute'texImage2D'on'WebGLRenderingContext':Theimage threejs加载纹理图跨域 最新发布 weixin_46352558的博客 08-03 149 threejs加载纹理图报错Failedtoexecute'texImage2D'on'WebGL2RenderingContext':Theimageelementcontainscross-origindata,andmaynotbeloaded Failedtoexecute'texImage2D'on'WebGLRenderingContext':Taintedcanvasesmaynotbeloaded. 菜鸟karroy 03-13 7487 three.js:27461DOMException:Failedtoexecute'texImage2D'on'WebGLRenderingContext':Taintedcanvasesmaynotbeloaded. atTHREE.WebGLState.texImage2D(file:///H:/3d_demo/demo6/js/three.js:274... egret接4399排行榜头像跨域问题 爱上游戏开发 12-10 1万+ 推荐阅读：  我的CSDN  我的博客园  QQ群：704621321 接4399排行榜的时候，获取到头像的url地址，显示头像使用下面两种方法（注：head为url地址）： 方法一： this.head.source=head; 方法二： RES.getResByUrl(url,(data,url)=>{ egret.lo... IntroductiontotheDirectX9High-LevelShaderLanguage aries__lee 11-09 3264
CraigPeeper
MicrosoftCorporation
JasonL.Mitchell
ATIResearch
July2003
Appliesto:
   DirectX®9High-LevelShaderLanguage
Summary:InanexcerptfromtheforthcomingbookShaderX2-IntroductionandTutorials WebGL加载跨域纹理的解决方法 u011462674的专栏 07-20 9970 本人一直对WebGL很有兴趣，也试着尝试用osgjs写了个DEMO，很成功的出现了效果。

可是当自己用ASP.net写了个服务端，想用自己写的服务器提供的数据来用做纹理，可是怎么也不出来，还报错。

跟了下代码，发现是用作纹理的Image对象的问题。

于是本菜鸟在百度了下，发现是Cross-OriginResourceSharing的问题。

什么是Cross-OriginR... 视频在H5游戏中的应用 weixin_34256074的博客 04-11 253 前言 游戏中如果需要使用一些预先录制好的动画，动画格式可以选择gif文件和视频文件，视频文件和gif文件相比，size更小（相同质量，gif文件比mp4文件大５倍以上）。

如果视频能在canvas中或者webgl中播放，这样视频可以和其它游戏元素整合，实现以前需要很复杂的方式才能实现的功能，比如在一个旋转的3D立方体中播放视频... 酷视网页视频VR播放器SDK（旗舰版）使用说明书 guoguicheng的博客 06-11 596 产品使用说明书 运行环境 支持w3c标准且支持webGL3D渲染引擎的浏览器，包含微信、微博、qq等app等部分主流app 探索版使用说明：