html2canvas的遇到的坑

**需求点: ** 将页面生成海报,并在生成的页面中添加二维码 用户扫描二维 跳转到对应的页面中

第一个坑

由于生成的页面中含有二维码, 一开始想到的是react.qrcode根据不同的连接来动态的生成 直接放到对应的位置上, 然后这时候利用html2canvas直接生成图片,二维码的区域为一片空白.

解决方案: 在的 dom中发现二维不是图片,而是canvas标签.

在dom直接使用img标签直接替换react.qrocde生成的二维码

第二个坑

在ios中的某些机型直接生成卡住在 clone的阶段, 经过测试发现都是在ios13.4系统以上的机型

解决方案: 将html2canvas的版本替换成1.0.0-rc.4即可

第三个坑

这个坑是在将html2canvs的版本降低后发现的, 在页面中一个1px 分割线 颜色很深, ,这个情况在安卓和ios都会出现

<div className="line"></div>

.line {
  height: 1px;
  background: #000;
  opacity: 0.08;
}
// 解决方案: 不用opacity来控制,直接rgba
.line {
  height: 1px;
  background: rgba(0,0,0,0.08);
}

第四个坑

// 最好不要在参数设置 background为null 会导致出现dom填充不满的情况,会出现黑边, 最好的情况是同css来进行控制背景图
html2canvas(dom, {
  background: null,
})

第五个坑

通过background-image来设置背景图会导致,背景图失效的情况, 最好直接使用img标签来代替.