1.现在需要在页面中生成一个二维码,并附带上公司的logo
生成的二维码需要显示logo,并且点击可以二维码可以下载保存,有两种方案供选择(vue-qr、qrcode)
2.vue-qr库使用(方案一)
npm i vue-qr@4.0.9
我的nodejs版本12.13.0,大家可以使用cnpm下载更好。
html代码:
<template> <div class="main"> <div> <vue-qr :text="codeText" :size="150" :margin="20" colorDark="#333" backgroundColor="#eee" :logoSrc="lgoImg" logoScale="0.21" logoMargin="25px" :callback="getCode" ></vue-qr> </div> </div> </template>
JS代码:
<script> import VueQr from 'vue-qr' export default { name:'QR', components:{VueQr}, data() { return { codeText: 'https://blog.csdn.net/yuansusu_?spm=1000.2115.3001.53', lgoImg: require('../assets/111.png'), }; }, methods: { getCode(codeImg) { console.log('二维码图片', codeImg); }, } } </script>
- text是要生成的内容
- size表示二维码的宽高,宽高一致
- margin二维码图像的外边距, 默认 20px
- colorDark实点的颜色
- backgroundColor背景颜色(背景图片使用bgSrc或gifBgSrc)
- logoSrc嵌入中间的logo地址
- logoScale用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式
logoScale*(size-2*margin)
, 默认 0.2- logoMargin设置LOGO 标识周围的空白边框, 默认为0
- callback生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序)
官网文档:vue-qr - npm(文档是中文,可以放心食用)
3.qrcode库使用并带下载方式(方案二)(推荐)
npm i qrcode@1.5.1
使用qecode配置的logo更为灵活,并且在不是vue项目中也能同样使用
html(部分)和css代码:
<div class="qr-code"> <canvas id="QRCode_header" ref="canvas" title="扫描二维码" ></canvas> <div class="mask-code" @click="saveCode"> <i></i><span>保存二维码</span> </div> </div>
<style scoped> .qr-code{ display: flex; width:fit-content; width:-webkit-fit-content; width:-moz-fit-content; position: relative; } .qr-code:hover>div{ z-index: 0; } .mask-code{ position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0,0.4); display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: -1; } .mask-code i{ display: inline-block; width: 25px; height: 25px; background-image: url(../assets/save_img.png); background-size: cover; } .mask-code span{ color: white; } </style>
可以将上面的内容封装到组件中,通过props来传递想要生成的内容
JS代码:
<script> import QRCode from "qrcode"; //引入生成二维码插件 export default { name:'CodeS', props:{ canvasWidth:{ default:200, type:Number }, canvasHeight:{ default:200, type:Number }, url:{ default:'', type:String, required:true }, logoUrl:{ default:'', type:String, // required:true } }, methods:{ getQRCode() { let opts = { errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例 type: "image/png",//生成的二维码类型 quality: 0.3,//二维码质量 margin: 5,//二维码留白边距 width: this.canvasWidth,//宽 height: this.canvasHeight,//高 text: "1111",//二维码内容 color: { light: "#eaeaea"//背景色 } }; // 将获取到的数据(val)画到msg(canvas)上,加上时间戳动态生成二维码 QRCode.toCanvas(this.$refs.canvas, this.url, opts, function (error) { if(error){ console.log('加载失败!'); } }); }, saveCode(){ //下载二维码 let base64Img = this.$refs.canvas.toDataURL('image/jpg'); //创建下载标签,然后设置链接和图片名称 let a = document.createElement('a') a.href = base64Img a.download = '二维码'+Date.now() a.click() //销毁元素 a.remove() } }, mounted() { this.getQRCode() //设置logo图标 if(this.logoUrl!= ''){ let myCanvas = this.$refs.canvas let ctx = myCanvas.getContext('2d') // 在Canvas画布 添加图片 let img = new Image() img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题 img.src = this.logoUrl; img.onload = ()=>{ //第一个设置的元素,第二三是位置,后面两个是宽和高 //居中的位置计算为 (二维码宽度-img宽度)/2 let codeWidth = (this.canvasWidth *0.75)/2 let codeHeight = (this.canvasHeight * 0.75)/2 ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25) } } }, } </script>
errorCorrectionLevel纠错级别有四个:
- L(7%)
- M(15%)
- Q(25%)
- H(30%)
级别越高,logo占的大小就越大。
通过鼠标点击二维码,就可以将二维码保存在本地文章来源:https://www.toymoban.com/news/detail-788734.html
文档地址:qrcode - npm(无中文)文章来源地址https://www.toymoban.com/news/detail-788734.html
到了这里,关于Vue中两种生成二维码(带logo)并下载方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!