Vue自动生成二维码并可下载二维码

        遇到一个需求，需要前端自行生成用户的个人名片分享二维码，并提供二维码下载功能。在网上找到很多解决方案，最终吭哧吭哧做完了，把它整理记录一下，方便后续学习使用！嘿嘿O(∩_∩)O~

这个小东西有以下功能特点：

1.可以生成密密麻麻程度不一样的二维码

2.可以生成不同颜色的二维码

3.二维码支持下载

4.代码简洁且通俗易懂（小白只能这样啦！）

        首先，先记录一下我的实验版本，因为怕把项目搞砸，所以我就自己create一个单独的小demo来实验，等功能实现了再搬过去用。系不系很机智！！！

一、实验小Demo

1、点击获取二维码

<template><div class="click-code"><div class="click-code-pic"><img class="logo" :src="src"></div><div class="click-code-info"><h6>{{title}}</h6><p>{{text}}</p><button @click="getCode(1)">点击获取二维码</button><div class="isShow" v-if="isClick==1"><div class="img-box"><!-- 这里一定要记得写绑定，一开始一直弹不出来，最后才发现是没绑定！！！ --><JkQrcode :url="url" :color="color" :margin="margin" class="cover-img"/><span class="image-remove" @click="getCode(0)">+</span>               </div></div></div></div>
</template><script>
import JkQrcode from'./JkQrcode'export default {name: 'ClickCode',components: {JkQrcode,},data() {return {isClick: 0,title:'你好呀！',text:'点击下方按钮获取二维码',width: 500,margin: 1,src:require('../assets/logo.png') ,url:'',color:'#'};},methods:{getCode(a){if(a==1){this.isClick=1;// 生成不同的二维码（在实际项目中，这些信息是通过后端返回的信息来绑定的，而不是这样随机生成啥就是啥） let arr = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","0","1","2","3","4","5","6","7","8","9"];// //生成不同的颜色  let lit=["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];// 为了降低重复率，多几个拼接，发现循环次数越多，二维码越密密麻麻for(let i=0;i<16;i++){this.url+=arr[Math.floor(Math.random()*36)];}// this.url="http://"+this.url+".png";for(var j=0;j<3;j++){this.color+=lit[Math.floor(Math.random()*16)];}var HisUrl=this.url;var HisCol=this.color;}if(a==0){if(!confirm("关闭后二维码将刷新，是否确定关闭？")){this.url=HisUrl;this.color=HisCol;}else{this.isClick=0;// 这里一定要初始化，不然它会一只连接下去，越来越长越来越长this.url="";this.color="#";}}}}
}
</script><style>
button{width:150px;height:50px;position: absolute; 
}
.img-box{display: inline-block;  border: 1px solid #ececec;position: relative;
}
.cover-img{max-width: 800px;min-width: 200px;
}
.image-remove{background-color: white;font-color: #ececec;font-size: 30px;width: 30px;height: 30px;text-align: center;border-radius: 100%;transform: rotate(45deg); cursor:pointer;opacity: 0.5;top:2px;right:2px;   display: block; position: absolute; 
}
.isShow{display: true;position: absolute; top: 10%; left: 15%; /* opacity属性指定了一个元素后面的背景的被覆盖程度。【设置透明度：越低越透明】*/opacity: .90; 
}
.logo{width: 200px;height: 200px;border-radius: 15px;
}
.click-code {display: flex;height: 200px;border: 3px solid #999;padding: 20px;border-radius: 21px;&-pic {display: flex;flex-direction: column;justify-content: center;img {height: 100%;}}&-info {display: flex;flex-direction: column;justify-content: center;h6 {font-size: 46px;}p {font-size: 36px;margin-top: 20px;}}
}
</style>

2、点击下载二维码

<template><div class="qrcode-box"><img :src="imgUrl" alt="二维码图片"/><br/><!-- 一开始写在ClickCode，一直获取不到图片，写在这里面就可以顺利找到图片地址了 --><button @click="downloadCodeImg" >点击下载二维码</button> </div>
</template><script>
import QRCode from 'qrcode'export default {name: 'JkQrcode',props: {url: {type: String,default: ''},color: {type: String,default: '#000'},width: {type: Number,default: 200},margin: {type: Number,default: 1}},data() {return {imgUrl: ''}},watch: {url() {this.createQRCode()}},mounted() {this.createQRCode()},methods: {createQRCode() {if (!this.url) returnQRCode.toDataURL(this.url, {errorCorrectionLevel: 'H',color: { dark: this.color, light: '#fff' },width: this.width,margin: this.margin}).then(url => {this.imgUrl = url}).catch(err => {console.error(err)})},//https://blog.csdn.net/sumimg/article/details/102969740 //下载二维码downloadCodeImg(){let link = document.createElement('a')let url =  this.imgUrl//要下载的路径// 这里是将url转成blob地址，fetch(url).then(res => res.blob()).then(blob => { //将链接地址字符内容转变成blob地址link.href = URL.createObjectURL(blob)console.log(link.href)link.download ='QrCode'document.body.appendChild(link)link.click()})}}
}
</script>
<style>
button{width:150px;height:50px;position: absolute; 
}
.qrcode-box {}
</style>

3、使用组件

<template><clickCode/>
</template><script>
import ClickCode from './components/ClickCode'export default {name:'App',components: {ClickCode}
}
</script>

4、效果

 

二、在小程序项目中使用（用Canvas）

在这里，二维码的大小是自适应的

qrwidth: 200 / 750 * wx.getSystemInfoSync().windowWidth,

1、使用入口

<view><button class="edit-btn" @tap="handleShareCard">分享名片</button></view>

<canvas v-show="showQrcode" class="canvas-qcode" canvas-id="qrcanvas" :style="'width:' + qrwidth + 'px;height:' + qrwidth + 'px;'"></canvas>

<canvas class="temp-canvas" canvas-id="tempCanvas" style="position: absolute; left: -10000px; top: 10000px;" :style="'width:' + qrwidth + 'px;height:' + qrwidth + 'px'"></canvas>

 2、生成唯一的二维码

      const text = getApp().globalData.QCODE_URL + (_self.company.tyshxydm || "") + "&companyName=" + _self.company.jgmcdrawQrcode({width: _self.qrwidth,height: _self.qrwidth,foreground: _self.qrColor,canvasId: "qrcanvas",text,image: {},callback: res => {}});

      // 在名片中这么处理，在详情页不需要处理中间图片drawQrcode({width: _self.qrwidth,height: _self.qrwidth,foreground: '#000',canvasId: "tempCanvas",text: text + "&companyMobile=" + _self.userInfo.mobile,callback: res => {// 读取二维码，并绘制二维码_self.canvasToImg({canvasId: "tempCanvas",width: _self.imageWidth,height: _self.imageWidth * 0.6,callback(res) {console.info("canvasToImg", res.tempFilePath);_self.canvasImg = res.tempFilePath;}});}});

3、保存

    // 保存名片onTapSaveCard(e) {let _self = this;_self.canvasToImg({canvasId: "cardCanvas",width: _self.imageWidth,height: _self.imageWidth * 0.6,callback(res) {debugger_self.saveImg(res.tempFilePath);}});},

 因为不能泄露公司的一些业务，就只放一些核心代码就好啦！~

总而言之，导师说用canvas绘制会性能更好些。