vue中edge浏览器html2canvas兼容问题
这几天工作之余遇到一个比较棘手的问题,是就是利用html2canvas生成图片,在Chrome中使用没有问题但是在edge和ie浏览器中报错:1、在edge浏览器中提示:t无法获取未定义或 null 引用的属性“toBlob”2、在ie浏览器(ie11)中提示:117ms html2canvas: Unable to access cssRules property118ms html...
这几天工作之余遇到一个比较棘手的问题,是就是利用html2canvas生成图片,在Chrome中使用没有问题但是在edge和ie浏览器中报错:
1、在edge浏览器中提示:
t无法获取未定义或 null 引用的属性“toBlob”
2、在ie浏览器(ie11)中提示:
117ms html2canvas: Unable to access cssRules property
118ms html2canvas: Error: 找不到成员。
158ms html2canvas: Error: 找不到成员。
Unhandled promise rejection Error: 找不到成员。
本着先易后难的原则,我们来看第一个问题:
顾名思义,肯定是在edge浏览器中不支持toBlob属性方法。那么到底这个方法是不是兼容edge就需要去研究下关于此方法的官方文档了:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility
这就有点懵逼了!居然不支持edge…但是发现还有一行在ie浏览器下需要加一行前缀’ms’前缀的介绍,所以觉得还是应该一试。
首先当然是判断一下当前浏览器类型,这里可以在methods里面定义一个公共方法,如果只用一次的话建议还是写在当前组件当中:
getExplorer (){
var explorer = window.navigator.userAgent,
compare = function (s) { return (explorer.indexOf(s) >= 0); },
ie11 = (function () { return ("ActiveXObject" in window) })();
if (compare("MSIE") || ie11) { return 'ie'; }
else if (compare("Firefox") && !ie11) { return 'Firefox'; }
else if (compare("Chrome") && !ie11) {
if (explorer.indexOf("Edge") > -1) {
return 'Edge';
} else {
return 'Chrome';
}
}
else if (compare("Opera") && !ie11) { return 'Opera'; }
else if (compare("Safari") && !ie11) { return 'Safari'; }
}
通过上述方法可以拿到当前浏览器类型;
当为edge或ie浏览器时,在toBlob方法前面加上’ms’的前缀
var webType = this.getExplorer ();
if(webType == 'Edge' || webType == 'ie'){
var blob = canvas.msToBlob();
....
return;
}
这样edge浏览器兼容性问题就解决了。
接下来ie浏览器下找不到成员问题:
暂时还没研究出来,后续有进展会继续分享~
更多推荐
所有评论(0)