如何生成个性化二维码

    上文说到要让二维码越来越个性，本文来说说如何生成个性化的与众不同的二维码，让你的我二维码脱颖而出。

    首先我们来理解下二维码究竟是什么？   

二维码又称二维条码，常见的二维码为QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的、黑白相间的、记录数据符号信息的图形；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

    以上引自百度百科，我们可以知道所谓二维码其实就是通过一定的编码技术将文字信息的二进制编码生成一张编码图片，可以通过机器图像识别技术将图片内容读取的技术。

    关于js生成二维码

    关于二维码的生成规则以及技术可以自行百度，下面来说js生成二维码的基本思路。现在基本的二维码生成插件都是将信息通过二维码生成规则编码后生成一个Boolean值的二维数组，再通过canvas或者svg技术将数组内容画出来。如下示例：

import qrcode from 'qrcode'

$(document).ready(() => {
  let qr = qrcode.create('http://blog.mikoshu.me')
  let data = qr.modules.data
  let len = qr.modules.size
  let qrArray = []
  data.map((val, i) => { // 通过此方法将组件生成的一维数组转化为二维数组
    let index = parseInt(i / len)
    if (!qrArray[index]) {
      qrArray[index] = []
    }
    qrArray[index].push(val)
  })
  console.log(qrArray)
 }）

    上面代码我们通过qrcodejs插件将我们需要生成二维码的内容编码后，可以获取到一个长度625的一维数组，我们再通过一个简单的遍历将一维数组转化为二维数组，转化后的数组长这样:

// [ // qrArray
  //   [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1]
  //   [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1]
  //   [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1]
  //   [1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1]
  //   [0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]
  //   [1, 0, 1, 1, 1, 1, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0]
  //   [1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0]
  //   [0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 0, 1, 1]
  //   [0, 0, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 0, 0, 1]
  //   [1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1]
  //   [1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]
  //   [1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1]
  //   [1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1]
  //   [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 1, 0, 1, 0, 0]
  //   [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0]
  //   [1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 1]
  //   [1, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1]
  //   [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1]
  //   [1, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 1]
  //   [1, 1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1]
  // ]

    怎么样，看起来是不是有点眼熟，如果我们把1的位置画成方块，0的位置忽略，这就是一张二维码了，为了方便观看，我现在将1的位置替换为 ■  我们再看一下：

[■, ■, ■, ■, ■, ■, ■, 0, 0, ■, ■, ■, ■, ■, 0, 0, ■, 0, ■, ■, ■, ■, ■, ■, ■]
[■, 0, 0, 0, 0, 0, ■, 0, 0, ■, ■, 0, 0, 0, 0, ■, ■, 0, ■, 0, 0, 0, 0, 0, ■]
[■, 0, ■, ■, ■, 0, ■, 0, ■, 0, ■, ■, ■, 0, 0, 0, 0, 0, ■, 0, ■, ■, ■, 0, ■]
[■, 0, ■, ■, ■, 0, ■, 0, ■, ■, 0, 0, ■, ■, ■, ■, ■, 0, ■, 0, ■, ■, ■, 0, ■]
[■, 0, ■, ■, ■, 0, ■, 0, ■, ■, ■, 0, 0, 0, ■, 0, ■, 0, ■, 0, ■, ■, ■, 0, ■]
[■, 0, 0, 0, 0, 0, ■, 0, ■, 0, 0, ■, 0, 0, ■, ■, ■, 0, ■, 0, 0, 0, 0, 0, ■]
[■, ■, ■, ■, ■, ■, ■, 0, ■, 0, ■, 0, ■, 0, ■, 0, ■, 0, ■, ■, ■, ■, ■, ■, ■]
[0, 0, 0, 0, 0, 0, 0, 0, ■, 0, 0, ■, 0, 0, ■, 0, ■, 0, 0, 0, 0, 0, 0, 0, 0]
[■, 0, ■, ■, ■, ■, ■, 0, 0, ■, 0, 0, ■, ■, 0, 0, 0, 0, ■, ■, ■, ■, ■, 0, 0]
[■, 0, ■, ■, 0, 0, 0, 0, 0, 0, 0, ■, ■, ■, 0, 0, ■, 0, 0, ■, 0, 0, 0, ■, 0]
[0, 0, ■, 0, 0, ■, ■, ■, ■, ■, ■, 0, 0, ■, ■, ■, ■, ■, 0, 0, 0, ■, 0, ■, ■]
[0, 0, ■, 0, ■, ■, 0, 0, ■, ■, ■, 0, ■, 0, 0, 0, 0, ■, 0, ■, ■, 0, 0, 0, ■]
[■, 0, 0, ■, 0, ■, ■, 0, 0, 0, 0, 0, 0, ■, ■, 0, 0, ■, ■, 0, ■, 0, ■, ■, ■]
[■, 0, ■, ■, ■, 0, 0, ■, ■, ■, ■, 0, ■, ■, 0, 0, ■, 0, 0, ■, 0, ■, 0, ■, 0]
[■, 0, 0, ■, ■, ■, ■, 0, 0, 0, ■, 0, 0, 0, ■, ■, ■, ■, ■, 0, ■, ■, 0, ■, ■]
[■, 0, ■, ■, 0, ■, 0, ■, 0, ■, 0, 0, ■, 0, ■, ■, 0, ■, 0, 0, 0, ■, 0, 0, ■]
[■, 0, 0, 0, 0, ■, ■, ■, 0, 0, ■, 0, ■, ■, ■, 0, ■, ■, ■, ■, ■, 0, ■, 0, 0]
[0, 0, 0, 0, 0, 0, 0, 0, ■, ■, ■, 0, 0, 0, 0, ■, ■, 0, 0, 0, ■, ■, ■, 0, 0]
[■, ■, ■, ■, ■, ■, ■, 0, 0, ■, 0, ■, ■, 0, ■, 0, ■, 0, ■, 0, ■, ■, ■, ■, ■]
[■, 0, 0, 0, 0, 0, ■, 0, ■, 0, ■, ■, 0, 0, ■, 0, ■, 0, 0, 0, ■, ■, 0, 0, 0]
[■, 0, ■, ■, ■, 0, ■, 0, ■, ■, ■, ■, 0, 0, 0, ■, ■, ■, ■, ■, ■, ■, ■, ■, ■]
[■, 0, ■, ■, ■, 0, ■, 0, ■, 0, 0, 0, ■, ■, 0, 0, 0, 0, ■, 0, ■, 0, ■, ■, ■]
[■, 0, ■, ■, ■, 0, ■, 0, ■, 0, 0, 0, 0, ■, ■, 0, ■, 0, 0, ■, 0, 0, ■, 0, ■]
[■, 0, 0, 0, 0, 0, ■, 0, 0, ■, 0, 0, ■, ■, 0, ■, ■, ■, 0, ■, ■, ■, 0, 0, ■]
[■, ■, ■, ■, ■, ■, ■, 0, ■, 0, ■, 0, ■, 0, ■, 0, 0, 0, 0, ■, ■, ■, ■, ■, ■]

这样看起来是不是有点二维码的感觉了呢，此时我们只需要再canvas上通过数组内容画出自己想要的图案即可生成二维码。

    什么？还看不出来吗？那我再把0 替换为空，我们再看一遍

[■, ■, ■, ■, ■, ■, ■,  ,  , ■, ■, ■, ■, ■,  ,  , ■,  , ■, ■, ■, ■, ■, ■, ■]
[■,  ,  ,  ,  ,  , ■,  ,  , ■, ■,  ,  ,  ,  , ■, ■,  , ■,  ,  ,  ,  ,  , ■]
[■,  , ■, ■, ■,  , ■,  , ■,  , ■, ■, ■,  ,  ,  ,  ,  , ■,  , ■, ■, ■,  , ■]
[■,  , ■, ■, ■,  , ■,  , ■, ■,  ,  , ■, ■, ■, ■, ■,  , ■,  , ■, ■, ■,  , ■]
[■,  , ■, ■, ■,  , ■,  , ■, ■, ■,  ,  ,  , ■,  , ■,  , ■,  , ■, ■, ■,  , ■]
[■,  ,  ,  ,  ,  , ■,  , ■,  ,  , ■,  ,  , ■, ■, ■,  , ■,  ,  ,  ,  ,  , ■]
[■, ■, ■, ■, ■, ■, ■,  , ■,  , ■,  , ■,  , ■,  , ■,  , ■, ■, ■, ■, ■, ■, ■]
[ ,  ,  ,  ,  ,  ,  ,  , ■,  ,  , ■,  ,  , ■,  , ■,  ,  ,  ,  ,  ,  ,  ,  ]
[■,  , ■, ■, ■, ■, ■,  ,  , ■,  ,  , ■, ■,  ,  ,  ,  , ■, ■, ■, ■, ■,  ,  ]
[■,  , ■, ■,  ,  ,  ,  ,  ,  ,  , ■, ■, ■,  ,  , ■,  ,  , ■,  ,  ,  , ■,  ]
[ ,  , ■,  ,  , ■, ■, ■, ■, ■, ■,  ,  , ■, ■, ■, ■, ■,  ,  ,  , ■,  , ■, ■]
[ ,  , ■,  , ■, ■,  ,  , ■, ■, ■,  , ■,  ,  ,  ,  , ■,  , ■, ■,  ,  ,  , ■]
[■,  ,  , ■,  , ■, ■,  ,  ,  ,  ,  ,  , ■, ■,  ,  , ■, ■,  , ■,  , ■, ■, ■]
[■,  , ■, ■, ■,  ,  , ■, ■, ■, ■,  , ■, ■,  ,  , ■,  ,  , ■,  , ■,  , ■,  ]
[■,  ,  , ■, ■, ■, ■,  ,  ,  , ■,  ,  ,  , ■, ■, ■, ■, ■,  , ■, ■,  , ■, ■]
[■,  , ■, ■,  , ■,  , ■,  , ■,  ,  , ■,  , ■, ■,  , ■,  ,  ,  , ■,  ,  , ■]
[■,  ,  ,  ,  , ■, ■, ■,  ,  , ■,  , ■, ■, ■,  , ■, ■, ■, ■, ■,  , ■,  ,  ]
[ ,  ,  ,  ,  ,  ,  ,  , ■, ■, ■,  ,  ,  ,  , ■, ■,  ,  ,  , ■, ■, ■,  ,  ]
[■, ■, ■, ■, ■, ■, ■,  ,  , ■,  , ■, ■,  , ■,  , ■,  , ■,  , ■, ■, ■, ■, ■]
[■,  ,  ,  ,  ,  , ■,  , ■,  , ■, ■,  ,  , ■,  , ■,  ,  ,  , ■, ■,  ,  ,  ]
[■,  , ■, ■, ■,  , ■,  , ■, ■, ■, ■,  ,  ,  , ■, ■, ■, ■, ■, ■, ■, ■, ■, ■]
[■,  , ■, ■, ■,  , ■,  , ■,  ,  ,  , ■, ■,  ,  ,  ,  , ■,  , ■,  , ■, ■, ■]
[■,  , ■, ■, ■,  , ■,  , ■,  ,  ,  ,  , ■, ■,  , ■,  ,  , ■,  ,  , ■,  , ■]
[■,  ,  ,  ,  ,  , ■,  ,  , ■,  ,  , ■, ■,  , ■, ■, ■,  , ■, ■, ■,  ,  , ■]
[■, ■, ■, ■, ■, ■, ■,  , ■,  , ■,  , ■,  , ■,  ,  ,  ,  , ■, ■, ■, ■, ■, ■]

// 再此基础 再去除逗号

[■  ■  ■  ■  ■  ■  ■        ■  ■  ■  ■  ■        ■     ■  ■  ■  ■  ■  ■  ■]
[■                 ■        ■  ■              ■  ■     ■                 ■]
[■     ■  ■  ■     ■     ■     ■  ■  ■                 ■     ■  ■  ■     ■]
[■     ■  ■  ■     ■     ■  ■        ■  ■  ■  ■  ■     ■     ■  ■  ■     ■]
[■     ■  ■  ■     ■     ■  ■  ■           ■     ■     ■     ■  ■  ■     ■]
[■                 ■     ■        ■        ■  ■  ■     ■                 ■]
[■  ■  ■  ■  ■  ■  ■     ■     ■     ■     ■     ■     ■  ■  ■  ■  ■  ■  ■]
[                        ■        ■        ■     ■                        ]
[■     ■  ■  ■  ■  ■        ■        ■  ■              ■  ■  ■  ■  ■      ]
[■     ■  ■                       ■  ■  ■        ■        ■           ■   ]
[      ■        ■  ■  ■  ■  ■  ■        ■  ■  ■  ■  ■           ■     ■  ■]
[      ■     ■  ■        ■  ■  ■     ■              ■     ■  ■           ■]
[■        ■     ■  ■                    ■  ■        ■  ■     ■     ■  ■  ■]
[■     ■  ■  ■        ■  ■  ■  ■     ■  ■        ■        ■     ■     ■   ]
[■        ■  ■  ■  ■           ■           ■  ■  ■  ■  ■     ■  ■     ■  ■]
[■     ■  ■     ■     ■     ■        ■     ■  ■     ■           ■        ■]
[■              ■  ■  ■        ■     ■  ■  ■     ■  ■  ■  ■  ■     ■      ]
[                        ■  ■  ■              ■  ■           ■  ■  ■      ]
[■  ■  ■  ■  ■  ■  ■        ■     ■  ■     ■     ■     ■     ■  ■  ■  ■  ■]
[■                 ■     ■     ■  ■        ■     ■           ■  ■         ]
[■     ■  ■  ■     ■     ■  ■  ■  ■           ■  ■  ■  ■  ■  ■  ■  ■  ■  ■]
[■     ■  ■  ■     ■     ■           ■  ■              ■     ■     ■  ■  ■]
[■     ■  ■  ■     ■     ■              ■  ■     ■        ■        ■     ■]
[■                 ■        ■        ■  ■     ■  ■  ■     ■  ■  ■        ■]
[■  ■  ■  ■  ■  ■  ■     ■     ■     ■     ■              ■  ■  ■  ■  ■  ■]

    这样总能识别出这是一张二维码了吧

    如上例子可以看出，我们需要生成二维码的内容被编码成了一个Boolean值的二维数组，此时我们可以canvas将二维数组画出来，假定二维数组的一个Boolean值表示二维码上的一个方块，我们使用一个10×10像素大小的方形来表示这个值，为true的话，将方块填充为黑色，如果为false的话，将方块填充为白色。此时由于二维数组长度为27×27，因此我们设置一个长宽分别为270像素的画布，然后按照上述的方式将画布填充。

import qrcode from 'qrcode'

$(document).ready(() => {
  let qr = qrcode.create('http://blog.mikoshu.me')
  let data = qr.modules.data
  let len = qr.modules.size
  let qrArray = []
  data.map((val, i) => { // 通过此方法将一维数组转化为二维数组
    let index = parseInt(i / len)
    if (!qrArray[index]) {
      qrArray[index] = []
    }
    qrArray[index].push(val)
  })
 
  let canvas = $("canvas")[0]
  let ctx = canvas.getContext('2d')
  let w = 10 // 设置一个格子大小的宽高
  canvas.width = w * len
  canvas.height = w * len

  qrArray.map((line, y) => {
    line.map((flag, x) => {
      if (flag) {
        ctx.fillRect(x*w, y*w, w, w)
      }
    })
  })
})

    通过上面代码我们可以看到画布填充以后就是一张可用的二维码，我们通过手机扫码发现可以解析出我们设置的二维码内容。至此，我们已经可以通过我二维码的数组通过canvas生成一张可用的二维码图片。

    由于是自己通过画布生成二维码，因此将这个二维码变的多样化就变得更加简单，比如画上自己想要的形状，在本该画黑色小方块的地方通过drawImage方法导入小图标，等。

import qrcode from 'qrcode'

$(document).ready(() => {
  let qr = qrcode.create('http://blog.mikoshu.me')
  let data = qr.modules.data
  let len = qr.modules.size
  let qrArray = []
  data.map((val, i) => { // 通过此方法将一维数组转化为二维数组
    let index = parseInt(i / len)
    if (!qrArray[index]) {
      qrArray[index] = []
    }
    qrArray[index].push(val)
  })
  let canvas = $("canvas")[0]
  let ctx = canvas.getContext('2d')
  let w = 10 // 设置一个格子大小的宽高
  canvas.width = w * len
  canvas.height = w * len
  let img = new Image()
  img.src = './../images/logo.jpg'
  img.onload = () => {
    qrArray.map((line, y) => {
      line.map((flag, x) => {
        if (flag) {
          // ctx.fillRect(x*w, y*w, w, w)
          // 将原先需要黑色方块的位置替换成柚子图标
          ctx.drawImage(img, x * w, y * w, w, w)
        }
      })
    })
  }
})

    我们还可以在上面的基础上给canvas加上背景，甚至gif动图，通过其他的一些数据算法将二维码内容变得更加美观。

    当然有了这个二维数组我们就让二维码有了更多的可能，无论是canvas、svg甚至是dom结构，都可以生成很好看美观的二维码，特别是，二维码还存在一定的容错率。也就是说一张二维码，在被我们挡住一部分的情况下，还是可以读出码内的内容的。（不遮挡定位点）基于二维码的这个特性，我们还可以在二维码内添加一些图标，比如常见的给二维码中心添加logo，甚至可以添加一些装饰图案，形状在二维码里让二维码变得更加多样化。

    如上我们已经了解了二维码生成的基本过程，以及对二维码图像进行优化的基本方法，还等什么，快开始制作自己的个性二维码吧！

    插一个自己的小程序，可以方便大家生成好看的个性化二维码。（更多样式，正在开发中…）如果你有特别需要的二维码模板或者样式，欢迎发送给我，我会尽力将其做成可编辑内容的二维码模板哦。微信：shu581066