Vue3+qrcodejs がどのように QR コードを生成し、テキストの説明を追加するかについて話しましょう

青灯夜游

リリース： 2022-08-02 21:19:24

転載

5236 人が閲覧しました

Vue3qrcodejs をより効果的に使用して QR コードを生成し、テキストの説明を追加するにはどうすればよいですか?次の記事では、QR コードを生成し、テキストの説明を追加する Vue3 qrcodejs を紹介します。

Vue3+qrcodejs がどのように QR コードを生成し、テキストの説明を追加するかについて話しましょう

最近のプロジェクトでは、QR コード関数を生成する必要があり、QR コードの下部にテキストの説明を追加し、QR コードをマージする必要があります。 QR コードとテキストを 1 つの画像にまとめてダウンロードします。

前回のプロジェクトでは非常に使いやすい vue-qr を使用していましたが、テキストの説明を追加することを考慮して、後から qrcodejs を選択しました。 (学習ビデオ共有: vue ビデオチュートリアル )

この記事のプロジェクトは、「Vite を使用して Vue3 プロジェクトを構築する実践記録」

https:/ に基づいています。 /juejin.cn/ post/7082307153192550430

QR コードを生成

インストールqrcodejs とその型定義モジュールをインストールします

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

ログイン後にコピー

新しいグローバル QR コードコンポーネント QRcode.vue を作成します。QR コード情報とテキストの説明は外部から渡されます。

基本的な操作は、最初に ## を呼び出すことです。 #qrcode toDataURL メソッドで QR コードの Base64 画像情報を取得し、新しい Image を作成して、その画像を Canvas# に描画します# #最後にカスタムテキストを追加します

テキストの位置が画像の下部の中央になることに注意してください

qrCodeOption

は

qrcode 関連の設定、詳細 qrcode - npm (npmjs.com)

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

ログイン後にコピー

思考と最適化setTimeout

に変更されましたお約束ここでは基本的にQRコードの機能が使えますが、なぜここで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);
    });
};</htmlimageelement>

ログイン後にコピー

QR コードのダウンロード

QR コードを取得したら、それをダウンロードする必要があります。ダウンロード方法を補足するには、コンポーネント内に

を追加して使用します直接

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

ログイン後にコピー

親コンポーネント呼び出し

グローバル登録##に変換します

#コンポーネントをグローバルコンポーネントとして登録するには、webpack# を含む記事 Vue プロジェクトでの実践的なヒントの記録を参照してください。 ## と

vite

Traversalvueファイル登録グローバルコンポーネント

呼び出しコンポーネント<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><template> <div> <qrcode></qrcode> </div> </template></pre><div class="contentsignin">ログイン後にコピー</div></div>効果は次のとおりです

多二 QR コードトラバーサルダウンロード

上で追加したダウンロードメソッドでは、

defineExpose Vue3+qrcodejs がどのように QR コードを生成し、テキストの説明を追加するかについて話しましょうを使用する必要があります。それ以外の場合、サブコンポーネントメソッド

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

ログイン後にコピー