Vue3+qrcodejs가 QR 코드를 생성하고 텍스트 설명을 추가하는 방법에 대해 이야기해 보겠습니다.
- 青灯夜游앞으로
- 2022-08-02 21:19:245222검색
Vue3qrcodejs를 사용하여 QR 코드를 생성하고 텍스트 설명을 추가하는 방법은 무엇입니까? 다음 글에서는 QR 코드를 생성하고 텍스트 설명을 추가하는 Vue3+qrcodejs를 소개하겠습니다.
최근 프로젝트에서는 QR코드 기능을 생성해야 한다는 요구사항도 있고, QR코드 하단에 텍스트 설명을 추가하고, QR코드와 텍스트를 하나의 이미지로 병합해 다운로드하는 것도 필요합니다. .
이전 프로젝트에서는 정말 사용하기 쉬운 vue-qr을 사용했는데, 텍스트 설명 추가를 고려해서 나중에 qrcodejs를 선택했습니다. (학습 영상 공유: vue video tutorialvue-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)
<template>
<canvas></canvas>
</template>
<script>
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></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);
});
};</htmlimageelement>
二维码下载
有了二维码就需要下载，补充下载方法，在组件内部加
直接使用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> <qrcode></qrcode> </div> </template>
效果如图
多二维码遍历下载
上面补充的下载方法中，需要使用defineExpose)
기사 프로젝트는 "Vite를 사용하여 Vue3 프로젝트 실습 기록 만들기"를 기반으로 합니다
https://juejin.cn/post/7082307153192550430
QR 코드 생성 h2>
qrcodejs를 설치하고 해당 유형 정의 모듈을 설치합니다. <template>
<div>
<qrcode></qrcode>
<el-button>downlaod</el-button>
</div>
</template>
<script>
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> 새로운 전역 QR 코드 구성 요소인 QRcode.vue를 만듭니다. QR 코드 정보와 텍스트 설명은 다음에서 가져옵니다. 외부
기본 작업은 먼저 qrcode의 toDataURL 메서드를 호출하여 QR 코드의 Base64 이미지 정보를 얻은 다음 생성하는 것입니다. 새 이미지를 만든 다음 그림을 캔버스마지막으로 사용자 정의 텍스트를 추가하세요
텍스트 위치가 그림 하단 중앙에 있다는 점에 유의하세요. qrCodeOption qrcode 관련 구성에 대한 자세한 내용은 qrcode - npm (npmjs.com)rrreee
setTimeout을 로 생각하고 최적화 >약속
여기서는 기본적으로 QR코드의 기능을 사용할 수 있는데 왜 여기서 setTimeout을 사용해야 하는지 궁금합니다. 🎜🎜nextTick이면 괜찮나요? 대답은 '아니요'입니다. 그 이유는 nextTick이 마이크로태스크이고 DOM이 새로 고쳐지기 전에 실제로 실행되는 반면, setTimeout은 그 후에 실행되기 때문입니다. 🎜🎜코드에 새로운 Image 메서드가 있다는 것을 알 수 있습니다. 이미지 로드는 비동기식이므로 이를 처리하는 더 좋은 방법이 있나요? 🎜🎜대신 Promise를 사용하고, 이미지의 onload 메서드에서 이미지를 반환하면 되므로 handleQrcode🎜rrreeeQR 코드 다운로드🎜QR 코드가 있는 경우 다운로드가 필요합니다. 다운로드 방법을 보완하려면 안에 🎜🎜를 추가하세요. 구성 요소를 사용하고 canvas toDataURL Base64🎜rrreee상위 구성 요소 호출
로 변환된 메서드를 직접 사용글로벌 등록
🎜컴포넌트를 글로벌 컴포넌트로 등록할 수 있으며, Vue 프로젝트 실기 기록🎜🎜🎜webpack 및 vite포함) > vue 파일 등록 전역 구성 요소🎜호출 구성 요소
rrreee🎜효과는 다음과 같습니다🎜🎜🎜다중 QR 코드 순회 다운로드
🎜위에 추가한 다운로드 방법에서는defineExpose를 사용해야 하고, 그렇지 않으면 하위 구성 요소 방법을 사용해야 합니다. 호출되지 않습니다🎜rrreee🎜Option Api 사례🎜🎜Option Api 사례는 다음과 같습니다🎜 🎜🎜src/comComponents/QRcodeOption.vue · LWH/vite-vue3-project - Code Cloud - Open Source China (gitee.com) 🎜🎜🎜🎜src/views/qrcode/qrcode2.vue · LWH/vite-vue3-project - 코드 클라우드 - 오픈 소스 중국(gitee.com)🎜🎜🎜(동영상 공유 학습: 🎜웹 프론트엔드 개발🎜, 🎜 기본 프로그래밍 영상🎜)🎜위 내용은 Vue3+qrcodejs가 QR 코드를 생성하고 텍스트 설명을 추가하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!