聊聊Vue3+qrcodejs如何生成二维码并添加文字描述

青灯夜游

发布时间：2022-08-02 21:19:24

6989人浏览过

来源于掘金社区

转载

vue3如何更好地使用qrcodejs生成二维码并添加文字描述？下面本篇文章给大家介绍一下vue3+qrcodejs生成二维码并添加文字描述，希望对大家有所帮助。

聊聊Vue3+qrcodejs如何生成二维码并添加文字描述

最近项目中有生成二维码功能的需求，还需要在二维码底部添加文字描述，并把二维码和文字合并成一张图下载的要求。

之前的项目有用到vue-qr，确实非常好用，但是考虑到添加文字描述，后面就选择了qrcodejs。（学习视频分享：vue视频教程）

文章项目基于《使用Vite搭建Vue3项目实践记录》https://juejin.cn/post/7082307153192550430

生成二维码

安装qrcodejs,并安装其类型定义模块

立即学习“前端免费学习笔记（深入）”；

npm i qrcode -S
npm install --save @types/qrcode

新建全局二维码组件QRcode.vue，二维码信息及文字描述都由外部传入

基本操作就是先调用qrcode的toDataURL方法，获取到二维码的Base64图片信息，随后新建Image，再把图片画到Canvas里

最后加上自定义文字即可

需要注意的是文字的位置是在图片底部居中

qrCodeOption为qrcode相关配置，详情qrcode - npm (npmjs.com)

思考和优化`setTimeout`改为`Promise`

到这里二维码的功能基本可以使用了，但是我在想为什么这里需要使用到setTimeout呢？

如果是nextTick行不行？答案是不行的，原因是nextTick是微任务，实在DOM刷新之前就执行了，而setTimeout在之后执行。

可以注意到代码中有新建Image方法，图片加载是异步的，所以有更好的处理方法吗？

Bolt.new

Bolt.new是一个免费的AI全栈开发工具

下载

可以改用Promise，在图片的onload方法中返回图片就可以了，所以改写下handleQrcode

const handleQrcode = () => {
  let dom = canvas.value as HTMLCanvasElement;
  QRCode.toDataURL(props.qrUrl, qrCodeOption)
    .then((url: string) => {
      // 画二维码里的logo// 在canvas里进行拼接
      const ctx = dom.getContext("2d") as CanvasRenderingContext2D;
      const image = new Image();
      image.src = url;
      new Promise((resolve) => {
        image.onload = () => {
          resolve(image);
        };
      }).then((img: HTMLImageElement) => {
        // console.log(img, ctx)
        ctx.drawImage(img, (props.width - props.qrSize) / 2, 0, props.qrSize, props.qrSize);
        if (props.qrText) {
          //设置字体
          ctx.font = "bold " + props.qrTextSize + "px Arial";
          let tw = ctx.measureText(props.qrText).width; // 文字真实宽度
          let ftop = props.qrSize - props.qrTextSize; // 根据字体大小计算文字top
          let fleft = (props.width - tw) / 2; // 根据字体大小计算文字left
          ctx.fillStyle = "#fff";
          ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
          ctx.fillStyle = "#333";
          ctx.fillText(props.qrText, fleft, ftop);
        }
      });
    })
    .catch((err: Error) => {
      console.error(err);
    });
};

二维码下载

有了二维码就需要下载，补充下载方法，在组件内部加

直接使用canvas toDataURL方法转成Base64

//保存图片
const savePic = () => {
  let dom = canvas.value as HTMLCanvasElement;
  let a = document.createElement("a");
  //将二维码面板处理为图片
  a.href = dom.toDataURL("image/png", 0.5);
  a.download = props.qrUrl + ".png";
  a.click();
};

defineExpose({ savePic });