ufutx-love-h5-public/src/components/sharePosters.vue

<template>
  <div class="sharePosters" v-if="show">
    <div class="canvasArea">
      <vue-canvas-poster :widthPixels="1000" :painting="envelope" @success="success" @fail="fail"></vue-canvas-poster>
      <img class="canvasImg" :class="screenShow ? 'sel' : ''" :src="posterImg" alt="" v-if="posterImg" />
      <div class="font15 colorff bold text-center" style="margin-top: 15px">长按保存图片，分享给好友或朋友圈</div>
      <img class="cancelIcon_show" :class="screenShow ? 'sel' : ''" v-if="iconShow" @click.stop="clickShare" src="https://image.fulllinkai.com/202110/23/78698e898cd570e5e7751c323e4a5cb7.png" alt="" />
      <img class="cancelIcon" :class="screenShow ? 'sel' : ''" v-else @click.stop="clickShare" src="https://image.fulllinkai.com/202108/27/78698e898cd570e5e7751c323e4a5cb7.png" alt="" />
    </div>
  </div>
</template>
<script>
import { $toastClear } from '@/config/toast'
export default {
  computed: {},
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    iconShow: {
      type: Boolean,
      default: false
    },
    qrcode: {
      type: String,
      default: ''
    },
    envelope: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      newQrcode: '',
      posterImg: '',
      painting: {},
      screenWidth: 0,
      screenHeight: 0,
      screenShow: false
    }
  },
  methods: {
    clickShare() {
      this.$emit('update:show', !this.show)
    },
    getBase64Image(img) {
      var canvas = document.createElement('canvas')
      canvas.width = img.width
      canvas.height = img.height
      console.log(img.width, 'qrcodeImage--------------------------')
      var ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var dataURL = canvas.toDataURL('image/jpeg') // 可选其他值 image/jpeg
      return dataURL
    },
    getNewQrcode() {
      const vm = this
      if (vm.envelope.views && vm.envelope.views.length > 0) {
        vm.envelope.views.forEach(item => {
          if (item.url && item.url.indexOf('?') != -1) {
            var urlArr = item.url.split('?')
            if (urlArr.length > 0) {
              console.log(item.url)
              item.url = urlArr[0]
            }
          }
          if (item.url && !item.localShow) {
            var qrcodeImage = new Image()
            qrcodeImage.setAttribute('crossOrigin', 'anonymous') // 解决iOS微信端报错 securityError...insource啥的、
            qrcodeImage.src = item.url + '?v=' + Math.random() // 处理缓存
            qrcodeImage.crossOrigin = 'Anonymous'
            qrcodeImage.onload = () => {
              // 一定要在onload后去压缩转码，否则可能因图片未加载传入，报错或者undefind之类的
              var base64 = vm.getBase64Image(qrcodeImage)
              vm.newQrcode = base64 // 将压缩转码后的图片保存，用以生成海报
              item.url = base64 // 将压缩转码后的图片保存，用以生成海报
            }
          }
        })
      }
    },
    success(src) {
      this.posterImg = src
      $toastClear()
    },
    fail(err) {
      $toastClear()
      alert(err)
    },
    childMethod() {
      this.getNewQrcode()
    }
  },
  watch: {
    newQrcode() {
      if (this.newQrcode) {
        setTimeout(() => {
          this.painting = this.envelope
        }, 200)
      }
    },
    envelope() {
      this.getNewQrcode()
    }
  },
  created() {},
  mounted() {
    var that = this
    that.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth // 宽
    that.screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight // 高
    if (that.screenHeight < 670) {
      that.screenShow = true
    }
  }
}
</script>

<style lang="scss" scoped>
.sharePosters {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 9999999999999;
}
.canvasArea {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 99999999999;
  .canvasImg {
    // width: 300px;
    // height: 534px;
    width: 90%;
    // height: 90%;
    display: block;
    margin: 0 auto;
  }
  .canvasImg.sel {
    width: 80%;
  }
  .cancelIcon {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 222;
    top: 5px;
    right: 20px;
  }
  .cancelIcon.sel {
    width: 24px;
    height: 24px;
    right: 38px;
  }
  .cancelIcon_show {
    width: 15px;
    height: 15px;
    position: absolute;
    z-index: 222;
    top: 10px;
    right: 28px;
  }
  .cancelIcon_show.sel {
    width: 12px;
    height: 12px;
    right: 38px;
  }
}
</style>