首页 > 其他分享 >ios15使用html2canvas页面白屏、崩溃、自动刷新

ios15使用html2canvas页面白屏、崩溃、自动刷新

时间:2023-05-17 11:35:39浏览次数:69  
标签:中文 ios15 标签 ShareModel html2canvas 白屏 div

原文链接:https://www.cnblogs.com/yalong/p/17408067.html

背景

有个H5内嵌App的项目,做分享功能的时候用到了 html2canvas, 在IOS15(Iphone11 pro)上,
只要点击分享就会触发页面reload 或者直接白屏,把H5链接在手机上用浏览器访问点击分享也不行,会触发浏览器自动刷新,看来就是这个html2canvas的问题了

问题排查

我的代码如下

let ShareModel = document.getElementById('model-box');
html2canvas(ShareModel, {
            width: ShareModel.clientWidth,
            height: ShareModel.clientHeight,
            useCORS: true
        }).then(function (canvas) {})

网上查到说降级html2canvas 版本,但是还不行

那就试试把ShareModel 改成其他div,竟然是可以的

那就确定是id 为 model-box 的这个div里面有问题

尝试把div里面的内容删除一些,慢慢找到了引起白屏的竟然是一个div标签,它的内容没啥特殊的,只是用户的昵称

百思不得其解,为啥就这个标签有问题,改成其他的就没事了,model-box里面有很多标签,为啥就这个昵称会导致白屏,为什么?

后来突然想到,这个昵称是中文的,难道说是中文引起的,于是把内容改成英文、数字 都试了下,竟然好了, 就是中文引起的

在网上找到了解决方案,就是给这个中文标签设置字体,代码如下:

.textContainer{
 font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;
}

原来使用html2canvas,如果div中有中文,必须给中文的标签设置这样的字体,不然就报错,确实神奇

困扰了一下午,特此记录下

标签:中文,ios15,标签,ShareModel,html2canvas,白屏,div
From: https://www.cnblogs.com/yalong/p/17408067.html

相关文章

  • 向日葵等工具,远程连接电脑时,Visual Studio黑屏或白屏解决方案
    原因:向日葵等软件,和VS的GPU渲染有冲突,导致不能正常显示。解决方案:取消VisualStudio的GPU渲染功能。操作步骤如下:方式一:如果能直接操作远程电脑,直接打开远程电脑的配置,取消GPU的渲染。取消下面两项的勾选状态,点击确定按钮,远程时可正常显示。 方式二:当前操作不了电脑,只......
  • react-html2canvas-jspdf 自动分页导出pdf
    //新建exportPDF.js文件importhtml2canvasfrom'html2canvas';importjsPDFfrom'jspdf';functiongeneratePDF(id,title){ //下载pdf方法 letdemo=document.getElementById(id); demo.style.overflow='visible'; html2canvas(......
  • 网页截图,html2canvas简单示例
     <divid="box"><p>asd4a5s6fa6s5f1asf</p><imgstyle="width:200px"src="xxxxxx.png"/><buttonstyle="width:100px;height:30px"onclick="prtsc()">pr......
  • html2canvas插件使用小结
    简介html2canvas能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片,通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染,整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时,将采用Flashcanv......
  • 华为快应用-在其他平台审核出现的白屏问题
    最近开发中,提交到oppo,vivo等市场的包在审核时出现了白屏问题,经过本地调试,并未发现有报错出现,百思不得其解,后来经过了解找到问题的所在。原因是:你开发的环境是基于华为快应用平台还是华为快应用联盟平台,这里简单解释下,因为快应用华为起到一个推进作用,所以华为平台的更新会更快,技术会......
  • HTML元素截图(html2canvas)
    html2canvas官网 :http://html2canvas.hertzen.com/开源地址:https://github.com/niklasvh/html2canvas <body><divid="div"><span>内容</span><divstyle="height:300px;border:solid1pxred;width:100px">......
  • 小程序input设置为type="number"聚焦时,会出现白屏的情况
    在微信小程序开发过程中,input聚焦时会出现白屏的情况,如图:  经过测试发现当input设置为type="number"聚焦时,当微信数字键盘弹出来的时候就会白屏,有的手机会闪(一下整个......
  • 使用html2canvas+jspdf将页面转为pdf并下载
    1、安装html2canvas和jspdfnpminstallhtml2canvasnpminstalljspdf2、新建文件htmlToPdf.ts//导出页面为PDF格式importhtml2Canvasfrom'html2canvas'impor......
  • 使用html2canvas+jspdf将页面转为pdf并下载
    需求:我有一个页面,是由多个模块组成的,现在我需要把页面转为pdf并下载,但是因为pdf自动换页以后会把我的模块给截开,不好看甚至内容被裁开,所以我需要判断当前页面加上这个模块......
  • 使用js的html2canvas截图div并下载
    暂未完赛,请继续加油吧-测试截图```functiongetScreenShot(){html2canvas(document.querySelector("#canvas")).then(canvas=>{//docume......