h5如何实现页面生成海报保存到本地 踩坑

踩坑1：
在某些手机型号下：
我说你说他说大家说有咩有问题
就算是一个完整的span标签的内容，也会重叠在一起

解决：
加上letter-spacing属性：
.text {
letter-spacing: 2px;
}
letter-spacing 属性增加或减少字符间的空白（字符间距）

踩坑2：
在iphone6s真机上，保存图片到本地，出现：页面除背景外的其他部分为空白的情况。
其他手机型号没有这种情况。

出现原因：
排查后发现：是由于页面主体部分有显隐动画，且直接把动画写在css里导致的问题。

原代码：

<div class="rankList_box">………………………………</div>

 这里是直接把动画写在了css中，一开始把opacity置为0，然后利用动画慢慢显示。
 （一开始以为是因为opacity为0的原因，就把它置为1，发现还是空白，所以排除此因素）
 style样式：
.rankList_box {
  width: 100%;  height: 71vh; letter-spacing: 2px;
 ………………
  animation: wordShow 1s 1 linear;
  animation-fill-mode: forwards;
  opacity: 0;
}

动画部分的代码：（不变）

@keyframes wordShow {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

修改之后：

 <div class="rankList_box" id="rankList_box" :class="{'isShow':isShow}">…………………………</div>
 data参数：
 isShow:true // 是否展示动画
 mounted() {   // 在渲染钩子中去控制
    setTimeout(()=>{
      this.isShow = false
    },1000)
  },


<style lang="scss" scoped>
 这里不把动画直接写在css中，而是通过isShow的改变来控制显隐动画的显示！然后就没问题了
.rankList_box {
  width: 100%;  height: 71vh; letter-spacing: 2px;
 ………………
  &.isShow {
    animation: wordShow 1s 1 linear forwards;
    opacity: 0;
  }
}
</style>