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

Posted 2023-04-09 snow@li

一、方法一 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：

​​​​​​​ 

1.4、options

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

二、方法二 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>

 2.5、options

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

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

vue生成条形码和二维码

参考技术A 使用jsbarcode：

官网:

https://lindell.me/JsBarcode/

简单使用如下：

vue用法：

1.npm install jsbarcode --save

2.在需要使用的vue页面里面引用：

import JsBarcode from 'jsbarcode'

3.界面中使用：

<div  style="text-align: center;" ><svg id="barcode" ></svg></div>

4.js：

详细参数参考官方文档。

使用qrcodejs2:

没有找到官网，可以参考npmjs：

https://www.npmjs.com/package/qrcodejs2

vue用法：

1.npm install qrcodejs2 --save

2.在需要使用的页面中引用：

import QRCode from 'qrcodejs2'

3.页面:

<div style="display: flex;justify-content: center;" id='qrcode'></div>

4.js：