Vue常用插件：qrcode

简介

qrcode是一个用于生成二维码图片的插件

步骤

安装

• 安装：npm i qrcode --save

引入

需要用到的页面组件或者js文件中直接引入

import QRCode from 'qrcode'

使用

<canvas id="canvas" style="width:300px;height:300px;"></canvas>

<script>
import QRCode from 'qrcode'
export default {
  mounted () {
    this.getCode()
  },
  methods: {
    getCode () {
      let canvas = document.getElementById('canvas')
      QRCode.toCanvas(canvas, 'http://localhost:8080/home', { width: 200 }, function (error) {
        if (error) console.error(error)
        console.log('success!')
      })
    }
  }
}
</script>

API

options

toCanvas

toCanvas(canvasElement, text, [options], [cb(error)])
toCanvas(text, [options], [cb(error, canvas)])
生成的二维码画到canvas上面。
不传canvasElement的话，会生成一个canvas

QRCode.toCanvas('text', { errorCorrectionLevel: 'H' }, function (err, canvas) {
  if (err) throw err
  var container = document.getElementById('container')
  container.appendChild(canvas)
})

toDataURL

toDataURL(canvasElement, text, [options], [cb(error, url)])
toDataURL(text, [options], [cb(error, url)])
返回一个Data URI，如果传canvasElement，会画到该canvas上面。

options:

• type：String，默认（image/png），可选值：image/png, image/jpeg, image/webp
• rendererOpts.quality：Number，默认值（0.92），取值在0~1之间

var opts = {
  errorCorrectionLevel: 'H',
  type: 'image/jpeg',
  rendererOpts: {
    quality: 0.3
  }
}
 
QRCode.toDataURL('text', opts, function (err, url) {
  if (err) throw err

  var img = document.getElementById('image')
  img.src = url
})

toString

toString(text, [options], [cb(error, string)])
返回二维码字符串

QRCode.toString('http://www.google.com', function (err, string) {
  if (err) throw err
  console.log(string)
})

参考链接

• qrcode