my_loan/htmldev/loan/src/views/partner/poster/index.vue

<template>
  <div>
    <Popup
      position="bottom"
      :style="{width: '80%', height: '88.5%', left: '10%', bottom: '3%', background: 'transparent'}"
      v-model="showPoster">
      <img
        class="poster"
        :src="strPostSrc"
        alt=""
        @click="funPreviewImage">
    </Popup>
    <div class="hide" id="qr-code"></div>
    <canvas class="hide" ref="myCanvas"></canvas>
  </div>
</template>

<script>
import { Popup, Notify, Toast, ImagePreview } from 'vant'
import QRCode from 'qrcodejs2'

export default {
  name: 'poster',
  components: {
    Popup
  },
  props: {
    posterBg: {
      type: String,
      default: ''
    },
    codeParams: {
      type: Object,
      default: function () {
        return {
          partnerImgUrl: '',
          partnerName: '',
          link: '',
          x: 112,
          y: 1046,
          width: 202,
          height: 202
        }
      }
    }
  },
  data () {
    return {
      showPoster: false,
      strPostSrc: '',
      qrcode: null
    }
  },
  methods: {
    createQRCode () {
      const { link } = this.codeParams
      Toast.loading({
        message: '海报生成中...',
        forbidClick: true,
        duration: 0
      })
      if (!this.qrcode) {
        this.qrcode = new QRCode('qr-code', {
          width: 212,
          height: 212,
          text: link,
          colorDark: '#000',
          colorLight: '#fff'
        })
      } else {
        this.qrcode.clear()
        this.qrcode.makeCode(link)
      }
      const timer = setTimeout(() => {
        clearTimeout(timer)
        this.createPoster()
      }, 500)
    },
    setImg (params) {
      const { isDrewCircle } = params
      const img = new Image()
      img.crossOrigin = 'anonymous'
      img.onload = function () {
        if (isDrewCircle) {
          params.ctx.beginPath()
          params.ctx.arc(params.x + params.width / 2, params.y + params.width / 2, params.width / 2, 0, Math.PI * 2, false)
          params.ctx.clip()
        }
        params.ctx.drawImage(img, params.x, params.y, params.width, params.height)
        params.cb()
      }
      img.src = params.src
    },
    createPoster () {
      const vm = this
      const { posterBg } = this
      const {
        partnerImgUrl,
        partnerName,
        x,
        y,
        width,
        height,
        canvasWidth,
        canvasHeight,
        partnerLabelY,
        partnerImgUrlY
      } = this.codeParams
      const canvas = vm.$refs.myCanvas
      const ctx = canvas.getContext('2d')
      const canvas2 = document.getElementById('qr-code').getElementsByTagName('canvas')[0]
      const code = {}
      code.src = canvas2.toDataURL('image/png', 1)
      canvas.width = canvasWidth || 750
      canvas.height = canvasHeight || 1446
      // 绘制背景
      vm.setImg({
        ctx,
        src: posterBg,
        x: 0,
        y: 0,
        width: canvasWidth || 750,
        height: canvasHeight || 1446,
        cb () {
          if (partnerImgUrl) {
            ctx.font = '400 28px/40px STYuanti-Regular'
            ctx.fillStyle = '#C9AD8D'
            ctx.fillText('推广人：', 236, partnerLabelY || 1128)
            ctx.save()
            vm.setImg({
              ctx,
              src: partnerImgUrl,
              x: 346,
              y: partnerImgUrlY || 1100,
              width: 40,
              height: 40,
              isDrewCircle: true,
              cb () {
                ctx.restore()
                ctx.font = '600 28px/40px STYuanti-Regular'
                ctx.fillStyle = '#C9AD8D'
                ctx.fillText(partnerName, 398, partnerLabelY || 1130)
                // 绘制二维码
                vm.setImg({
                  ctx,
                  src: code.src,
                  x: x,
                  y: y,
                  width: width,
                  height: height,
                  cb () {
                    vm.strPostSrc = canvas.toDataURL('image/png', 1)
                    vm.showPoster = true
                    Toast.clear()
                    Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
                  }
                })
              }
            })
          } else {
            // 绘制二维码
            vm.setImg({
              ctx,
              src: code.src,
              x: x,
              y: y,
              width: width,
              height: height,
              cb () {
                vm.strPostSrc = canvas.toDataURL('image/png', 1)
                vm.showPoster = true
                Toast.clear()
                Notify({ type: 'primary', message: '长按图片保存到相册', duration: 3000 })
              }
            })
          }
        }
      })
    },
    // 图片预览
    funPreviewImage () {
      const vm = this
      if (!vm.strPostSrc) {
        return
      }
      ImagePreview([vm.strPostSrc])
      // window.wx.previewImage({
      //   current: vm.strPostSrc,
      //   urls: [vm.strPostSrc]
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.hide {
  display: none;
}

.poster {
  display: block;
  width: 100%;
}
</style>