最近项目中有生成二维码功能的需求,还需要在二维码底部添加文字描述,并把二维码和文字合并成一张图下载的要求。
(资料图)
之前的项目有用到vue-qr
,确实非常好用,但是考虑到添加文字描述,后面就选择了qrcodejs
。(学习视频分享:vue视频教程)
生成二维码
安装qrcodejs
,并安装其类型定义模块
npm i qrcode -Snpm install --save @types/qrcode
新建全局二维码组件QRcode.vue
,二维码信息及文字描述都由外部传入
基本操作就是先调用qrcode
的toDataURL
方法,获取到二维码的Base64
图片信息,随后新建Image
,再把图片画到Canvas
里
最后加上自定义文字即可
需要注意的是文字的位置是在图片底部居中
qrCodeOption
为qrcode
相关配置,详情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项目中的实用技巧记录
其中包括webpack
和vite
遍历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>downlaod
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中文网其它相关文章!