• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

js生成二维码库qrcode,能满足node,浏览器,命令行环境生成二维码

代码碎片 新概念 9个月前 (11-02) 394次浏览 0个评论 扫描二维码

推荐一款很好用的二维码生成插件 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)
})

3、命令行终端渲染一个二维码

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


新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js生成二维码库qrcode,能满足node,浏览器,命令行环境生成二维码
喜欢 (0)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址