vue使用html2canvas实现HTML转canvas图片保存(兼容IOS13.x， 跨域)

安装

cnpm install --save html2canvas@1.0.0-rc.4

开发时候发现html2canvas在IOS13.4以上发现问题，实现不了，发现网友说要降低版本到@1.0.0-rc.4，所以安装@1.0.0-rc.4版本实现发现可行

html:

<div class="certificate" id="html2canvas" @click="createdImg">
    <div class="certificate-message">
      <img ref="showImg" class="workerDetail-headImg l-vMiddle" :src="showImg" backupSrc="user"></img>
      <span class="workerDetail-name">{{detail.name}}</span>
    </div>
    <img class="certificate-bg" src="@/assets/volunteer/worker/certificate.jpg" alt="">
  </div>

js：

import html2canvas from 'html2canvas' // 引入html2canvas
import { ImagePreview } from 'vant' // 引入vant的图片预览组件 ImagePreview
data () {
    return {
      showImg: '****'
    }
  },
methods: {
    createdImg () {
      this.getBase64Image() // 图片转为base64再去生成图片
        .then(res => {
          setTimeout(() => {
            html2canvas(
              document.getElementById('html2canvas'),
              {
                useCORS: true // 允许加载跨域的图片
              }
            ).then((canvas) => {
              const src = canvas.toDataURL() // 导出图片
              ImagePreview([src])
            })
              .catch(error => {
                console.log(error, 'error')
              })
          }, 0)
        })
    },
    getBase64Image (url) {
      const _this = this
      // 将图片转为base64
      return new Promise((resolve, reject) => {
        var image = new Image()
        // 解决跨域 Canvas 污染问题
        image.setAttribute('crossOrigin', 'anonymous') // 跨域
        image.onload = function () {
          var canvas = document.createElement('canvas')
          canvas.width = image.width
          canvas.height = image.height
          var context = canvas.getContext('2d')
          context.drawImage(image, 0, 0, image.width, image.height)
          var url = canvas.toDataURL('image/png')
          _this.showImg = url
          resolve()
        }
        const timestamp = Date.parse(new Date())
        image.src = _this.$options.data().showImg + '?t=' + timestamp // 加上时间戳防止缓存/跨域
      })
    }
  }

关于canvas导出图片原理