前端QRCode.js生成二維碼（解決長字符串模塊和報錯問題）

QRCode

用法

1.使用npm安裝到你的項目中 npm install qrcode2 --save 2. 使用commonjs或者es6模塊方式導入

var QRCode = require('qrcode2');
// 或者
import QRCode from 'qrcode2';

3 . 實例化QRCode對象

new QRCode(document.getElementById('qrcode'), 'http://www.baidu.com');
//
// 或者配置一些選項
var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "http://www.baidu.com",
    width: 128,
    height: 128,
    colorDark : "#000",
    colorLight : "#fff",
    correctLevel : QRCode.CorrectLevel.H
});

參數

參數	默認值	說明	備註
text	string	二維碼內容字符串	若是是url的話，爲了微信和QQ能夠識別，鏈接中的中文使用encodeURIComponent進行編碼
width	256	圖像寬度	單位像素（百分比不行）
height	256	圖像高度	單位像素（百分比不行）
colorDark	'#000'	二維碼前景色	英文\十六進制\rgb\rgba\transparent均可以
colorLight	‘#fff’	二維碼背景色	英文\十六進制\rgb\rgba\transparent均可以
correctLevel	QRCode.CorrectLevel.L	容錯級別	由低到高 .L M Q H

方法

clear：清除QR code makeCode(text: String)：從新繪製QR code （僅在不支持 Canvas 的瀏覽器下有效）

常見bug1 長字符串顯示模糊問題

1. 問題緣由： 顯示模糊的問題，是canvas的問題。因爲字符串比較長，尤爲是須要傳一個鏈接地址，後面還加一些參數的時候，就會加大二維碼的像素複雜度，而自己canvas在繪製的時候，就一直有像素模糊的問題，尤爲是在手機上的時候

2. 解決方法： 先將生成的二維碼進行倍數擴大，而後在css上面固定其顯示寬高，這樣就能夠擴大顯示像素精度。

js放大

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "http://www.baidu.com",
    width: 128 * 5,  // 相應寬高擴大5倍
    height: 128 * 5,
    colorDark : "#000",
    colorLight : "#fff",
    correctLevel : QRCode.CorrectLevel.H
});

css固定寬高 能夠給canvas 和 img 固定爲 128* 128的大小 也能夠在包裹#qrcode 的容器上固定128* 128的大小 裏面內容100% 好比

.qrcode-out {
width: 128px;
height: 128px;
}
canvas,img {
width:100%;
height： 100%；}

常見bug2 由於url太長，致使二維碼加載報錯

通常報錯提醒 Error: code length overflow. (1756>1056)

通常都是容錯率設置爲最高致使的，此時把容錯率調低一級即可以 correctLevel : QRCode.CorrectLevel.Q