这几天工作之余遇到一个比较棘手的问题,是就是利用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浏览器下找不到成员问题:

暂时还没研究出来,后续有进展会继续分享~

Logo

前往低代码交流专区

更多推荐