Vue中两种生成二维码(带logo)并下载方式总结
作者：元素苏_
与后端生成二维码相比,前端生成二维码更具有灵活性,下面这篇文章主要给大家介绍了关于Vue中两种生成二维码(带logo)并下载的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
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占的大小就越大。
通过鼠标点击二维码，就可以将二维码保存在本地
文档地址：qrcode - npm（无中文）
总结
到此这篇关于Vue中两种生成二维码(带logo)并下载方式的文章就介绍到这了,更多相关Vue生成二维码带logo并下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！