>首页> IT >

焦点热门:聊聊Vue3+qrcodejs如何生成二维码并添加文字描述

时间:2022-08-02 22:01:01       来源:转载
Vue3如何更好地使用qrcodejs生成二维码并添加文字描述?下面本篇文章给大家介绍一下Vue3+qrcodejs生成二维码并添加文字描述,希望对大家有所帮助。

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


(资料图)

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

生成二维码

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

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

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

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

最后加上自定义文字即可

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

qrCodeOptionqrcode相关配置,详情qrcode - npm (npmjs.com)

<script setup>import QRCode from "qrcode";import { onMounted, ref } from "vue";const props = defineProps({  //二维码存储内容  qrUrl: {    type: String,    default: "Hello World"  },  // canvas width  width: {    type: Number,    default: 400  },  // canvas height  height: {    type: Number,    default: 400  },  // 二维码尺寸(正方形 长宽相同)  qrSize: {    type: Number,    default: 360  },  // 二维码底部文字  qrText: {    type: String,    default: "Hello World"  },  //底部说明文字字号  qrTextSize: {    type: Number,    default: 24  }});const qrCodeOption = {  errorCorrectionLevel: "H",  width: props.qrSize,  version: 7};const canvas = ref();/** * @argument qrUrl        二维码内容 * @argument qrSize       二维码大小 * @argument qrText       二维码中间显示文字 * @argument qrTextSize   二维码中间显示文字大小(默认16px) */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;      setTimeout(() => {        ctx.drawImage(image, (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);        }      }, 0);    })    .catch((err: Error) => {      console.error(err);    });};onMounted(() => {  handleQrcode();});</script>

思考和优化setTimeout改为Promise

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

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

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

可以改用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 });

父组件调用

全局注册

可以把组件注册为全局组件,可以参考文章Vue项目中的实用技巧记录

其中包括webpackvite遍历vue文件注册全局组件

调用组件

效果如图

多二维码遍历下载

上面补充的下载方法中,需要使用defineExpose,不然会调用不到子组件方法

<script setup>import { reactive, ref } from "vue";const qrcode = ref();const qrcodeList = reactive([  { id: 1, label: "山卡拉OK" },  { id: 2, label: "伍六七" },  { id: 3, label: "梅小姐" },  { id: 4, label: "鸡大保" },  { id: 5, label: "小飞鸡" }]);const downloadAll = () => {  qrcode.value.map((item: any) => {    item.savePic();  });};</script>

Option Api案例

Option Api的案例如下

src/components/QRcodeOption.vue · LWH/vite-vue3-project - 码云 - 开源中国 (gitee.com)

src/views/qrcode/qrcode2.vue · LWH/vite-vue3-project - 码云 - 开源中国 (gitee.com)

(学习视频分享:web前端开发、编程基础视频)

以上就是聊聊Vue3+qrcodejs如何生成二维码并添加文字描述的详细内容,更多请关注php中文网其它相关文章!

关键词: 字体大小 显示文字 设置字体