vue 二维码海报合并生成海报 组件

<!--vue海报二维码组件，只需传入背景图片文件的URL 和二维码图片文件的URL -->
<template>
  <div>
    <div @click="guanbi" v-if="isShowPoster">
      <div class="poster-wrapper" v-if="!imgSrc">
          <div class="poster" ref="poster" >
              <img :src="bgImageUrl" alt="" >
              <img class="qr-code" :src="qrImageUrl" ref="qrCodeImage" @load="generatePoster" >
          </div>
      </div>
      <div class="poster-wrapper" v-else>
        <div class="poster">
          <img   :src="imgSrc" crossOrigin="anonymous"  />
          <!-- <canvas ref="canvas"></canvas> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
  name: "poster",
  props: {
      qrImageUrl: {
          type: String,
          required: true
      },
      bgImageUrl: {
          type: String,
          required: true
      },
      posterText: {
          type: String,
          default: '哈哈哈'
      },
      showPoster: {
          type: Boolean,
          default: false
      }
  },
  data() {
      return {
          imgSrc: '',
          isShowPoster: this.showPoster
      }
  },
  methods: {
      guanbi(){
          this.isShowPoster = !this.isShowPoster
          this.$emit('update:showPoster', this.isShowPoster)
      },
      generatePoster() {
        var vm = this
        setTimeout(() => {
        html2canvas(vm.$refs.poster, {
            x: 0, // x坐标
            y: 0, // y坐标
            useCORS: true,
            //foreignObjectRendering: true, // 是否在浏览器支持的情况下使用ForeignObject渲染
            //async: true, // 是否异步解析和呈现元素
            // 以下字段必填
            scale:4, //按比例增加分辨率 (2=双倍).
            dpi:1080,//设备像素比
        }).then(canvas => {
            const imageData = canvas.toDataURL("image/png")
            vm.imgSrc = imageData;
        })
       
        }, 1000);
    }
  },
  watch: {
    showPoster(newVal, oldVal) {
      this.isShowPoster = newVal
      this.$emit('update:showPoster', this.isShowPoster)
    }
  }
}
</script>

<style scoped>
.poster-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.poster {
  position: relative;
  display: inline-block;
  width: 80%;
  height: auto;
  background-size: cover;
  background-position: center;
}

.qr-code {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: auto;
}
</style>

引用组件 

import posert from '@/components/poster';

export default {

  components: { 'Poster': posert },

　　data(){

　　　　return {

   　　　　qrCodeUrl: '',

      　　posterUrl: '',

      　　showPoster: false

　　　　}

　　}

}

 模板调用

<Poster :qr-image-url="qrCodeUrl" :bg-image-url="posterUrl" :poster-text="'Your poster text'" :show-poster.sync="showPoster"
     />