vue：生成二维码 qrcode、vue-qr（二维码中间可带logo）

水深无声 2024-03-24 12:25 18阅读 0赞

**一、方法一 qrcode**

[qrcode - npm][]

1.1、安装

> yarn add qrcode

1.2、页面引入

import QRCode from 'qrcode';

1.3、方法里边使用

getQRCodeUrl(){  
        QRCode.toDataURL(
            'hello world',{
              color: {
                dark:"#010599FF",
                light:"#FFBF60FF"
              }
            }
          )
          .then((url) => {
            // 获取到url后即可在页面使用--二维码图片
            console.log('url', url)
          })
          .catch((e) => {
            console.log('e', e)
          });
    }

二维码url：![ea23362a2f2445f6ada68eeeb07e5175.png][]

![f364934daf9a47cb8cb74483d70e7494.png][]

1.4、options

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>errorCorrectionLevel</code></td> 
   <td>String</td> 
   <td>M</td> 
   <td>错误处理级别。可选值：<code>low</code>,&nbsp;<code>medium</code>,&nbsp;<code>quartile</code>,&nbsp;<code>high</code>&nbsp;or&nbsp;<code>L</code>,&nbsp;<code>M</code>,&nbsp;<code>Q</code>,&nbsp;<code>H</code></td> 
  </tr> 
  <tr> 
   <td><code>maskPattern</code></td> 
   <td>Number</td> 
   <td></td> 
   <td>可选值：<code>0</code>,&nbsp;<code>1</code>,&nbsp;<code>2</code>,&nbsp;<code>3</code>,&nbsp;<code>4</code>,&nbsp;<code>5</code>,&nbsp;<code>6</code>,&nbsp;<code>7</code></td> 
  </tr> 
  <tr> 
   <td><code>margin</code></td> 
   <td>Number</td> 
   <td>4</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>scale</code></td> 
   <td>Number</td> 
   <td>4</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>width</code></td> 
   <td>Number</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>color.dark</code></td> 
   <td>String</td> 
   <td>#000000ff</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>color.light</code></td> 
   <td>String</td> 
   <td>#ffffffff</td> 
  </tr> 
 </tbody> 
</table>

**二、方法二 vue-qr**

[vue-qr - npm][]

2.1、安装

> yarn add vue-qr

2.2、页面引入

import VueQr from 'vue-qr'

2.3、组件增加vue-qr

components: { VueQr },

2.4、template使用

logoSrc中间logo

<vue-qr style="width:200px;height:200px;" logoSrc="https://image.dandelioncloud.cn//dist/img/NoSlightly.png" text="Hello world!" :size="200"></vue-qr>

![e2b9ae5bf9634d0cb5b19b723a97b041.png][]

2.5、options

<table> 
 <thead> 
  <tr> 
   <th>Parameter</th> 
   <th>Explanation</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>Contents to encode. 欲编码的内容</td> 
  </tr> 
  <tr> 
   <td>correctLevel</td> 
   <td>Correct Level 0-3 容错级别 0-3</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>Width as well as the height of the output QR code, includes margin. 尺寸, 长宽一致, 包含外边距</td> 
  </tr> 
  <tr> 
   <td>margin</td> 
   <td>Margin to add around the QR code, default 20px. 二维码图像的外边距, 默认 20px</td> 
  </tr> 
  <tr> 
   <td>colorDark</td> 
   <td>Color of "true" blocks. Works only when both colorDark and colorLight are set. (BYTE_DTA, BYTE_POS, BYTE_AGN, BYTE_TMG) 实点的颜色</td> 
  </tr> 
  <tr> 
   <td>colorLight</td> 
   <td>Color of empty space, or "false" blocks. Works only when both colorDark and colorLight are set. (BYTE_EPT) 空白区的颜色</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>Controls the appearances of parts in the QR code. Read section&nbsp;<a href="https://www.npmjs.com/package/vue-qr#componentoptions" title="ComponentOptions" rel="nofollow">ComponentOptions</a>&nbsp;to learn more. 阅读&nbsp;<a href="https://www.npmjs.com/package/vue-qr#componentoptions" title="ComponentOptions" rel="nofollow">ComponentOptions</a>&nbsp;了解更多信息。</td> 
  </tr> 
  <tr> 
   <td>bgSrc</td> 
   <td>Background url to embed in the QR code. 欲嵌入的背景图地址</td> 
  </tr> 
  <tr> 
   <td>gifBgSrc</td> 
   <td>Gif background url to embed in the QR code, If gifBackground is set, backgroundImage will be ignored. This option will affects performance. 欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能</td> 
  </tr> 
  <tr> 
   <td>backgroundColor</td> 
   <td>Background color 背景色</td> 
  </tr> 
  <tr> 
   <td>backgroundDimming</td> 
   <td>Color mask to add above the background image. Helpful when having problems with decoding. 叠加在背景图上的颜色, 在解码有难度的时有一定帮助</td> 
  </tr> 
  <tr> 
   <td>logoSrc</td> 
   <td>Logo url to embed at the center of generated QR code 嵌入至二维码中心的 LOGO 地址</td> 
  </tr> 
  <tr> 
   <td>logoScale</td> 
   <td>Value used to scale the logo image. Larger value may result in decode failure. Size of the logo equals to&nbsp;<code>logoScale*(size-2*margin)</code>. Default is 0.2. 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式&nbsp;<code>logoScale*(size-2*margin)</code>, 默认 0.2</td> 
  </tr> 
  <tr> 
   <td>logoMargin</td> 
   <td>White margin that appears around the logo image. Default is 0. LOGO 标识周围的空白边框, 默认为0</td> 
  </tr> 
  <tr> 
   <td>logoBackgroundColor</td> 
   <td>Logo background color, need set logo margin. Logo 背景色,需要设置 logo margin</td> 
  </tr> 
  <tr> 
   <td>logoCornerRadius</td> 
   <td>Radius of the logo's corners.Default is 0 LOGO 标识及其边框的圆角半径, 默认为0</td> 
  </tr> 
  <tr> 
   <td>whiteMargin</td> 
   <td>If set to true, a white border will appear around the background image. Default is true. 若设为 true, 背景图外将绘制白色边框</td> 
  </tr> 
  <tr> 
   <td>dotScale</td> 
   <td>Value used to scale down the data dots' size. (0 &lt; scale &lt; 1.0) default 1 数据区域点缩小比例,默认为1</td> 
  </tr> 
  <tr> 
   <td>autoColor</td> 
   <td>If set to true, the dominant color of backgroundImage will be used as colorDark. Default is true. 若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true</td> 
  </tr> 
  <tr> 
   <td>binarize</td> 
   <td>If set to true, the whole image will be binarized with the given threshold, or default threshold if not specified. Default is false. 若为 true, 图像将被二值化处理, 未指定阈值则使用默认值</td> 
  </tr> 
  <tr> 
   <td>binarizeThreshold</td> 
   <td>Threshold used to binarize the whole image. Default is 128. (0 &lt; threshold &lt; 255) 二值化处理的阈值</td> 
  </tr> 
  <tr> 
   <td>callback</td> 
   <td>Data URI of the generated QR code will be available here. 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)</td> 
  </tr> 
  <tr> 
   <td>bindElement</td> 
   <td>If set to true, the generated QR will bind to a HTML element automatically. Default is true. 指定是否需要自动将生成的二维码绑定到HTML上, 默认是true</td> 
  </tr> 
 </tbody> 
</table>

**三、欢迎交流指正，关注我一起学习**

[qrcode - npm]: https://www.npmjs.com/package/qrcode
[ea23362a2f2445f6ada68eeeb07e5175.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/001631d2a7ec47a4b73c5f98d7955440.png
[f364934daf9a47cb8cb74483d70e7494.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5b6a15b5e0f44eac96e87e413378e1c3.png
[vue-qr - npm]: https://www.npmjs.com/package/vue-qr
[e2b9ae5bf9634d0cb5b19b723a97b041.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/43f9191faeef4217855853c0243914dd.png