谈谈Vue3+qrcodejs生成二维码并添加文字描述
最近项目中有生成二维码功能的需求,还需要在二维码底部添加文字描述,并把二维码和文字合并成一张图下载的要求。
生成二维码
安装qrcodejs
,并安装其类型定义模块
npm i qrcode -S
npm install --save @types/qrcode
新建全局二维码组件QRcode.vue
,二维码信息及文字描述都由外部传入
基本操作就是先调用qrcode
的toDataURL
方法,获取到二维码的Base64
图片信息,随后新建Image
,再把图片画到Canvas
里
最后加上自定义文字即可
需要注意的是文字的位置是在图片底部居中
qrCodeOption
为qrcode
相关配置,详情qrcode - npm (npmjs.com)
<template>
<canvas ref="canvas" : :height="height"></canvas>
</template>
<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<HTMLCanvasElement>();
/**
* @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>
<style scoped></style>
思考和优化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<HTMLImageElement>((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
文件注册全局组件
调用组件
<template>
<div class="container">
<QRcode />
</div>
</template>
效果如图
多二维码遍历下载
上面补充的下载方法中,需要使用defineExpose
,不然会调用不到子组件方法
<template>
<div>
<QRcode v-for="item in qrcodeList" ref="qrcode" :key="item.id" :qr-url="item.label" :qr-text="item.label" />
<el-button @click="downloadAll">downlaod</el-button>
</div>
</template>
<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)
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfjbbf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01