怎么利用小程序的canvas來繪制二維碼

本篇文章給大家分享的是有關怎么利用小程序的canvas來繪制二維碼，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

在微信小程序的業務中會有一些需要展示二維碼的場景。靜態二維碼可以直接存放在本地，使用圖片方式展示，但不適合根據用戶相關信息生成動態的二維碼。下面將介紹下利用小程序的canvas能力繪制二維碼。

1 方法一：通過wx-qr直接生成

1.1 DEMO

微信開發者工具打開查看

# 通過 npm 安裝

1.2 安裝

npm i wx-qr -S

# 通過 yarn 安裝
yarn add wx-qr

1.3 使用組件

首先在你所開發的小程序根目錄 app.json 或需要使用該組件的 xxx.json 中引用組件

（注意：請不要將組件命名為 wx-xxx 開頭，可能會導致微信小程序解析 tag 失敗 ）

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

之后就可以在 wxml 中直接使用組件

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

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

當然，還可以支持很多種配置，詳見github 或者 碼云文檔。

2. 方式二：基于QRCode.js結合canvas繪制

2.0 二維碼的組成部分

定位圖案

• Position Detection Pattern是定位圖案，用于標記二維碼的矩形大小。這三個定位圖案有白邊叫Separators for Postion Detection Patterns。之所以三個而不是四個意思就是三個就可以標識一個矩形了。

• Timing Patterns也是用于定位的。原因是二維碼有40種尺寸，尺寸過大了后需要有根標準線，不然掃描的時候可能會掃歪了。

• Alignment Patterns 只有Version 2以上（包括Version2）的二維碼需要這個東東，同樣是為了定位用的。

功能性數據

• Format Information 存在于所有的尺寸中，用于存放一些格式化數據的。

• Version Information 在 >= Version 7以上，需要預留兩塊3 x 6的區域存放一些版本信息。

數據碼和糾錯碼

• 除了上述的那些地方，剩下的地方存放 Data Code 數據碼 和 Error Correction Code 糾錯碼。

2.1 引入二維碼數據生成庫

復制qrcode.js至你的小程序相應目錄。

2.2 小程序中建立canvas標簽，并給canvas設置長寬

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

2.3獲取canvas實例及上下文

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 定義一些變量及繪制二維碼的數據碼區

其中QRCodeModel是從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
      );
    }
  }
}

此時已經繪制出二維碼的數據碼區：

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

這時候，一個樸素的二維碼就繪制成功啦~

以上就是怎么利用小程序的canvas來繪制二維碼，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。