使用vue-qr生成带中间带图片的二维码

1.安装

npm install vue-qr --save

2.在页面中使用

logoSrc：二维码中间的logo图
size：图片尺寸
text：二维码地址或内容
margin：二维码图片的空白边距大小
callback：生成后的回调函数，可获取二维码base64格式的图片数据
logoScale：设置logo大小的属性，默认0.2（产品说logo太小，于是我设置成了0.3，结果扫码无法识别…于是又改回了默认值）

<vue-qr ref="Qrcode" :logoSrc="imgUrl" :text="codeUrl" :size="200" :margin="10" :callback="callback" qid="testQrId"></vue-qr>
<a :href="exportLink" @click="downloadImg" :download="downloadFilename">下载二维码</a>import VueQr from 'vue-qr'components:{VueQr
},data(){return{codeUrl: '我好看吗？', // 二维码地址或内容imgUrl:'', // 二维码中间的logo图exportLink: '',downloadFilename: '', //下载的图片文件名}
},
methods:{// 回调函数callback(dataUrl, id) {console.log(dataUrl) // 生成的base64格式的二维码图片数据// console.log(id)},// 下载二维码图片downloadImg () {let Qrcode = this.$refs.Qrcodethis.exportLink = Qrcode.$el.currentSrcconsole.log(Qrcode, this.exportLink, "test");this.downloadFilename = '二维码'}
}

3.我的项目完整代码

<template><div class="main"><div class="box"><!-- <img class="qrcode" src="~@/assets/img/code.png" alt=""> --><vue-qr class="qrcode" ref="Qrcode" :logoSrc="imgUrl" :text="codeUrl" :size="172" :margin="10" :callback="callback" qid="testQrId"></vue-qr><div class="text"><img class="icon" src="~@/assets/img/icon_check01.png" alt=""><span class="span">长按保存到手机</span></div></div></div>
</template>import VueQr from 'vue-qr'
export default {components:{VueQr},data(){return{codeUrl: '', // 二维码的地址或内容imgUrl:'', // 二维码中间的logo图exportLink: '',downloadFilename: '',id: '',url: '',}},created(){this.getCode();},methods:{// 获取二维码信息getCode(){var href = window.location.href;this.url = href.substring(0,href.lastIndexOf("/"));getCode().then((res) => { if(res.status == 200) {this.id = res.data; // 获取后台返回的idthis.codeUrl = this.url + '/record?id=' + this.id; // 我的二维码地址console.log(this.codeUrl,"codeUrl");}})},// 回调函数callback(dataUrl, id) {console.log(dataUrl) // 生成的base64格式的二维码数据// console.log(id)},}
}
</script>

使用vue-qr生成带中间带图片的二维码相关推荐

Python生成带圆角图片的二维码
示例代码1 #!/usr/bin/python # -*- coding: UTF-8 -*- # author: Carl time:2020/5/15import qrcode from PIL ...
基于phpqrcode生成带LOGO图标的二维码（源代码例子）
基于phpqrcode生成带LOGO图标的二维码(源代码例子) <?php //文件输出 include('phpqrcode.php'); // 二维码数据 $data = 'http://w ...
微信公众号怎么生成带统计的渠道二维码
公众号生成带统计的渠道二维码,通过公众号开发接口生成带参数的二维码实现,记录粉丝关注取关的结果,包含粉丝昵称.粉丝头像等都是公众号平台提供的接口开发.微号帮平台现有功能渠道二维码生成实现,也可以自己开 ...
qrcode生成一个带有图片的二维码
import qrcode qr = qrcode.QRCode( version=2, error_correction=qrcode.constants.ERROR_COR ...
java 生成带网络头像的二维码
最近做一个带微信头像的二维码的功能,微信头像是一个链接,所以先把微信头像下载,临时保存,生成二维码 /*** 文件下载工具类** @author zhengxinghua*/ public class ...
如何生成带统计参数的二维码渠道监测
随着互联网技术的发展,二维码成为App流量分发的主流形式,我们能在各种不同的场合看到扫码入口.这种形式的App推广相较于链接.应用商店而言更加简单灵活,既能打通线上线下的信息通道,也可以植入到图文内容 ...
JS生成带Logo的QRCode二维码
一:jquery.qrcode.min.js QRCode的JS库下载(自己百度或者直接下载最后的Demo): 二:选定自己需要放在二维码中间的一个Logo图片: 三:代码实现: <!DOCTY ...
微信公众号开发----生成带参数的临时二维码
本文只提供代码实现,具体参数含义请先仔细阅读微信公众号技术文档之生成带参数的二维码临时二维码请求说明: 一.常量类 public class WechartConst {//生成带参数的二维码pub ...
自己整理的vue实现生成分享海报（含二维码），看着网上的没实现
大家好,我是雄雄. 前言相信大家在许多的场景下,看到过这样的案例. 当我们在某购物app上看好一件商品,想分享给别人时,app会给我们生成一张海报,我们将其保存在手机里面转发给其他人达到分享. 当我 ...

使用vue-qr生成带中间带图片的二维码

使用vue-qr生成带中间带图片的二维码相关推荐

最新文章

热门文章