在vue中使用qrcode生成二维码

Posted 2021-12-19 Mr_ZCheng

作用：QRCode.js 是一个用于生成二维码的 javascript 库。主要是通过获取 DOM 的标签,再通过 html5 Canvas 绘制而成,不依赖任何库。

本文主要 描述   toCanvas 方法

使用 ：

• 安装

  yarn add qrcode
  

• 导入

   import qrcode from 'qrcode'

• 定义一个canvas标签放二维码

  • <canvas ref="canvas" />

• 生成

  • qrcode.toCanvas(canvasElement, text, [options], [cb(error)])

  • canvasElement：画布标签
  • text: 需要编码的数据
  • cd（error）：回调
  • options：配置项===>

    
       text：要生成二维码的地址
       width；二维码的宽度
       height：二维码的高度
       colorDark：二维码的背景色
       colorLight：二维码的前景色
       以上配置只是一部分配置，
    
    

    //例子：
      qrcode.toCanvas(this.$refs.canvas, imgsrc,  with: 400, height: 400 )