Vue3How to better use qrcodejs to generate QR codes and add text descriptions? The following article will introduce you to Vue3 qrcodejs to generate QR codes and add text descriptions. I hope it will be helpful to you.

In recent projects, there is a need to generate a QR code function. It is also necessary to add a text description at the bottom of the QR code and merge the QR code and text into one image for download. requirements.

The previous project usedvue-qr, which is really easy to use, but considering adding text description, I choseqrcodejslater. (Learning video sharing:vue video tutorial)

The article project is based on "Practical Record of Using Vite to Build Vue3 Projects"

https://juejin.cn/ post/7082307153192550430

Generate QR code

Installqrcodejs, and install its type definition module

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

Create a new global QR code componentQRcode.vue. The QR code information and text description are passed in from the outside.

The basic operation is to first callqrcodetoDataURLmethod, obtain theBase64image information of the QR code, then create a newImage, and then draw the image intoCanvas

Finally add custom text

It should be noted that the position of the text is centered at the bottom of the picture

qrCodeOptionis theqrcoderelated configuration , detailsqrcode - npm (npmjs.com)

Thinking and optimizationsetTimeoutchanged toPromise

The function of QR code can basically be used here, but I am wondering why

setTimeoutneeds to be used here?

If it is

nextTick, is that okay? The answer is no, the reason is thatnextTickis a microtask, which is actually executed before the DOM is refreshed, whilesetTimeoutis executed after.

You can notice that there is a new

Imagemethod in the code. The image loading is asynchronous, so is there a better way to handle it?

You can use

Promiseinstead, just return the image in theonloadmethod of the image, so rewrite it ashandleQrcode

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); }); };

QR code download

Once you have the QR code, you need to download it. To supplement the download method, add

inside the component and use it directly

canvas toDataURLConvert the method toBase64

//保存图片 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 });

Parent component call

Global registration

You can put the component To register as a global component, you can refer to the article

Practical Tips Record in Vue Project

, including

webpackandviteTraversalvueFile registration global component

Calling component

The effect is as shown

多二QR code traversal download

In the download method added above, you need to use

defineExpose, otherwise the sub-component method

Option Api case## will not be called

#The case of Option Api is as follows

src/components/QRcodeOption.vue · LWH/vite-vue3-project - Code Cloud - Open Source China (gitee.com)

src/views/qrcode/qrcode2.vue · LWH/vite-vue3-project - Code Cloud - Open Source China (gitee.com)

(Learning video sharing:

webfrontenddevelopment

、Basic programming video)

The above is the detailed content of Let’s talk about how Vue3+qrcodejs generates QR codes and adds text descriptions. For more information, please follow other related articles on the PHP Chinese website!