Vue生成二维码，自定义插入图片生成logo

onetool

已于 2022-11-29 19:25:33 修改

阅读量835

点赞数

文章标签： vue.js javascript 前端

于 2022-11-28 18:56:32 首次发布

本文链接：https://blog.csdn.net/eviltiaotiao/article/details/128084041

版权

Vue生成二维码，自定义插入图片生成logo
vue-qr是一个很棒的制作二维码开源库，github地址：https://github.com/Binaryify/vue-qr

1.安装vue-qr

npm install vue-qr --save

2.在需要用到的文件中引入

import vueqr from "vue-qr";

3.在script组件中加入vue-qr

  components: {
    vueqr,
  },

4.在template中加入vue-qr组件

      <vue-qr
        :correctLevel="3" 
        :autoColor="false"
        colorDark="#000000"
        :text="qrText"//这个一个变量，需要在data中定义
        :logoSrc="icon_url"//这个一个变量，需要在data中定义
        :logoScale="0.28"
        :size="300"
      />

参数说明

参数	说明
text	欲编码内容，也是扫描生成的二维码得到的文字或链接等
correctLevel	容错级别，范围：0-3
size	尺寸, 长宽一致, 包含外边距
margin	二维码图像的外边距, 默认 20px
colorDark	二维码实点的颜色
colorLight	空白区的颜色
bgSrc	欲嵌入的背景图地址
gifBgSrc	欲嵌入的背景图 gif 地址,设置后普通的背景图将失效。设置此选项会影响性能
backgroundColor	背景色
logoSrc	嵌入至二维码中心的 logo 地址，这个参数可以自定义logo 图片
logoMargin	logo 标识周围的空白边框, 默认为0
logoScale	用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale(size-2margin), 默认 0.2
logoBackgroundColor	logo 背景色,需要设置 logo margin
logoCornerRadius	logo 标识及其边框的圆角半径, 默认为0
autoColor	若为 true, 背景图的主要颜色将作为实点的颜色, 即 colorDark,默认 true

5.在script数据中加入text和logoSrc绑定的变量，可以生成logo图片，如下：

data() {
	return {
		qrText: "Hello",
		icon_url:require("@/assets/logo.png")
	}
}

qrText就是二维码的编码内容，图片可以放在assets文件夹下，这样就可以生成带logo的二维码。演示网址：https://www.1tool.site/#/qrcode?id=2
含有二维码的图片都会被CSDN封禁，这里就不展示了。。。