前端生成二维码

直接img标签显示
npm i use_qrcode
npm包地址

<img :src="qrcode" alt="QR Code" />
const txt: any = ref('https://baidu.com')
const qrcode = useQRCode(txt)
const qrcodeLogo = useQRCode(txt, { logoSrc: 'https://www.antdv.com/assets/logo.1ef800a8.svg' })

import { useQRCode as _useQRCode } from "@vueuse/integrations/useQRCode";
import * as QRCode from "qrcode";
import { toRef, isClient } from "@vueuse/shared";
import { ref, watch } from "vue-demi";export function useQRCode(text: string, options?: any) {if (options?.logoSrc) return useLogoQRCode(text, options);return _useQRCode(text, options);
}export function useLogoQRCode(text, options) {const src = toRef(text);const result = ref("");const canvas: any = document.createElement("canvas");canvas.width = 132;canvas.height = 132;const logoImgSrc = ref(options.logoSrc);const labelText = "";watch(src,async (value) => {if (src.value && isClient) result.value = "";await QRCode.toDataURL(value, options, (err: any, url: string) => {let imgQRCode = new Image();imgQRCode.src = url;imgQRCode.crossOrigin = "anonymous";let img = new Image();img.src = logoImgSrc.value;img.crossOrigin = "anonymous";try {let ctx = (<HTMLCanvasElement>canvas).getContext("2d");// ctx.clearRect(0, 0, canvas.width, canvas.height);setTimeout(() => {ctx.drawImage(imgQRCode,0,0,imgQRCode.width,imgQRCode.height,0,0,canvas.width,canvas.width);let canvas_Centre_Horizontal = canvas.width / 2;let canvas_Centre_Vertical = canvas.width / 2;let logoSize_Horizontal = canvas.width * 0.16;let logoSize_Vertical = canvas.width * 0.16;let imageStart_Horizontal =canvas_Centre_Horizontal - logoSize_Horizontal / 2;let imageStart_Vertical =canvas_Centre_Vertical - logoSize_Vertical / 2;ctx.drawImage(img,//0, 0, THIS.img.nativeElement.width, THIS.img.nativeElement.height,imageStart_Horizontal,imageStart_Vertical,logoSize_Horizontal,logoSize_Vertical);ctx.font = "10px Arial";ctx.textAlign = "center";ctx.fillText(labelText, canvas.width / 2, canvas.height - 10);result.value = canvas.toDataURL("image/png");}, 50);} catch (ex) {console.log(ex);}});},{ immediate: true });return result;
}