关键字： qrcode.js qrcode 企业微信二维码 二维码生成原理

简单修改qrcode.js源码，可以输出企业微信二维码。
关键在于修改各个点的间距，先来了解下二维码的生成原理

二维码生成原理

二维码基本结构

• 位置探测图形、位置探测图形分隔符、定位图形：用于对二维码的定位，对每个QR码来说，位置都是固定存在的，只是大小规格会有所差异；

• 校正图形：规格确定，校正图形的数量和位置也就确定了；

• 格式信息：表示改二维码的纠错级别，分为L、M、Q、H；

• 版本信息：即二维码的规格，QR码符号共有40种规格的矩阵（一般为黑白色），从21x21（版本1），到177x177（版本40），每一版本符号比前一版本 每边增加4个模块。

• 数据和纠错码字：实际保存的二维码信息，和纠错码字（用于修正二维码损坏带来的错误）。

qrcode源码浅析

• 根据上述二维码基本结构，可以来分析下部分图形的生成代码
• 从函数makeImpl开始
• 初始化码点矩阵

  this.moduleCount = 4 * this.typeNumber + 17
  this.modules = new Array(this.moduleCount)
  for (var r = 0; r < this.moduleCount; r++) {
    this.modules[r] = new Array(this.moduleCount)
    for (var o = 0; o < this.moduleCount; o++) {
      this.modules[r][o] = null
    }
  }
  

setupPositionProbePattern 函数用来标识位置探测图形
setupPositionAdjustPattern 函数用来标识校正图形

• 其他复杂的过程可以略过
• 最终码点的绘制是在draw函数中的fillRect

  e.prototype.draw = function (oQRCode) {
    var _oContext = this._oContext
    var _htOption = this._htOption
    ...
    ...
    _oContext.fillRect(
      nLeft,
      nTop,
      nWidth / 1.5,
      nHeight / 1.5
    )

实现企业微信名片的二维码

• 如何实现企微名片的二维码样式呢？
• 其实无非就是在标准二维码样式上，除三个位置探测图形和右下角的校正图形外，让码点与码点之间的距离稍微增大1.5倍
• 关键就在上述几个函数中
• 首先声明二维数组modulesPosition来存放三个位置探测图形和右下角的校正图形的位置信息
• 在makeImpl函数中的初始化矩阵中，我们可以初始化

  this.modulesPosition = new Array(this.moduleCount)
  for (var r = 0; r < this.moduleCount; r++) {
    this.modulesPosition[r] = new Array(this.moduleCount)
    for (var o = 0; o < this.moduleCount; o++) {
      this.modulesPosition[r][o] = null
    }
  }
  

• 在setupPositionProbePattern函数中内层循环中进行标识

  this.modulesCorner[row + r][col + c] = 'isPosition'
  

• 同样在setupPositionAdjustPattern函数中内层循环中进行标识
• 此处要注意因为校正图形只需要标识右下角那一个

  this.modulesCorner[pos[pos.length - 1] + r][pos[pos.length - 1] + c] = 'isPosition'
  

• 最后只需要在e.prototype.draw中判断是否为豁免码点isPosition
• 若为企微模式，则把码点间距拉长1.5倍即可

  _oContext.fillRect(
    nLeft,
    nTop,
    isPosition ? nWidth : nWidth / 1.5,
    isPosition ? nHeight : nHeight / 1.5
  )