传送门:html2canvas官网
原理:
首先 html2canvas 截图的原理是分析需要截图的dom元素部分,这部分需要截图的dom是需要显式存在整个页面的dom文档流中的,意思就是需要被截图的dom的样式不能是隐藏(opacity: 0 或 displa: none)。
场景:移动端H5页面海报分享,页面海报显示和保存的海报需要不一样(如带上用户昵称等)?
小结:
既然显示的和保存的海报需要不一样,又需要生成的海报显示存在dom中,其实可以使用绝对定位,并调整一下截图区域的层叠关系z-index即可,这样截图区域满足两个条件,1存在dom中,2也显式存在,只不过设置了层叠关系,让它被看不到而已。
保存的截图清晰度
截图的清晰度可能和画布设置的大小有关,可以设置画布大小和需要截图的区域大小一致。