Vue3+qrcodejs怎么生成二維碼并添加文字描述

本篇內容介紹了“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 id="canvas" ref="canvas" :width="width" :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>

“Vue3+qrcodejs怎么生成二維碼并添加文字描述”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！