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库来实现。该方法实现步骤如下：

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

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <button @click="save">保存为图片</button>
  </div>
</template>

在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()
    })
  }
}

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

Vue实现扫描二维码

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

在Vue组件中引入jsQR库：

// 安装jsQR库
npm install jsqr --save
// 引入
import jsQR from 'jsqr'

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

<template>
  <div>
    <canvas ref="canvas"></canvas>
    <input type="file" @change="upload" />
  </div>
</template>

在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')
    }
  }
}

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

怎么把视频生成二维码

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

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

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

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

<template>
  <div>
    <video ref="video" :src="videoSrc"></video>
    <div id="videojs-record"></div>
    <button @click="generate">生成二维码</button>
  </div>
</template>
<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>

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

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

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

前端二维码生成

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

在Vue项目中安装QRious库：

npm install qrious --save

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

<template>
  <div>
    <canvas id="canvas" ref="canvas"></canvas>
    <button @click="download">下载二维码</button>
  </div>
</template>
<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>

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

Vue生成二维码图片

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

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

<template>
  <div>
    <button @click="download">下载二维码</button>
  </div>
</template>

在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()
    }
  }
}

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

Vue生成二维码插件

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

在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

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

import Qrcode from '@/plugins/qrcode'
import 'qrcode/lib/qrcode.css'
Vue.use(Qrcode)

在Vue组件中使用Vue插件：

// 引入样式表
import 'qrcode/lib/qrcode.css'
export default {
  data() {
    return {
      qrcodeUrl: ''
    }
  },
  mounted() {
    this.$qrcode('https://www.baidu.com').then(url => {
      this.qrcodeUrl = url
    })
  }
}

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

Vue生成二维码并下载

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

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

<template>
  <div>
    <button @click="download">下载二维码</button>
  </div>
</template>
<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>

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

<template>
  <div>
    <qrcode :text="text" :size="size" />
  </div>
</template>
<!-- 引入Qrcode组件 -->
import Qrcode from '@/components/Qrcode.vue'
export default {
  components: { Qrcode },
  data() {
    return {
      text: 'https://www.baidu.com',
      size: 300
    }
  }
}

Vue生成二维码的实现方法