vue实现合成背景图并点击下载

实现效果图如下：（合并背景和二维码）

重要插件下载
npm i qrcodejs2 -S
npm i html2canvas -S

代码如下：

<template>
  <div class="shareBox">
      <van-nav-bar
        title="下载图片"
        left-arrow
        @click-left="goBack"
        :fixed="true"
      >
      <template #left>
        <img src="@/assets/imgs/home/left.png" alt />
      </template>
    </van-nav-bar>
    <div class="sharePage" @click="createPoster">
      <div
        ref="posterHtml"
        id="posterHtml"
        :style="{ backgroundImage: 'url(' + posterHtmlBg + ')' }"
      >
        <!-- 二维码 -->
        <div class="qrcode">
          <div
            id="qrcodeImg"
            ref="qrcodeImg"
            style="width: 140px; height: 140px;"
          ></div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userApi } from "@/api/public.js";
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      posterHtmlBg: require("../../assets/imgs/share/share.png"), // 背景图
      posterImg: "", // 最终生成的海报图片
      invite_code: "",
      h5_url: "",
    };
  },
  created() {
    this.initUser();
  },
  methods: {
    initUser() {
      userApi().then(res => {
        console.log(res);
        if (res.code == 200) {
          this.invite_code = res.data.invite_code;
          this.h5_url = res.data.h5_url;
          var url = this.h5_url + "?invite_code=" + this.invite_code;
          this.$nextTick(() => {
            this.createQrcode(url);
          });
        }
      });
    },
    goBack(){
      this.$router.go(-1)
    },
    createQrcode(text) {
      // 生成二维码
      this.$nextTick(() => {
        let qrcodeImgEl = this.$refs.qrcodeImg;
        console.log(this);
        qrcodeImgEl.innerHTML = "";
        let qrcode = new QRCode(qrcodeImgEl, {
          width: 140,
          height: 140,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
        qrcode.makeCode(text);
      });
    },
    createPoster() {
      // 生成海报
      this.$nextTick(() => {
        let vm = this;
        let domObj = vm.$refs.posterHtml;
        console.log(domObj);
        html2canvas(domObj, {
          useCORS: true,
          allowTaint: false,
          logging: false,
          letterRendering: true,
          onclone(doc) {
            console.log("doc", doc);
            let e = doc.querySelector("#posterHtml");
            e.style.display = "block";
          },
        }).then(function (canvas) {
          // 在微信里,可长按保存或转发
          vm.posterImg = canvas.toDataURL("image/png");

          let a = document.createElement("a");

          a.href =  vm.posterImg;

          a.setAttribute("download", "code-download");

          a.click();
          console.log(vm.posterImg);
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
body,
	html,
	#app {
	 	background: #ffffff !important;
	}
	.sharePage ,.shareBox{
		  width: 100%;
		  height: 100%;
	}
	#posterHtml {
		  height: 100%;
		  width: 100%;
		  background-size: cover;
		  background-repeat: no-repeat;
	}
	.qrcode {
		  width: 160px;
		  height: 160px;
		  position: fixed;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -50%);
		  display: flex;
		  align-items: center;
		  justify-content:center;
		  background:#E8F0FF; 
	 
	}
</style>