Vue生成二维码的实现方法

一、Vue生成二维码方法

Vue生成二维码方式有很多种，其中一种比较简单的实现方法是使用qrcode.js库：

// 安装qrcode.js
npm install qrcode --save

// 引入
import QRCode from 'qrcode'

// 使用
QRCode.toDataURL('your text', function (err, url) {
  console.log(url)
})

通过QRCode.toDataURL方法，将文本转换成base64格式的URL，并可以通过console.log(url)得到生成的二维码URL。

二、Vue生成二维码并保存图片

有时候我们需要将生成的二维码保存为图片，这时可以结合canvas和html2canvas库来实现。该方法实现步骤如下：

1、在Vue组件中定义canvas元素和button元素：

2、在Vue组件中实现生成二维码的方法：

// 引入qrcode和html2canvas库
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'

// 略去...

methods: {
  generateQrcode() {
    QRCode.toCanvas(document.getElementById('canvas'), 'https://www.baidu.com', {
      errorCorrectionLevel: 'H'
    }, function (error) {
      if (error) console.error(error)
    })
  },

  save() {
    html2canvas(document.getElementById('canvas')).then(canvas => {
      let link = document.createElement('a')
      link.download = 'qrcode.png'
      link.href = canvas.toDataURL()
      link.click()
    })
  }
}

3、调用generateQrcode()方法触发生成二维码，再点击"保存为图片"按钮，调用save()方法来实现下载二维码图片的功能。

三、Vue实现扫描二维码

实现在Vue中扫描二维码的方法，可以使用jsQR库来实现。该方法实现步骤如下：

1、在Vue组件中引入jsQR库：

// 安装jsQR库
npm install jsqr --save

// 引入
import jsQR from 'jsqr'

2、在Vue组件中定义canvas元素和input元素作为上传二维码图片的输入框：

3、在Vue组件中定义函数upload()：

// 安装file-reader库
npm install file-reader --save

// 引入
import FileReader from 'file-reader'

// 略去...

methods: {
  upload(e) {
    let file = e.target.files[0]
    if (!file || !/image\/\w+/.test(file.type)) return
    let reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      let img = new Image()
      img.src = reader.result
      img.onload = () => {
        this.decodeQrcode(img)
      }
    }
  },
  
  decodeQrcode(img) {
    let canvas = this.$refs.canvas
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, img.width, img.height)
    let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
    let code = jsQR(imageData.data, imageData.width, imageData.height)
    if (code) {
      console.log(code.data)
    } else {
      console.error('decode failed')
    }
  }
}

4、触发upload()方法上传二维码图片，再利用decodeQrcode()方法进行解码，即可在控制台输出二维码所包含的信息。

四、怎么把视频生成二维码

将视频生成二维码，需要调用多个库进行处理，其中qrcode、file-saver和videojs-record都是必要的。该方法实现步骤如下：

1、在Vue项目中安装所需的库：

npm install qrcode file-saver videojs-record --save

2、在Vue项目中创建一个video.js的组件：

  

<script>
// 引入所需要的库
import QRCode from 'qrcode'
import { saveAs } from 'file-saver'
import 'video.js'
import 'webrtc-adapter'
import 'videojs-record'

export default {
  data() {
    return {
      videoSrc: '' // 视频路径
    }
  },

  mounted() {
    let player = videojs(this.$refs.video, { controls: true, width: 320, height: 240, fluid: false })
    player.recorder = videojs.getComponent('Record').create({
      mimeType: 'video/webm;codecs="opus,vp8"',
      timeSlice: 1000
    })
    player.addChild(player.recorder)
    player.recorder.on('finishRecord', () => {
      this.videoSrc = URL.createObjectURL(player.recorder.getBlob())
    })
  },

  methods: {
    generate() {
      QRCode.toCanvas(document.getElementById('canvas'), this.videoSrc, {
        errorCorrectionLevel: 'H'
      }, function (error) {
        if (error) console.error(error)
      })
      document.getElementById('canvas').toBlob(blob => {
        saveAs(blob, 'qrcode.png')
      })
    }
  }
}
</script>

3、在Vue项目的入口文件中引入video.js和videojs-record的样式：

// main.js
import 'video.js/dist/video-js.css'
import 'videojs-record/dist/css/videojs.record.css'

4、至此，在video.js组件中，通过generate()方法即可将所录制的视频生成二维码，并下载为图片。

五、前端二维码生成

在前端生成二维码，除了前面提到过的qrcode.js库外，还可以使用其他的库进行实现，如：jQuery.qrcode和QRious等。下面以QRious库为例，实现如下：

1、在Vue项目中安装QRious库：

npm install qrious --save

2、在Vue组件中利用QRious库生成二维码图片：

  

<script>
// 引入QRious库
import QRious from 'qrious'

export default {
  mounted() {
    let qr = new QRious({
      element: this.$refs.canvas,
      value: 'https://www.baidu.com',
      size: 300
    })
  },

  methods: {
    download() {
      let link = document.createElement('a')
      link.download = 'qrcode.png'
      link.href = this.$refs.canvas.toDataURL()
      link.click()
    }
  }
}
</script>

3、在mounted()方法中通过QRious库，将所得到的二维码图片绘制在canvas上；在download()方法中则可以实现下载二维码功能。

六、Vue生成二维码图片

除了将二维码生成为canvas、下载为图片外，还可以直接将二维码生成为图片形式，以下是实现方法：

1、Vue组件定义img元素和button元素：

2、在Vue组件中绑定生成二维码图片的方法：

// 引入qrcode库
import QRCode from 'qrcode'

export default {
  mounted() {
    QRCode.toDataURL('https://www.baidu.com', { width: 300 }, (err, url) => {
      if (err) console.error(err)
      this.$refs.qrcode.src = url
    })
  },

  methods: {
    download() {
      let link = document.createElement('a')
      link.download = 'qrcode.png'
      link.href = this.$refs.qrcode.src
      link.click()
    }
  }
}

3、在mounted()方法中调用QRCode库的toDataURL()方法将二维码生成图片，并将图片绑定在img元素上；在download()方法中则可以实现下载二维码功能。

七、Vue生成二维码插件

将Vue生成二维码封装为插件，可在多个组件中复用，以下是实现方法：

1、在src/plugins目录下创建qrcode.js文件，定义Vue插件：

// qrcode.js
import QRCode from 'qrcode'

const Qrcode = {
  install(Vue) {
    Vue.prototype.$qrcode = (text, size = 300) => {
      return new Promise((resolve, reject) => {
        QRCode.toDataURL(text, { width: size }, (err, url) => {
          if (err) {
            reject(err)
          } else {
            resolve(url)
          }
        })
      })
    }
  }
}

export default Qrcode

2、在main.js中引入插件及样式表：

import Qrcode from '@/plugins/qrcode'
import 'qrcode/lib/qrcode.css'

Vue.use(Qrcode)

3、在Vue组件中使用Vue插件：

// 引入样式表
import 'qrcode/lib/qrcode.css'

export default {
  data() {
    return {
      qrcodeUrl: ''
    }
  },

  mounted() {
    this.$qrcode('https://www.baidu.com').then(url => {
      this.qrcodeUrl = url
    })
  }
}

4、在mounted()方法中调用Vue插件，即可实现生成二维码功能。

八、Vue生成二维码并下载

将Vue生成二维码并下载封装为组件，可被其他组件调用，以下是实现方法：

1、在src/components目录下创建Qrcode.vue组件：

  

<script>
// 引入qrcode库和file-saver库
import QRCode from 'qrcode'
import { saveAs } from 'file-saver'

export default {
  props: ['text', 'size'],

  data() {
    return {
      qrcodeUrl: ''
    }
  },

  mounted() {
    QRCode.toDataURL(this.text, { width: this.size }, (err, url) => {
      if (err) {
        console.error(err)
      } else {
        this.qrcodeUrl = url
      }
    })
  },

  methods: {
    download() {
      let link = document.createElement('a')
      link.download = 'qrcode.png'
      link.href = this.qrcodeUrl
      link.click()
    }
  }
}
</script>

2、在其他Vue组件中调用Qrcode组件，并传入text和size参数：

  


import Qrcode from '@/components/Qrcode.vue'

export default {
  components: { Qrcode },

  data() {
    return {
      text: 'https://www.baidu.com',
      size: 300
    }
  }
}