JS生成二维码

qrcode与qr-image

效果对比

U655a290ab87d4a0d9550c0333dde4364V.jpg

限制说明

• qrcode使用的url长度超过215可能报错
• qrcode和qr-imageurl越长生成的二维码越模糊

易用性

qrcode使用示例

import QRCode from 'qrcode'
 
// With promises
QRCode.toDataURL('I am a pony!')
  .then(url => {
    console.log(url) //二维码url，base64形式
  })
  .catch(err => {
    console.error(err)
  })
 
// With async/await
const generateQR = async text => {
  try {
    console.log(await QRCode.toDataURL(text))
  } catch (err) {
    console.error(err)
  }
}

qr-image使用示例

const qr = require('qr-image');

const qr_url = qr.imageSync('I love QR!'); //qr_url为unit8Array，需要自己转为Base64

总结

• 从包大小看，qr-image远小于qrcode
• 从生成二维的清晰度看，qrcode更加清晰。结合线上的二维使用的地方，二维码最小尺寸为48px，qr-image生成的48px的二维码在低分屏上扫描有一定的困难。
• 从易用性看，qrcode为ES Module的方式使用，支持Promise和async/await，更加符合现代前端的使用习惯。
• 从长期使用看，qr-image作者已经停止维护，qrcode作者还在继续维护且使用人数更多。