IE11浏览器下cytoscape.js请求图片不显示

现象:项目中使用angularjs2+cytoscape.js绘制网络拓扑图,其中节点背景使用了图片显示,在windows环境下调测,所有浏览器都正常显示,但是一放到Linux环境服务器上,IE11浏览器下访问无法显示,其他浏览器正常。

问题:通过对cytoscape.js源码打印发现请求图片是通过<img crossorigin="anonymous" src="assets/imgs/bird.jpg">方式去获取图片,打开nginx访问日志记录,只要IE11浏览器发送的http图片请求都会报302状态码。经分析,crossorigin属性是为了解决跨域问题使用,而我们项目中的图片都是在相应服务器上,并不需要跨域获取。

方法:将cytoscape.cjs.js中BRp.getCachedImage方法中如下内容

 var dataUriPrefix = 'data:';
    var isDataUri = url.substring(0, dataUriPrefix.length).toLowerCase() === dataUriPrefix;
    if (!isDataUri) {
      image.crossOrigin = crossOrigin; // prevent tainted canvas
    }

修改为:

if(url.indexOf("http://")!== -1||url.indexOf("https://")!== -1){
        image.crossOrigin = crossOrigin; // prevent tainted canvas
    }
原创文章 33 获赞 6 访问量 2万+

猜你喜欢

转载自blog.csdn.net/lanyue1/article/details/88835705