推荐一款很好用的二维码生成插件 qrcode(非 QRCode.js),测试使用方便且简单。 其实官方就有很好的文档,但是英文,这里只是做一个我工作的记录和总结。分享他几个常用 api,绑定 html 元素生成、node 环境生成、命令行终端,如不会使用可以联系我。
1、绑定 html 元素生成
<html> <body> <canvas id="canvas"></canvas> <script src="bundle.js"></script> </body> </html>
// index.js -> bundle.js var QRCode = require('qrcode') var canvas = document.getElementById('canvas') QRCode.toCanvas(canvas, 'sample text', function (error) { if (error) console.error(error) console.log('success!'); })
2、node环境生成,也可以在前端通过 js 动态生成,不用绑定 element 元素,直接生成 base64,赋值个 img 的 src 属性就可以在页面展示
var QRCode = require('qrcode') QRCode.toDataURL('I am a pony!', function (err, url) { console.log(url) })
var QRCode = require('qrcode') QRCode.toString('I am a pony!',{type:'terminal'}, function (err, url) { console.log(url) })
4、ES6/ES7 可以使用 Promises 和 Async / Await 代替回调函数。
import QRCode from 'qrcode' // 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) } }
还能个性化定制,如颜色,二维码容错级别,生成文件保存等,详细文档:qrcode