使用 canvas 模拟微信生成二维码名片

需求说明

• 模拟微信的二维码名片的功能
• 接口获取到用户的二维码，前端将二维码，背景图，用户头像(圆形)，用户姓名等信息结合生成一张图片

示例

等比例创建画布

• 获取背景图，监听图片的 onload 事件
• 图片加载完成后，创建 canvas 元素
• canvas 宽高比设定为背景图的宽高比，防止背景图变形或者被切掉

<img :src="reDrawQcodeSrc" alt="" />

// 可视窗口宽度
let pageWidth =
  window.innerWidth ||
  document.documentElement.clientWidth ||
  document.body.clientWidth;
// 可视窗口高度
let pageHeight =
  window.innerHeight ||
  document.documentElement.clientHeight ||
  document.body.clientHeight;
console.log("pageWidth", pageWidth);
console.log("pageHeight", pageHeight);
// 背景图片
let imgBg = new Image();
imgBg.src = require("../assets/shareBg.jpg");
imgBg.crossOrigin = "Anonymous";
imgBg.onload = () => {
  // 创建画布
  let canvas = document.createElement("canvas");
  // 规定画布大小
  canvas.width = pageWidth; // 画布宽度占满屏幕
  canvas.height = (canvas.width * imgBg.height) / imgBg.width; // 画布根据背景图宽高比等比例方法或缩小
  console.log("canvas.width1", canvas.width);
  console.log("canvas.height1", canvas.height);
  let context = canvas.getContext("2d");
  // 绘制背景图
  context.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
  let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
  this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

添加二维码图片

• 等待加载完背景图后，绘制二维码图片
• 模拟接口获取二维码的地址
• 计算二维码图片展示的位置

// 二维码图片
let imgQcode = new Image();
this.qrcode = 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_960_720.jpg'
imgQcode.src = this.qrcode + "?time=" + new Date().valueOf(); // 模拟接口获取二维码，绘制线上图片
imgQcode.crossOrigin = "Anonymous";
imgQcode.onload = () => {
  let left = canvas.width * 0.2; // 二维码宽度设定为总宽的 60%，设定左侧空隙为 20% 使其水平居中
  let top = canvas.height * 0.8 - canvas.width * 0.6;
  // 绘制二维码
  context.drawImage(
    imgQcode,
    left,
    top,
    canvas.width * 0.6,
    canvas.width * 0.6
  );
  let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
  this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

添加文字描述

• 二维码图片加载完成后，绘制文字

// 绘制文字
//设置填充文字样式
context.font = "16px Microsoft Yahei";
context.fillStyle = "#ffffff";
//设置文字及其位置
context.fillText(
  this.userPhoneId + "的二维码",
  canvas.width * 0.23,
  canvas.height * 0.2
);
let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
this.reDrawQcodeSrc = base64; // 赋值给 img 标签

添加用户头像(圆形)

// 用户头像-圆形
let imgHead = new Image();
imgHead.src = require("../assets/logo.png");
imgHead.crossOrigin = "Anonymous";
imgHead.onload = () => {
  let circle = {
    left: canvas.width * 0.13,
    top: canvas.height * 0.2,
    radio: canvas.width * 0.065,
  };
  // 绘制圆形区域
  context.arc(circle.left, circle.top, circle.radio, 0, 2 * Math.PI);
  context.clip();
  context.fill();
  context.drawImage(
    imgHead,
    circle.left - circle.radio,
    circle.top - circle.radio,
    circle.radio * 2,
    circle.radio * 2
  );
  let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
  this.reDrawQcodeSrc = base64; // 赋值给 img 标签
};

完整代码

<template>
  <div class="mainBox">
    <img :src="reDrawQcodeSrc" alt="" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      qrcode:
        "https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_960_720.jpg",
      userPhoneId: "月半周",
      reDrawQcodeSrc: "",
    };
  },
  mounted() {
    this.reDrawQcode();
  },
  methods: {
    // 重绘图片-背景图与二维码的组合
    reDrawQcode() {
      // 可视窗口宽度
      let pageWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      // 可视窗口高度
      let pageHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      console.log("pageWidth", pageWidth);
      console.log("pageHeight", pageHeight);
      // 背景图片
      let imgBg = new Image();
      imgBg.src = require("../assets/shareBg.jpg");
      imgBg.crossOrigin = "Anonymous";
      imgBg.onload = () => {
        // 创建画布
        let canvas = document.createElement("canvas");
        // 规定画布大小
        canvas.width = pageWidth; // 画布宽度占满屏幕
        canvas.height = (canvas.width * imgBg.height) / imgBg.width; // 画布根据背景图宽高比等比例方法或缩小
        console.log("canvas.width1", canvas.width);
        console.log("canvas.height1", canvas.height);
        let context = canvas.getContext("2d");
        // 绘制背景图
        context.drawImage(imgBg, 0, 0, canvas.width, canvas.height);
        // 二维码图片
        let imgQcode = new Image();
        imgQcode.src = this.qrcode + "?time=" + new Date().valueOf(); // 模拟接口获取二维码，绘制线上图片
        imgQcode.crossOrigin = "Anonymous";
        imgQcode.onload = () => {
          let left = canvas.width * 0.2; // 二维码宽度设定为总宽的 60%，设定左侧空隙为 20% 使其水平居中
          let top = canvas.height * 0.8 - canvas.width * 0.6;
          // 绘制二维码
          context.drawImage(
            imgQcode,
            left,
            top,
            canvas.width * 0.6,
            canvas.width * 0.6
          );
          // 绘制文字
          //设置填充文字样式
          context.font = "16px Microsoft Yahei";
          context.fillStyle = "#ffffff";
          //设置文字及其位置
          context.fillText(
            this.userPhoneId + "的二维码",
            canvas.width * 0.23,
            canvas.height * 0.2
          );
          // 用户头像-圆形
          let imgHead = new Image();
          imgHead.src = require("../assets/logo.png");
          imgHead.crossOrigin = "Anonymous";
          imgHead.onload = () => {
            let circle = {
              left: canvas.width * 0.13,
              top: canvas.height * 0.2,
              radio: canvas.width * 0.065,
            };
            // 绘制圆形区域
            context.arc(circle.left, circle.top, circle.radio, 0, 2 * Math.PI);
            context.clip();
            context.fill();
            context.drawImage(
              imgHead,
              circle.left - circle.radio,
              circle.top - circle.radio,
              circle.radio * 2,
              circle.radio * 2
            );
            let base64 = canvas.toDataURL("image/png"); // 将 canvas 画布转换成 base64 码
            this.reDrawQcodeSrc = base64; // 赋值给 img 标签
          };
        };
      };
    },
  },
};
</script>