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

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 图片
logoMarginlogo 标识周围的空白边框, 默认为0
logoScale用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin), 默认 0.2
logoBackgroundColorlogo 背景色,需要设置 logo margin
logoCornerRadiuslogo 标识及其边框的圆角半径, 默认为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封禁,这里就不展示了。。。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中使用zxing库进行二维码识别的过程相对简单。首先,我们需要安装zxing库,可以使用npm命令进行安装: ``` npm install zxing --save ``` 安装完成后,我们可以在Vue组件中引入zxing库: ```javascript import zxing from 'zxing'; ``` 然后,我们可以在Vue组件的方法中使用zxing库来识别二维码。例如,我们可以在一个点击事件中对图片进行二维码识别: ```javascript methods: { handleQRCodeRecognition() { const image = new Image(); image.src = 'path/to/your/image.jpg'; image.onload = () => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; context.drawImage(image, 0, 0, image.width, image.height); const binaryBitmap = zxing.BinaryBitmap.createBinarizer( new zxing.RGBLuminanceSource(canvas, image.width, image.height) ); try { const result = new zxing.qrcode.QRCodeReader().decode(binaryBitmap); console.log(result.getText()); } catch (error) { console.error(error); } }; } } ``` 在以上代码中,我们首先创建了一个图片对象,并将其路径设置为要识别的图片。然后,在图片加载完成后,我们创建一个canvas元素,并将图片绘制到canvas上。接下来,我们使用zxing库的相关方法,将canvas转换为BinaryBitmap对象,并使用QRCodeReader对二维码进行识别。如果识别成功,我们可以通过result.getText()方法获取二维码中的文本信息。 需要注意的是,由于zxing库依赖于DOM对象,因此以上代码只能在浏览器环境中使用,而不能在Node.js中使用。另外,为了确保识别效果,最好是使用高清晰度、清晰可见的二维码图片进行识别。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值