前端生成二维码

Jay_帅小伙2024-05-24 23:39

直接img标签显示

javascript 复制代码

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

javascript 复制代码

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