"Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be loded."

最新推荐文章于 2024-03-14 18:34:34 发布

koloumi

最新推荐文章于 2024-03-14 18:34:34 发布

阅读量5.8k

点赞数

分类专栏：经验问题文章标签： three-js DOMExcepti code18 Failed

本文链接：https://blog.youkuaiyun.com/koloumi/article/details/68488403

版权

经验问题专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个常见的Three.js贴图加载失败的安全问题及其解决方案，通过修改源码中跨域设置来确保贴图资源能被正确加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在研究Three.js的时候碰到的问题在此记录

当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图。
假设我们获取的是图片在服务器上的路径然后我们用

THREE.ImageUtils.loadTexture

加载贴图到这里都是没有问题当我们在贴图加载完成的时候去render(Scene, Camera);获取当它自己刷新的时候就会报错然后我们加载的贴图显示不出来然后浏览器报这个错误。

这里写图片描述
这个一般是安全问题，解决方法就是我们翻到three.js的源码到42843行把对应的loader.setCrossOrigin( this.crossOrigin ); 代码换成loader.setCrossOrigin( ‘Anonymous’ );这个就好了

然后就OK了。。。。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

koloumi

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node .....

拥抱AI Design

03-24

3090

本文主要介绍 vue v-for渲染数据出现DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.处理方案 data(){ // 是否操作中使用了vue的v-for渲染数组数据,在一次改变数组的时候出现异常报错,而实际的数组是已经变化过的了,页面卡死 opting: true, }, methods:{ // 切换二级菜单栏 ch.

视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理

weixin_43341974的博客

10-14

1735

2021-10-14背景系统环境报错原因报错截图处理过程最终结果背景因为工作需要，所以研究了一下vue-video-player。使用起来很方便，但是也遇到一个不小的坑，搞的我欲仙欲死。在此记录一下留给后面的人们，如果文章对你有帮助的话请留言一下吧，让我知道自己的经验有帮助到他人。系统环境 windows10、vue2.6、vue-video-player5.0.2 报错原因视频截图中使用的视频来源跨域报错截图处理过程遇到这个问题第一时间一定是百度啦，各种各样的答案，五花八门的方法总之最后都

2 条评论您还未登录，请先登录后发表或查看评论

cesium 解决 WebGLRenderingContext 丢失问题

纯爱枫若情的博客

11-29

7018

通常来说，对于大多数使用场景，页面上只需要创建一个 cesium 的 viewer 就够用了。但是架不住，某些情况下，会需要多个 viewer 的存在。了解 cesium 的童鞋应该知道，一般情况下，一个 viewer 对应着一个 webgl context，如果有多个就会存在多个 WebGLRenderingContext。如果还不了解 WebGLRenderingContext 是什么的童鞋，建议去了解学习下 webgl 相关的知识，下面送上学习链接：https://develope

解决 Failed to execute ‘texSubImage2D‘ on ‘WebGL2RenderingContext‘: Tainted canvases may not be loaded

vily_lei的专栏

05-07

2941

解决 WebGL 跨域加载图片纹理数据报错: Failed to execute 'texSubImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded

Failed to execute 'texImage2D' on 'WebGLRenderingContext

最新发布

幽冥雪羽的博客

03-14

3685

这通常意味着你只能发送基本的数据类型（如字符串、数字、布尔值、null、undefined、ArrayBuffer、Blob、ImageBitmap、ImageData、File 和 FileList 等）或者可以序列化为这些类型的对象。常见的不能发送的对象包括函数、DOM 节点、XMLHttpRequest 对象或者其它具有复杂内部状态的对象。虽然使用 ref.value 解包，但是返回的对像不是原始对像，而是一个代理响应式对象内部的真实值，这个代理对象具有额外的属性和方法，导致序列化错误。

Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

菜鸟karroy

03-13

8985

three.js:27461 DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. at THREE.WebGLState.texImage2D (file:///H:/3d_demo/demo6/js/three.js:274...

three.js_ "Failed to execute 'texImage2D' on 'WebGLRenderingContext': tainted canvases may not be lo...

weixin_30505225的博客

12-25

2863

这个报错是请求图片跨域了。 1.当我们使用thee.js的时候肯定会碰到利用各种请求去向服务器请求贴图。 2.假设我们获取的是图片在服务器上的路径然后我们用加载贴图到这里都是没有问题当我们在贴图加载完成的时候去render(Scene, Camera);获取当它自己刷新的时候就会报错然后我们加载的贴图显示不出来然后浏览器报这个错误。这个一般是安全问题，解决方法就是我们翻到t...

three.js:Failed to execute 'texImage2D' on 'WebGLRenderingContext解决方案

weixin_30917213的博客

11-29

5536

three.js加载图片时，出现Failed to execute 'texImage2D' on 'WebGLRenderingContext .Tainted canvases may not be loaded.的错误跨域安全问题。解决办法： 1 如果你用的是纹理题图：如： var loader = new THREE.TextureLoader(); 加上： loader....

Three贴图跨域：DOMException: Failed to execute ‘texImage2D‘ on ‘WebGLRenderingContext

小人物的点点滴滴

09-07

2040

DOMException: Failed to execute ‘texImage2D’ on 'WebGLRenderingContext 网上找到方法修改threejs.module.js文件中的ImageLoader.prototype 在return之前加上image.crossOrigin=’’ 参考原文地址：https://blog.csdn.net/qq_41923622/article/details/103756549 ...

DOMException： Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’

qq_34838790的博客

06-18

4709

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/ 可直接将您代码调用图片的地

coco2d-js 无法加载网络图片(Failed to execute 'texImage2D' on ‘WebGLRenderin

Soulbo在到处打酱油

11-23

3241

PO主表示并没有深入探讨该问题，只知道该问题呢只是WebGL不能渲染（强势废话）加载网络图片的代码： cc.loader.loadImg(url, {isCrossOrigin: false}, function (error, img) { cc.log("error: "+error); var sp = new cc.Sprite(img);

three.js 在贴图时报错：DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext

dengjianma7223的博客

07-13

4428

在使用three.js 给实例贴图片时报错： THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded. 如果你也是这报错，并且在safari中展示正常，但是chrome中抱此错，那么...

大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案

qq_40863573的博客

04-01

1万+

大分辨率(5120*1600)屏幕使用cesium加载高精度倾斜摄影数据浏览器报错崩溃解决方案。 An error occurred while rendering.Rendering has stopped。 TypeError：Failed to execute 'shaderSource' on 'WebGLRenderingContext'：parameter 1 is not of type 'WebGLShader'。

cocosjs显示跨域图片的办法

9527的专栏

11-02

8503

在cocosjs中若要显示一张网络上的图片会遇到以下问题Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at https://www.baidu.com/img/baidu_jgylogo3.gif may not be loaded.虽

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

07-08

这个错误通常发生在尝试加载带有安全性限制的图像资源时。当使用 `texImage2D` 方法加载一个带有 `cross-origin` 属性的图像资源时，会出现此错误。解决此问题的方法是确保加载的图像资源具有正确的跨域设置。你可以使用以下方法之一来解决该问题： 1. 使用具有相同域名（或允许跨域访问的域名）的图像资源。确保图像资源的 URL 路径与你的网页相同。 2. 如果你无法更改图像资源的 URL，可以在服务器上进行配置，以允许跨域访问。你可以在服务器响应中添加 `Access-Control-Allow-Origin` 头部，并将其设置为允许访问的域名。请注意，这个错误信息是浏览器的错误提示，与编程语言无关。如果你需要更多关于特定编程语言的帮助，请提供更多的上下文和代码示例。