canvas合成海报图

根据接口返回的参数生成一个带有相关链接的二维码 然后和接口返回的背景图片列表n 合成n张海报图并可以下载到桌面

所需要的参数和图片列表都是父组件传过来的 使用了之前写过的alert弹窗 

<template>
  <v-alert
    hide-cont
    :min-width="imageList.length*canvasWidth"
    :width="684"
    class="composite-poster"
    bg-color="transparent"
    :is-cancel="false"
    @cancel="$emit('cancel')">
    <div slot="slot3">
      <ul class="g-center downloading-cont g-loading-col3"
        v-loading="mergeImagesLoading">
        <li class="g-relative"
          v-for="(item, i) in imageList"
          :key="i">
          <canvas class="jMyCanvas"
            :style="{width:`${canvasWidth}px`,height:`${canvasHeight}px`}"
            :width="`${canvasRenderWidth}px`"
            :height="`${canvasRenderHeight}px`"></canvas>
          <a class="g-btn-two g-pointer download-button g-absolute"
            :href="item.download"
            :download="item.filename">
            {{$_lang('下载到桌面')}}
          </a>
        </li>
      </ul>
    </div>
  </v-alert>
</template>

<script>
  export default {
    name: 'composite-poster',
    props: {
      imageList: {required: true, type: Array}, //图片列表
      qrCode: {required: true}, //二维码
    },
    data() {
      return {
        mergeImagesLoading: true,  //  请求分享图片loading
        canvasWidth: 270,
        canvasHeight: 480,
        rate: 2,//放大比率
      };
    },
    computed: {
      canvasRenderWidth() {
        return this.canvasWidth * this.rate;
      },
      canvasRenderHeight() {
        return this.canvasHeight * this.rate;
      },
    },
    methods: {
      //  合并成分享海报
      mergeImages() {
        if (this.qrCode === null) {
          return this.$message.error(this.$_lang('生成专属海报失败'));
        }
        this.$nextTick(() => {
          //  合并图片
          const canvasElements = document.getElementsByClassName('jMyCanvas');

          this.imageList.forEach((elem, i) => {
            let {imgUrl} = elem;
            let currentImage = document.createElement('img');
            let currentElement = canvasElements[i];

            currentImage.src = imgUrl;
            currentImage.setAttribute("crossOrigin", 'anonymous');

            let context = currentElement.getContext("2d");

            currentImage.addEventListener('error', () => {
              this.$message.error(this.$_lang('获取图片失败'));
            }, false);
            currentImage.addEventListener('load', () => {
              context.drawImage(currentImage, 0, 0, this.canvasRenderWidth, this.canvasRenderHeight);
              context.drawImage(this.qrCode, 99 * this.rate, 348 * this.rate, 72 * this.rate, 70 * this.rate);
              elem.download = currentElement.toDataURL("image/jpeg", 1);
              this.mergeImagesLoading = false;
            }, false);
          });
        });
      },
    },
    created() {
      this.mergeImages();
    }
  };
</script>

<style lang="scss"
  rel="stylesheet/scss">
  .composite-poster {
    min-width: 1200px;
    .downloading-cont {
      min-height: 480px;
      canvas {
        border: 2px solid #ffebae;
        border-radius: 2px;
        display: block;
      }
      > li:not(:first-child) {
        margin-left: 100px;
      }
    }
    .download-button {
      width: 100%;
      height: 40px;
      line-height: 40px;
      left: 0;
      bottom: -16px;
    }
    .share-bbb {
      margin-top: 50px;
    }
  }
</style>

如何生成二维码

//  生成二维码
      creatQrCode(inviteLink) {
        let div = document.createElement('div');
        let qrCode = new QRCode(div, {
          text: inviteLink,//
          width: 132,
          height: 132,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
        let {_elImage} = qrCode._oDrawing;
        _elImage.addEventListener('load', () => {
          this.qrCode = _elImage;
        });
      },