官方文档：http://html2canvas.hertzen.com/configuration/

踩了一天的html2canvas深坑，终于没毛病了

遇到的问题：
1、部分http图片(上传阿里云的图片，不知道为什么，后端已设置全开放无效)，无法解决跨域问题，无法实现到画布，最后转成base64图片才可以显示出来
2、要在数据都加载完后，setTimeout个300，再开始执行渲染截图
3、刷新页面，有时候顶部出现白边，有时候又没有， backgroundColor: null（去白边）加上没用，最后加上 logging: true（日志记录），结果没出现白边了~~（我也是醉了，不过能用就开心了~over）
4、渲染过程中，不能滚动页面，否则渲染出来的不完整。我是固定定位在页面右侧，渲染之前让页面不能滚动

外部引入：

<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

1、安装

npm install html2canvas

2、在页面引入

 import html2canvas from 'html2canvas';

 <!--要转成canvas的DOM-->
 <div class="img-box" ref="imageWrapper" style="position: fixed;top: 2000px;">
   <img class="ib-img-qr" :src="QRUrl" alt="">
   <div class="ib-logo">
     <img class="ib-logo" :src="LOGOUrl" alt="">
     <span>{{Info.nickName}}</span>
   </div>
 </div>
 <!--最终展示的地方-->
 <img style="width: 160px;" :src="dataURL" alt="">
 <el-button @click="uploadQR">下载二维码</el-button>

export default {
  name: 'BusinessInformation',
  data() {
    return {
      QRUrl: '',
      LOGOUrl: '',
      dataURL: ''
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    // 将dom转成canvas
    makeImg() {
      var that = this
      var opts = {
        logging: true, // 启用日志记录以进行调试 (发现加上对去白边有帮助)
        allowTaint: true, // 否允许跨源图像污染画布
        backgroundColor: null, // 解决生成的图片有白边
        useCORS: true // 如果截图的内容里有图片,解决文件跨域问题
      }
      // eslint-disable-next-line no-undef
      html2canvas(that.$refs.imageWrapper, opts).then((canvas) => {
        var url = canvas.toDataURL('image/png')
        that.dataURL = url
      })
    },
    // http图片转成base64，防止解决不了的图片跨域问题
    getBase64Image(img) {
      var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var dataURL = canvas.toDataURL('image/png') // 可选其他值 image/jpeg
      return dataURL
    },
    main(src) {
      var that = this
      var image = new Image()
      image.src = src + '?v=' + Math.random() // 处理缓存
      image.crossOrigin = '*' // 支持跨域图片
      image.onload = function() {
        that.LOGOUrl = that.getBase64Image(image)
      }
    },
    // 下载html2canvas生成的截图
    uploadQR() {
      var a = document.createElement('a')
      a.href = this.dataURL
      a.download = '二维码'
      a.click()
    },
    // 获取数据
    async getUserInfo(params) {
      const { data } = await getInfo(params)
      this.main(data.iconUrl) // 将logo路径转成base64，阻止无法解决的跨域问题
      setTimeout(function() {
        that.makeImg() // 等数据都生成后，再执行
      }, 300)
    }
  }
}