前端開發中二維碼的生成與使用

在開發一個取件的小程序與 nodejs 服務端的過程當中發現，若是使用網上現有的二維碼生成 API ，存在某些問題好比請求須要較長時間，數據格式較爲固定，因爲總體業務上也不須要二維碼的風格化，最好能夠前端與 nodejs 服務端通用。html

通過簡單的調研選擇了 QRCode.js前端

QRCode.js 項目node

QRCode.js 是一個用於生成二維碼的 JavaScript 庫。主要是經過獲取 DOM 的標籤,再經過 HTML5 Canvas 繪製而成,不依賴任何庫。他支持 nodejs 端，瀏覽器端，以及小程序端。git

1. 安裝 QRCode.js

npm install --save qrcode
複製代碼

2. 配置生成二維碼的屬性

const QRCode = require('qrcode')
const options = {
    errorCorrectionLevel: 'H',
    type: 'terminal',
    quality: 0.95,
    margin: 1,
    color: {
        dark: '#000',
        light: '#FFF',
    },
}
複製代碼

errorCorrectionLevel：糾錯功能使您即便符號變髒或損壞也能成功掃描QR碼。

根據操做環境，有四個級別可供選擇。github

Level	Error resistance
L (Low)	~7%
M (Medium)	~15%
Q (Quartile)	~25%
H (High)	~30%

級別越高，提供的抗錯誤性越好，但會下降符號的容量web

Mode	L	M	Q	H
Numeric	7089	5596	3993	3057
Alphanumeric	4296	3391	2420	1852
Byte	2953	2331	1663	1273
Kanji	1817	1435	1024	784

color：指定QR碼圖像的顏色

dark：二維碼主體顏色，light：二維碼背景顏色面試

Type：指按期望的輸出類型，例如數據URL中的 image / png，image / jpeg，image / webp和utf8，SVG，字符串中的終端。npm
quality：設置圖像的質量，範圍爲0-1。默認值爲0.92，僅適用於image / jpeg和image / webp類型canvas
width：設置圖像的邊長小程序

若是width過小而不能包含二維碼的所有信息符號，則此選項將被忽略。

margin：設置圖像的外邊框距離
scale：設置每幾個像素爲一個信息點默認爲 4

3. 設置輸出

瀏覽器端的使用方法

能夠經過渲染到 Canvas 畫布進行使用

<html>
  <body>
    <canvas id="canvas"></canvas>
    <script src="bundle.js"></script>
  </body>
</html>
複製代碼

使用前須要使用打包工具構建依賴

var QRCode = require('qrcode')
var canvas = document.getElementById('canvas')

QRCode.toCanvas(canvas, 'sample text', function (error) {
  if (error) console.error(error)
  console.log('success!');
})
複製代碼

或者直接渲染 base64 或者圖像文件（png ，svg ，jpeg）

nodejs-server 端常見使用方法

轉成終端可輸出的字符串

toString(text, [options], [cb(error, string)]) 返回QR碼的字符串表示形式。若是選擇的輸出格式是svg，它將返回一個包含xml代碼的字符串。

QRCode.toString([
    { data: 'qrcode test in nodejs', mode: 'byte' },
]
).then(qrImage => {
    console.log("terminal", qrImage)
}).catch(err => {
    console.error(err)
})
複製代碼

轉成包含二維碼圖片信息的 Base64 編碼 url toDataURL(text, [options], [cb(error, url)]) 返回包含QR碼圖像表示形式的數據URI。目前僅適用於 image / png類型。

QRCode.toDataURL('qrcode test in nodejs', options).then(qrImage => {
    console.log("URL", qrImage)
}).catch(err => {
    console.error(err)
})
複製代碼

轉成圖片形式存儲 toFile(path, text, [options], [cb(error)])

將QR Code保存到圖像文件。若是未指定options.type，則將從文件擴展名中猜想格式。

QRCode.toFile('./images/qrCode.png', "qrcode test in nodejs", options)
    .then(() => {
        console.log("success")
    }).catch(err => {
        console.error(err)
    })

複製代碼

完整 node-server 端 demo

const QRCode = require('qrcode')

const options = {
    errorCorrectionLevel: 'H',
    type: 'terminal',
    quality: 0.95,
    margin: 1,
    color: {
        dark: '#000',
        light: '#FFF',
    },
}

QRCode.toString([
    { data: 'qrcode test in nodejs', mode: 'byte' },
]
).then(qrImage => {
    console.log("terminal", qrImage)
}).catch(err => {
    console.error(err)
})

QRCode.toDataURL('qrcode test in nodejs', options).then(qrImage => {
    console.log("URL", qrImage)
}).catch(err => {
    console.error(err)
})

QRCode.toFile('./images/qrCode.svg', "qrcode test in nodejs", options)
    .then(() => {
        console.log("success")
    }).catch(err => {
        console.error(err)
    })

複製代碼

QRcode 同時支持 ES5 / ES6 / ES7 的語法

import QRCode from 'qrcode'

// With Callback
QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)
})
// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url)
  })
  .catch(err => {
    console.error(err)
  })

// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}
複製代碼

在微信小程序中使用

yingye 老師提供的方案 weapp.qrcode.js

weapp.qrcode.js

先在 wxml 文件中，建立繪製的 canvas，並定義好 width, height, canvasId 。

直接引入 js 文件，使用 drawQrcode() 繪製二維碼。

因爲目前微信小程序已全面支持 npm ，能夠選擇直接安裝，記得要構建 npm 包

npm install weapp-qrcode --save

複製代碼

基本使用

import drawQrcode from 'weapp-qrcode'

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
})
複製代碼

快速生成條碼和二維碼的方案

wxbarcode

安裝

$ npm install wxbarcode
複製代碼

使用方法

import wxbarcode from 'wxbarcode'

wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', '1234567890123456789', 420, 420);
複製代碼