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

  • Post author:
  • Post category:其他




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]



版权声明:本文为a123789999原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。