本文介绍: html2canvas在实际应用中遇到的一些问题解决方案

1、jsbridge重复调用

问题现象:移动端进行通信通过<script>标签里的jsbridge.js调用端上的接口,在调用接口之后,调用html2canvas生成图片发现刚才调用的接口又被调用了一次

解决方案一:html2canvas调用之前,重置jsbridge

解决方案二:html2canvs 方法options 参数配置名为 ignoreElements属性,根据返回值选择性忽视iframe如下

const ops = {

ignoreElements: (element) => isIos && element.nodeName === ‘IFRAME’

}

2、bgm重复播放

问题现象:audio标签设置autoplay=true播放背景音乐,在调用html2canvas后,又出现一个播放背景音乐audio标签,使得2个bgm在同时播放


调用html2canvas前1个audio标签:

调用html2canvas后2个audio标签:


解决方案在调用html2canvas之前,获取之前的audio标签,给他的autoplay设置false设置false之后就只有一个自己写的audio

3、文字省略号消失

问题现象css设置textoverflow: ellipsis文字出现省略号,在调用html2canvas生成图片没有省略


我的dom

base64图片:


解决方法js控制文字长度超出后截断原先文本并加上…

解决方法使用 Canvas 2d context 的 measureText 方法对文本宽度进行计算通过滑动窗口获取所能容纳的最大数量,以得到完整的最长字符串

4、图片模糊/出现边框

使用css设置background方式添加的图片生成图片会模糊严重,可以改成img标签来加载图片。可以提高图片清晰度

5、boxshadow无效

css写的阴影生成无效可以切图

6、生成base64数据

html2canvas生成参数scale调小,值越小数据越小,当然,也越不清晰

html2canvas生成base64数据的大小,和设备屏幕尺寸设备像素比有一定的关系


iPhone X(375*812) DPR:3.0

iPhone SE(375*667) DPR:2.0

galaxy S8(360*740)DPR:3.0


更多问题可以参考https://www.shuzhiduo.com/A/6pdDyl4Lzw/

发现分析源码,也提出很多别的解决方案,很赞!

原文地址:https://blog.csdn.net/weixin_37645543/article/details/128701682

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_29082.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注