解决ios15系统的手机使用html2canvas截图页面空白崩溃

4,133

最近ios15系统马上要推出了,公司的app开始测试ios15的兼容,然后就出现了有截图的页面卡顿白屏的问题。

业务场景是这样,我们的每个页面都会有多个截图,截图使用的方式是html2canvas这个插件,

1、截图方法如下:

// 截图方法
function catchPicture (obj) {
    var imgUri = "";
    var scale = 1;
    var dom = document.querySelector(obj.dom);
    return new Promise(function (success, fail) {
        html2canvas(document.querySelector(obj.dom), {
            scale: scale,
            width: dom.offsetWidth,
            height: dom.offsetHeight
        }).then(function (canvas) {
            imgUri = canvas.toDataURL("image/png"0);
            if (imgUri) {
                success(imgUri);
            } else {
                fail("error");
            }
        });
    });
};

2、调用方法如下:

catchPicture({
     dom"body"
}).then(function (catchData) {})

3、问题现象:

当页面先截一张图之后,再去截第二张图时,页面就会出现卡顿白屏的问题,这个问题时必现,且在ios的浏览器中走也是这样。

4、解决方案:

经过很多论的调试之后,依然找不出原因,因为既无报错也不确定页面是在哪行代码卡住的,最终只能采用笨办法,去屏蔽页面的html结构,只留下两个截图的结构,突然好运降临,页面不卡了,截图成功了,那是不是就能证明是页面的某个dom结构导致的呢?

因为页面较为复杂,最终经过10多轮的屏蔽组合,终于确定在了button这里,那么这个button按钮的样式会有什么影响呢?

一步一步挨个去屏蔽属性,结果并没有预料中的变好,正在疑惑之时,突然看到了用户代理样式里面有三个属性是没有替换的,其中有个font-family:system-ui这个样式在chrome浏览器中是没有的,会不会是这个影响的呢?果然屏蔽了它之后就可以了,页面操作无比丝滑。

我们先来看看这个样式究竟是什么意思?

system-ui是一种通用字体系列,它选择当前操作系统下的默认系统字体,它的优势在于和当前系统使用的字体相匹配,可以让Web页面和App风格看起来更统一。

话说它虽然出现的比较晚,但是在can i use上显示得兼容性还是很好的,为啥会出现在ios15的手机系统上呢?目前ios15的资料还少之又少查不到,至于为什么会在页面出现第二个canvas的时候出现问题?还有待于深究。

记录下目前的处理方案:

//兼容ios15手机系统字体导致的问题

            var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isiOS) {
                var ios_ver = parseInt(navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/\_/g'.'));
                if (ios_ver >= 15) {
                    if ($('button')) {
                        $('button').css('font-family''PingFangSC-Regular');
                    }
                }
            }