vue html5canvas截图保存iOS端点击无反应问题（针对iOS13.x系统）小结

html5canvas生成海报功能

1、下载引入

特别注意：html2canvas的1.0.0-rc.4版本稳定兼容（iOS13.x）

npm install html2canvas@1.0.0-rc.4 --save --dev
import html2canvas from 'html2canvas';

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

2、用法

HTML代码：
<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>

js代码：
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
      // js兼容(window.html2canvas || html2canvas)
      (window.html2canvas || 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)
    }
  }
}