在H5中使用qrcode生成二维码
安装插件
```javascript
npm install --save qrcode
```
使用插件
- 按需引入
//index.html <html> <head>···</head> <body> <canvas id="canvas"></canvas> <script src="index.js"></script> </body> </html> ``` ```javascript //index.js const QRcode = require('qrcode'); const canvas = document.getElementById('canvas'); QRcode.toCanvas(canvas, '1234567890', function(err){ if(err) throw err console.log('二维码生成成功了！') }) ``` - html中直接引入
<canvas id="canvas"></canvas> <script src="qrcode.min.js"></script> <script> QRCode.toCanvas(documen.getElementById('canvas'), '1234567890', function(err){ if(err) throw err console.log('二维码又生成成功了！！') }) </script>
客户端API
-
create()
create(text, [options])// 返回一个qrcode的对象 { modules, //带有模块数据的 version, //qrcode版本 errorCorrectionLevel, //错误等级 maskPattern, //蒙版模式 segments, //生成的段 } -
toCanvas()
toCanvas(canvasElement, text, [options], callback); //在canvas中绘制二维码
toCanvas(text, [options], callback(err, canvas)) //，如果没有指定canvas标签，会自动返回一个， 在回调中指定插入位置即可 -
toDataURL()
toDataURL(text, [options], callback(err, url)); //返回一个url地址，
toDataURL(canvasElement, text, [options], callback(err, url)); //如果提供了canvasElement，则在此绘制二维码 -
toString()
toString(text, [options], callback(err, string)); //返回一个包含二维码信息的字符串，仅供svg使用
options
{
version: Number, //QR版本，如果没指定，会自动计算出一个
errorCorrectionLevel: String, //纠错级别， low, medium, quartile, high 或 L, M, Q, H
maskPattern: Number, //
toSJISFunc: Function, //转换汉字的辅助函数
margin: Number, // default: 4
scale: Number, //比例，默认4
width: Number, // 输出图像的特定宽度，优先于scale，如果太小，放不下图片，这个值会被忽略
color: {
dark: String, //default: #000000ff
light: String, //default: #ffffff
}
}