在H5中使用qrcode生成二维码
安装插件
|
1 2 3 |
```javascript npm install --save qrcode ``` |
使用插件
按需引入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//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中直接引入
|
1 2 3 4 5 6 7 8 9 |
<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])
|
1 2 3 4 5 6 7 8 |
// 返回一个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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
{ 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 } } |
在H5中使用qrcodejs2生成二维码
安装插件
npm i qrcodejs2
使用插件
直接引入
|
1 2 3 4 |
<div id="qrcode"> </div> <script> new QRCode(document.getElementById('qrcode'), '1234567890') </script> |
按需引入
|
1 2 3 4 5 6 7 8 9 |
const QRCode = require('qrcodejs2'); var qrcode = new QRCode('qrcode', { text: '1234567890', width: 128, height: 128, colorDark: '#000', colorLight: '#fff', correctLevel: QRCode.CorrectLevel.H }) |
其他方法
qrcode.clear(); //清除
qrcode.makeCode(‘372874938274932’); 重新绘制新的二维码
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：在H5中使用qrcode, qrcodejs2生成二维码
转载请注明原文链接：在H5中使用qrcode, qrcodejs2生成二维码
