ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?-ミニプログラム開発-php.cn

ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?

青灯夜游

リリース： 2022-01-06 10:14:37

転載

5984 人が閲覧しました

WeChat アプレットで QR コードを生成するにはどうすればよいですか?ミニプログラムのキャンバス機能を使ってQRコードを描画する方法を次の記事で紹介しますので、ご参考になれば幸いです。

ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?

#WeChat ミニプログラムビジネスでは、QR コードを表示する必要があるシナリオがいくつかあります。静的 QR コードはローカルに直接保存し、画像を使用して表示できますが、ユーザー関連情報に基づいて動的 QR コードを生成するのには適していません。この記事では、ミニプログラムのキャンバス機能を使ってQRコードを描画する方法を紹介します。

1 方法 1: `wx-qr`

1.1 デモを通して直接生成

# #WeChat 開発者ツールが表示されます

ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?

背景画像を含む

含まれますロゴ

ロゴの背景画像が含まれます

1.2 インストール

# 通过 npm 安装
npm i wx-qr -S

# 通过 yarn 安装
yarn add wx-qr

ログイン後にコピー

1.3 コンポーネントを使用します

最初に開発しますコンポーネントは、コンポーネントを使用する必要があるミニプログラム app.json または

xxx.json

のルートディレクトリで参照されています (注意:コンポーネントに wx-xxx という名前を付けないと、WeChat アプレットがタグの解析に失敗する可能性があります)

{
  "usingComponents": {
    "qr-container": "wx-qr"
  }
}

ログイン後にコピー

その後、コンポーネントを wxml# で直接使用できます。 ##

<qr-container text="{{qrTxt}}" size="750"></qr-container>

ログイン後にコピー

Page({
    data: {
        qrTxt: &#39;https://github.com/liuxdi/wx-qr&#39;,
    },
});

ログイン後にコピー

もちろん、多くの構成をサポートすることもできます。詳細については、

github または codecloud のドキュメントを参照してください。

2. 方法 2: Canvas と組み合わせた QRCode.js に基づく描画

2.0 QR コードのコンポーネント

##位置決めパターン
位置検出パターンは、QR コードの長方形のサイズをマークするために使用される位置決めパターンです。これら 3 つの位置決めパターンは白いエッジを持ち、位置検出パターンのセパレーターと呼ばれます。 4 つではなく 3 つある理由は、3 つあれば長方形をマークできることを意味します。
タイミングパターンは位置決めにも使用されます。理由は、QRコードのサイズが40種類あり、サイズが大きすぎると基準線がないと斜めに読み取られてしまう可能性があるためです。
配置パターンバージョン 2 以降 (バージョン 2 を含む) の QR コードのみがこの要素を必要とし、位置決めにも使用されます。
機能データ
フォーマット情報はあらゆるサイズで存在し、フォーマットされたデータを保存するために使用されます。
バージョン情報 >= バージョン 7 以降では、バージョン情報を保存するために 2 つの 3 x 6 領域を予約する必要があります。
データコードと誤り訂正コード
上記以外の箇所には、データコードと誤り訂正コードが格納されます。

2.1 QR コードデータ生成ライブラリの紹介

qrcode.js をコピーします。ミニプログラムの対応するディレクトリ。

2.2 ミニプログラムでキャンバスタグを作成し、キャンバスの長さと幅を設定します

<canvas id="qr" type="2d" style="height: 750rpx;width: 750rpx;"></canvas>

ログイン後にコピー

2.3 CanvasインスタンスとContextを取得

const query = this.createSelectorQuery();
let dpr = wx.getSystemInfoSync().pixelRatio;
query.select(&#39;#qr&#39;).fields({ node: true, size: true, id: true })
  .exec((res) => {
    let { node: canvas, height, width } = res[0];
    let ctx = canvas.getContext(&#39;2d&#39;);
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr);
  })

ログイン後にコピー

2.4 いくつかの変数を定義し、QRコードのデータコード領域を描画

QRCodeModel は qrCode.js からインポートされます

// 二维码的颜色
const colorDark = &#39;#000&#39;;
// 获取二维码的大小，因css设置的为750rpx，将其转为px
const rawViewportSize = getPxFromRpx(750);
// 二维码容错率{ L: 1, M: 0, Q: 3, H: 2 }
const correctLevel = 0;
// 创建二维码实例对象，并添加数据进行生成
const qrCode = new QRCodeModel(-1, correctLevel);
qrCode.addData(url);
qrCode.make();

// 每个方向的二维码数量
const nCount = qrCode.moduleCount;
// 计算每个二维码方块的大小
const nSize = getRoundNum(rawViewportSize / nCount, 3)
// 每块二维码点的大小比例
const dataScale = 1;
// 计算出dataScale不为1时，每个点的偏移值
const dataXyOffset = (1 - dataScale) * 0.5;
// 循环行列绘制数据码区
for (let row = 0; row < nCount; row++) {
  for (let col = 0; col < nCount; col++) {
    // row 和 col 处的模块是否是黑色区
    const bIsDark = qrCode.isDark(row, col);
    // 是否是二维码的图案定位标识区 Position Detection Pattern（如本模块，是三个顶点位置处的大方块）
    const isBlkPosCtr = (col < 8 && (row < 8 || row >= nCount - 8)) || (col >= nCount - 8 && row < 8);
    // 是否是Timing Patterns，也是用于协助定位扫描的
    const isTiming = (row == 6 && col >= 8 && col <= nCount - 8) || (col == 6 && row >= 8 && row <= nCount - 8);
    // 如果是这些区域 则不进行绘制
    let isProtected = isBlkPosCtr || isTiming;
    // 计算每个点的绘制位置（left，top）
    const nLeft = col * nSize + (isProtected ? 0 : dataXyOffset * nSize);
    const nTop = row * nSize + (isProtected ? 0 : dataXyOffset * nSize);
    // 描边色、线宽、填充色配置
    ctx.strokeStyle = colorDark;
    ctx.lineWidth = 0.5;
    ctx.fillStyle = bIsDark ? colorDark : "rgba(255, 255, 255, 0.6)";
    // 如果不是标识区，则进行绘制
    if (!isProtected) {
      ctx.fillRect(
        nLeft,
        nTop,
        (isProtected ? (isBlkPosCtr ? 1 : 1) : dataScale) * nSize,
        (isProtected ? (isBlkPosCtr ? 1 : 1) : dataScale) * nSize
      );
    }
  }
}

ログイン後にコピー

この時点で、QR コードのデータコード領域が描画されています:

ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?

2.5 グラフィック認識領域の描画

// 绘制Position Detection Pattern
ctx.fillStyle = colorDark;
ctx.fillRect(0, 0, 7 * nSize, nSize);
ctx.fillRect((nCount - 7) * nSize, 0, 7 * nSize, nSize);
ctx.fillRect(0, 6 * nSize, 7 * nSize, nSize);
ctx.fillRect((nCount - 7) * nSize, 6 * nSize, 7 * nSize, nSize);
ctx.fillRect(0, (nCount - 7) * nSize, 7 * nSize, nSize);
ctx.fillRect(0, (nCount - 7 + 6) * nSize, 7 * nSize, nSize);
ctx.fillRect(0, 0, nSize, 7 * nSize);
ctx.fillRect(6 * nSize, 0, nSize, 7 * nSize);
ctx.fillRect((nCount - 7) * nSize, 0, nSize, 7 * nSize);
ctx.fillRect((nCount - 7 + 6) * nSize, 0, nSize, 7 * nSize);
ctx.fillRect(0, (nCount - 7) * nSize, nSize, 7 * nSize);
ctx.fillRect(6 * nSize, (nCount - 7) * nSize, nSize, 7 * nSize);
ctx.fillRect(2 * nSize, 2 * nSize, 3 * nSize, 3 * nSize);
ctx.fillRect((nCount - 7 + 2) * nSize, 2 * nSize, 3 * nSize, 3 * nSize);
ctx.fillRect(2 * nSize, (nCount - 7 + 2) * nSize, 3 * nSize, 3 * nSize);
// 绘制Position Detection Pattern 完毕

// 绘制Timing Patterns
const timingScale = 1;
const timingXyOffset = (1 - timingScale) * 0.5;
for (let i = 0; i < nCount - 8; i += 2) {
  _drawDot(ctx, 8 + i, 6, nSize, timingXyOffset, timingScale);
  _drawDot(ctx, 6, 8 + i, nSize, timingXyOffset, timingScale);
}
// 绘制Timing Patterns 完毕

ログイン後にコピー

この時点で、簡単な QR コードが正常に描画されます~

ミニプログラムのキャンバスを使用して QR コードを描画するにはどうすればよいですか?