html2canvas？

html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。
下面将简述html内容（其中也包含了二维码生成到图片上）生成图片过程以及遇到过的一些问题

在vue里使用html2canvas

安装

npm install html2canvas  -d

引入

import html2canvas from 'html2canvas';

布局

<div id="captureId" class="capture" v-show="firstFlag">
  <!-- 需要生成为图片的内容 -->
   <img src="./../images/pic.png" class="capture-bg" alt="">
   <div class="content-box">
       <div class="avatar">
          <img :src="hero.headPic" alt="">
       </div>
       <p class="t1 pos1">{{hero.title}}<br>{{hero.str1}}</p>
       <div class="ewm-box">
             <!-- 生成二维码 -->
              <div class="qrcode" ref="qrCodeUrl"></div>
        </div>  
     </div>
 </div>
 <!-- 需要生成为图片的内容 -->
<div class="capture-img">
    <!-- 生成后的图片 -->
    <img :src="dataURL" alt="" v-show="!firstFlag">
 </div>

其中QRCode是生成二维码用到的JavaScript 库，html2canvas转需要生成图片的html内容为图片

<script type="text/ecmascript-6">
import html2canvas from 'html2canvas'; // 引入
import { hposter } from '../../../goaward.js'
import QRCode from 'qrcodejs2' // 二维码
export default {
  name: 'poster',
  data () {
    return {
        dataURL:'', 
        firstFlag: true,
        hero: {}
    }
  },
  components: {
    html2canvas
  },
  mounted () {
    hposter().then(res => {
     this.hero = res.data
     this.creatQrCode(); // 调用生成的二维码
     this.$nextTick(()=> { // 使用$nextTick，解决数据还没有渲染到html就先转为图片，此时的图片会是空内容的问题
         html2canvas(document.querySelector('#captureId'), { // 转换为图片
             useCORS:true // 解决资源跨域问题
            }).then(canvas => {
              let imgUrl = canvas.toDataURL('image/png');
              this.dataURL = imgUrl;
              this.firstFlag = false;
         })
      })
    })
  },
  methods: {
    creatQrCode () { // 生成二维码
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: this.hero.shareUrl, // 填写需要生成二维码的地址
          width: 90,
          height: 90,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })
    },
  }
}
</script>

其中遇到的问题
1、ios无法转成为图片
原因：
图片不能设置成background显示，需要使用img（如：<img src="./../images/pic.png" class="capture-bg" alt="">刚开始设置在了background，ios则无法生成为图片）导致无法实现图片保存
2、数据还未渲染到html里面就先转为了图片，导致生成的图片没有内容
解决：
使用this.$nextTick(()=> {
//html2canvas转换内容
})