Bagaimana untuk menggunakan kanvas program mini untuk melukis kod QR?

Bagaimana untuk menjana kod QR dalam applet WeChat? Artikel berikut akan memperkenalkan kepada anda cara melukis kod QR menggunakan keupayaan kanvas program mini saya harap ia akan membantu anda!

Dalam perniagaan program mini WeChat, akan ada beberapa senario di mana kod QR perlu dipaparkan. Kod QR statik boleh disimpan terus secara tempatan dan dipaparkan menggunakan gambar, tetapi ia tidak sesuai untuk menjana kod QR dinamik berdasarkan maklumat berkaitan pengguna. Artikel ini akan memperkenalkan cara melukis kod QR menggunakan keupayaan kanvas program mini.

1 Kaedah 1: Jana terus melalui wx-qr

1.1 DEMO

Buka WeChat Developer Tools View

含背景图

含logo

含logo 背景图

1.2 Pemasangan

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

# 通过 yarn 安装
yarn add wx-qr

1.3 Gunakan komponen

Pertama sekali , anda Komponen app.jsonxxx.json dirujuk dalam direktori akar program mini yang dibangunkan

atau

yang perlu menggunakan komponen tersebut (nota: jangan namakan komponen bermula dengan wx-xxx, yang mungkin menyebabkan program mini WeChat menghuraikan Kegagalan tag)

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

Kemudian anda boleh menggunakan komponen secara terus dalam wxml

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

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

Sudah tentu, ia boleh turut menyokong banyak konfigurasi, lihat github atau Code Cloud dokumen.

2. Kaedah 2: Lukisan berdasarkan QRCode.js digabungkan dengan kanvas

2.0 Komponen kod QR

Corak Pengesanan Kedudukan

• Corak Pengesanan Kedudukan ialah corak kedudukan yang digunakan untuk menandakan saiz segi empat tepat bagi kod QR. Ketiga-tiga corak kedudukan ini mempunyai tepi putih dan dipanggil Pemisah untuk Corak Pengesanan Kedudukan. Sebab mengapa terdapat tiga bukannya empat bermakna tiga boleh menandakan segi empat tepat.

• Corak Masa juga digunakan untuk kedudukan. Sebabnya ada 40 saiz kod QR Jika saiz terlalu besar, perlu ada garis standard, jika tidak, ia boleh diimbas secara bengkok.

• Corak Penjajaran Hanya kod QR Versi 2 dan ke atas (termasuk Versi 2) memerlukan bahan ini dan ia juga digunakan untuk meletakkan kedudukan.

Data fungsian

• Maklumat Format wujud dalam semua saiz dan digunakan untuk menyimpan beberapa data berformat.

• Maklumat Versi >= Versi 7 atau ke atas, dua kawasan 3 x 6 perlu ditempah untuk menyimpan beberapa maklumat versi.

Kod data dan kod pembetulan ralat

Kecuali tempat di atas, tempat yang selebihnya menyimpan Kod Data dan Kod Pembetulan Ralat.

2.1 Memperkenalkan perpustakaan penjanaan data kod QR

Salin

qrcode.js kepada anda Direktori program mini yang sepadan.

2.2 Buat teg kanvas dalam applet dan tetapkan panjang dan lebar kanvas

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

2.3 Dapatkan Contoh kanvas dan konteks

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

2.4 Tentukan beberapa pembolehubah dan lukis kawasan kod data kod QR

di mana

QRCodeModel diimport daripada qrCode.js

// 二维码的颜色
const colorDark = '#000';
// 获取二维码的大小，因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
      );
    }
  }
}

Pada masa ini, kawasan kod data kod QR telah dilukis:

2.5 Lukiskan kawasan pengenalan grafik

// 绘制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 完毕

Pada masa ini, kod QR mudah dilukis dengan jayanya ~

Untuk butiran kod, sila lihat coretan kod applet WeChat

https://developers.weixin.qq.com/ s/WHJj73mX7bwv

Kod tersebut hanya menyediakan logik penjanaan kod QR yang ringkas. Jika anda memerlukan fungsi paparan kod QR yang lebih kompleks, adalah disyorkan untuk menggunakan

wx-qr atau merujuk kepada kod khusus di dalamnya. Selamat datang untuk menyerahkan isu dan bintang~~

[Cadangan pembelajaran berkaitan:

Tutorial Pembangunan Program Mini]

Atas ialah kandungan terperinci Bagaimana untuk menggunakan kanvas program mini untuk melukis kod QR?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!