Mari kita bincangkan tentang cara Vue3 qrcodejs menjana kod QR dan menambah penerangan teks

Vue3Bagaimana untuk menggunakan qrcodejs dengan lebih baik untuk menjana kod QR dan menambah penerangan teks? Artikel berikut akan memperkenalkan anda kepada Vue3 qrcodejs untuk menjana kod QR dan menambah penerangan teks saya harap ia akan membantu anda.

Dalam projek baru-baru ini, terdapat keperluan untuk menjana fungsi kod QR. Ia juga perlu menambah penerangan teks di bahagian bawah kod QR dan menggabungkan QR kod dan teks ke dalam satu imej untuk keperluan muat turun.

Saya menggunakan vue-qr dalam projek sebelumnya, dan ia sangat mudah untuk digunakan, namun, memandangkan menambah penerangan teks, saya memilih qrcodejs kemudian. (Belajar perkongsian video: tutorial video vue)

Projek artikel adalah berdasarkan "Rekod Amalan Menggunakan Vite untuk Membina Projek Vue3"

https:/ /juejin.cn/ post/7082307153192550430

Jana kod QR

Pasangqrcodejs, dan pasang modul definisi jenisnya

Global baharu Dalam komponen kod QR

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

, maklumat kod QR dan penerangan teks semuanya dihantar dari luar

QRcode.vue Operasi asasnya ialah memanggil kaedah

terlebih dahulu untuk mendapatkan

gambar maklumat kod QR, kemudian buat qrcode baharu, dan kemudian lukiskan gambar itu ke dalam toDataURLBase64ImageAkhir sekali tambah teks tersuaiCanvas

Sepatutnya. ambil perhatian bahawa kedudukan teks berpusat di bahagian bawah gambar

ialah

konfigurasi berkaitan, butiran

qrcode - npm (npmjs.com)qrCodeOptionqrcode

pemikiran dan pengoptimuman

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

ditukar kepada

setTimeoutPromiseFungsi kod QR pada asasnya boleh digunakan di sini, tetapi saya tertanya-tanya mengapa perlu digunakan di sini?

Jika ia setTimeout, bolehkah itu? Jawapannya tidak, sebabnya ialah

ialah microtask, yang sebenarnya dilaksanakan sebelum DOM dimuat semula, manakala

dilaksanakan selepas. nextTicknextTickAnda boleh perasan bahawa terdapat kaedah setTimeout baharu dalam kod Pemuatan imej tidak segerak, jadi adakah cara yang lebih baik untuk mengendalikannya?

boleh ditukar kepada Image, hanya kembalikan imej dalam kaedah

imej, jadi tulis semula sebagai

PromiseonloadhandleQrcode

Muat turun kod QR

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>

Sebaik sahaja anda mempunyai kod QR, anda perlu memuat turunnya Untuk menambah kaedah muat turun, tambah

di dalam komponen dan terus gunakan kaedah

untuk menukarnya kepada.

canvas toDataURLBase64

Panggilan komponen induk

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

Pendaftaran global

Anda boleh mendaftarkan komponen sebagai komponen global . Anda boleh merujuk artikelPetua praktikal dalam Vue projects Record

yang merangkumi dan

melintasi fail

untuk mendaftarkan komponen global webpackvitevue panggil komponen

Kesannya adalah seperti yang ditunjukkan dalam rajah

<template>
  <div>
    <qrcode></qrcode>
  </div>
</template>

Muat turun lintasan kod QR berbilang

Dalam kaedah muat turun yang ditambah di atas, anda perlu menggunakan , jika tidak, kaedah subkomponen tidak akan dipanggil

defineExposeKes Option Api

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

Kes Api Opsyen adalah seperti berikut

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)

(Mempelajari perkongsian video: pembangunan bahagian hadapan web

,

Video pengaturcaraan asas)

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara Vue3 qrcodejs menjana kod QR dan menambah penerangan teks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!