以vue項目為例，其他類型項目其實也是一樣的

所需components：

1. QRCode

2. html2canvas

npm install qrcodejs2?-- save

npm install html2canvas --save?

?在需要使用的地方引入

import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'

?生成二維碼

 creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.url + 'register?code=' + this.info.code,
        colorDark: '#000000',
        colorLight: '#ffffff',
        width:80,
        height:80,
        correctLevel: QRCode.CorrectLevel.H
      })
    },

// this.$refs.qrCodeUrl 用來承載二維碼的容器
// text 二維碼包含的信息
// 其余配置看文檔去

dom轉圖片

   toImage() {
      html2canvas(this.$refs.imageWrapper).then(canvas => {
        this.imgUrl = canvas.toDataURL('image/png')
        if (this.imgUrl !== '') {
          var a = document.createElement('a') // 創建一個a節點插入的document
          var event = new MouseEvent('click') // 模擬鼠標click點擊事件
          a.download = '圖片名字' // 設置a節點的download屬性值
          a.href = this.imgUrl // 將圖片的src賦值給a節點的href
          a.dispatchEvent(event) // 觸發鼠標點擊事件
        }
      })
    }

// this.$refs.imageWrapper 容器，生成的圖片就是其中包含的內容
// this.imgUrl 就是生成的圖片地址

?小demo，供參考

<template>
  <div class="bgBox" ref="imageWrapper">
    <div class="name">{{ info.name }}</div>
    <img class="bgImg" :src="img" alt="" />
    <div class="qrcode" ref="qrCodeUrl"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from 'html2canvas'
import img from '@/assets/img/bg.jpg'
export default {
  data() {
    return {
      info: {},
      img,
      // url:process.env.VUE_APP_BASE_API
      url: 'https://baidu.com/'
    }
  },
  mounted() {
    this.info = this.$route.query
    this.creatQrCode()
    this.$nextTick(() => {
      this.toImage()
    })
  },
  methods: {
    // 生成二維碼
    creatQrCode() {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: this.url + 'register?code=' + this.info.code,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    // dom轉圖片
    toImage() {
      html2canvas(this.$refs.imageWrapper).then(canvas => {
        this.imgUrl = canvas.toDataURL('image/png')
        if (this.imgUrl !== '') {
          var a = document.createElement('a') // 創建一個a節點插入的document
          var event = new MouseEvent('click') // 模擬鼠標click點擊事件
          a.download = '圖片名字' // 設置a節點的download屬性值
          a.href = this.imgUrl // 將圖片的src賦值給a節點的href
          a.dispatchEvent(event) // 觸發鼠標點擊事件
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bgBox {
  position: relative;
  width: 750px;
  height: 1334px;
  .bgImg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
  }
  .name {
    position: absolute;
    top: 64px;
    left: 330px;
    z-index: 2;
    font-size: 42px;
  }
  .qrcode {
    position: absolute;
    bottom: 44px;
    left: 40px;
    width: 160px;
    height: 160px;
  }
}
</style>