1.需求图

image.png

2.需求描述

• 自定义生成二维码图片
• 二维码中心包含logo
• 二维码顶部与底部包含产品标题，底部描述
• 支持图片下载

3. 处理方案

• 使用 vue-qr 组件先生成含中心图的二维码图片（此组件功能较多但不满足需求）
• 将顶部与底部的文字或图片，切为背景轮廓图
• 将二维码图片与背景轮廓图通过canvas重叠绘制在一起
• 将canvas通过blob数据格式导出为png、jpg

4.示例代码

<template>
    <div>
        <vue-qr
      id="vueQrs"
      style="display: none"
      :logoSrc="config.imagePath"
      :logoScale="0.2"
      :text="config1.value"
      :size="640"
      :margin="0"
    ></vue-qr>
    <canvas ref="canvas" id="mycanvas" style="display: none"></canvas>
    </div>
</template>
<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr,
  },
  data() {
    return {
      config: {
        value: '123456', //显示的值、跳转的地址等信息
        imagePath: require('../../assets/img/qrIcon.jpg'), //中间logo的地址，require必要
      },
  },
mounted() {
     // 在其他页面渲染完成后，再渲染加载二维码图片（因为是基于vue-qr组件二次渲染，所以应先保证初始二维码图片先渲染出来）
    this.$next(() => {
      this.initDownLoadCode()
    })
  },
   methods: {
  // 初始化下载图片
    initDownLoadCode() {
      // 获取 Canvas 元素
      // const canvas = this.$refs.canvas  // 此处不能用ref获取dom元素，会导致canvas无法正常渲染

      const canvas = document.getElementById('mycanvas')
      const ctx = canvas.getContext('2d')
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      let imgBox = document.getElementById('vueQrs')
      let img = imgBox.src
      // 创建两个 Image 对象
      const image1 = new Image()
      const image2 = new Image()
      image1.src = this.img2 // 替换为你的第一张图片路径
      // 加载第一张图片
      image1.onload = () => {
    
        // 调整canvas清晰度
        var dpr =
          window.devicePixelRatio ||
          window.webkitDevicePixelRatio ||
          window.mozDevicePixelRatio ||
          1
        canvas.width = image1.width * dpr
        canvas.height = image1.height * dpr
        canvas.style.width = image1.width + 'px'
        canvas.style.height = image1.width + 'px'
        ctx.scale(dpr, dpr)

        // 在 canvas 上绘制第一张图片
        ctx.drawImage(image1, 0, -20, canvas.width, canvas.height)

        // 加载第二张图片
        image2.src = img // 替换为你的第二张图片路径
        image2.onload = () => {
          // 在 canvas 上绘制第二张图片
          // 将第二张图片放置在第一张图片上方
          const x = (canvas.width - image2.width) / 2
          const y = (canvas.height - image2.height) / 2
          ctx.drawImage(image2, x, y, image2.width, image2.height)
        }
      }
    },
}
}
</script>