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

boyanx19小时前技术教程4

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

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

1、截图方法如下:

// 截图方法
 function convertToPoster() {
   var $poster = $('#poster-content');
   html2canvas($poster[0], {useCORS: true})
     .then(
     function (canvas) {
       var oImage = new Image();
       oImage.src = canvas.toDataURL('image/png', 1);
       $(oImage)
         .addClass('poster');
       $poster.parent()
         .after(oImage)
         .hide();
     }
   );
 };

2、调用方法如下:

$(window).load(function() {
  convertToPoster();
})

3、问题现象:

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

4、解决方案:

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

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

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

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

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

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

记录下目前的处理方案:

//兼容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');
    }
  }
}

版权声明

本文为[青咕咕]所创,转载请带上原文链接,感谢

https://juejin.im/post/7006119499216715783



标签: html转canvas

相关文章

OpenAI技术直播第四弹!推出ChatGPT内置工具Canvas,有三大核心功能

每经编辑:毕陆名昨天的Sora掀起热潮,今天OpenAI又给我们带来了升级版Canvas。Canvas正式向所有用户开放,并与OpenAI的主要模型深度集成。Canvas内置在ChatGPT中,打开C...

Nextoffer极客编程挑战#022:使用HTML5画布生成文字淡入淡出效果

给定如下HTML:<div id="container"><canvas id="MyCanvas" width="350" height="200">不支持HTML5画布&l...

Canvas 从入门到劝朋友放弃(图解版)

本文简介点赞 + 关注 + 收藏 = 学会了在前端领域,如果只是懂 Vue 或者 React ,未来在职场的竞争力可能会比较弱。根据我多年在家待业经验来看,前端未来在 数据可视化 和 AI 这两个领域...

canvas学习和面向对象(二)(canvas 教程)

Canvas 学习(二)上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形.现在开始绘制图片和动画帧,以及面向对象的升级版本.还是一样,看代码,所有的代码都托管在github...

网页游戏开发基础——Canvas基本图形绘制

  什么是Canvas?Canvas是HTML5新增的一个标签,你可以把它翻译为画布,通过它可以绘制二维或三维图形,有了它就可以不用安装flash而实现复杂的动画功能。如何通过Canvas绘图?下面我...

前端【Canvas】基础教程示例集锦(前端开发canvas)

Canvas是HTML5中新增的元素,它是一个可以使用JavaScript绘制图像的区域。Canvas可以用来绘制简单的图形、动画、游戏、数据可视化等等。它是一个非常强大的工具,可以让我们在网页中展示...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。