枣庄做网站,百度推广后台登陆官网,产品宣传短视频,上海营销型网站建设平台遇到一个需求#xff0c;需要前端自行生成用户的个人名片分享二维码#xff0c;并提供二维码下载功能。在网上找到很多解决方案#xff0c;最终吭哧吭哧做完了#xff0c;把它整理记录一下#xff0c;方便后续学习使用#xff01;嘿嘿O(∩_∩)O~ 这个小东西有以下功能特点… 遇到一个需求需要前端自行生成用户的个人名片分享二维码并提供二维码下载功能。在网上找到很多解决方案最终吭哧吭哧做完了把它整理记录一下方便后续学习使用嘿嘿O(∩_∩)O~ 这个小东西有以下功能特点 1.可以生成密密麻麻程度不一样的二维码 2.可以生成不同颜色的二维码 3.二维码支持下载 4.代码简洁且通俗易懂小白只能这样啦 首先先记录一下我的实验版本因为怕把项目搞砸所以我就自己create一个单独的小demo来实验等功能实现了再搬过去用。系不系很机智 一、实验小Demo
1、点击获取二维码
templatediv classclick-codediv classclick-code-picimg classlogo :srcsrc/divdiv classclick-code-infoh6{{title}}/h6p{{text}}/pbutton clickgetCode(1)点击获取二维码/buttondiv classisShow v-ifisClick1div classimg-box!-- 这里一定要记得写绑定一开始一直弹不出来最后才发现是没绑定 --JkQrcode :urlurl :colorcolor :marginmargin classcover-img/span classimage-remove clickgetCode(0)/span /div/div/div/div
/templatescript
import JkQrcode from./JkQrcodeexport 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(a1){this.isClick1;// 生成不同的二维码在实际项目中这些信息是通过后端返回的信息来绑定的而不是这样随机生成啥就是啥 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 i0;i16;i){this.urlarr[Math.floor(Math.random()*36)];}// this.urlhttp://this.url.png;for(var j0;j3;j){this.colorlit[Math.floor(Math.random()*16)];}var HisUrlthis.url;var HisColthis.color;}if(a0){if(!confirm(关闭后二维码将刷新是否确定关闭)){this.urlHisUrl;this.colorHisCol;}else{this.isClick0;// 这里一定要初始化不然它会一只连接下去越来越长越来越长this.url;this.color#;}}}}
}
/scriptstyle
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、点击下载二维码
templatediv classqrcode-boximg :srcimgUrl alt二维码图片/br/!-- 一开始写在ClickCode一直获取不到图片写在这里面就可以顺利找到图片地址了 --button clickdownloadCodeImg 点击下载二维码/button /div
/templatescript
import QRCode from qrcodeexport 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 QrCodedocument.body.appendChild(link)link.click()})}}
}
/script
style
button{width:150px;height:50px;position: absolute;
}
.qrcode-box {}
/style3、使用组件
templateclickCode/
/templatescript
import ClickCode from ./components/ClickCodeexport default {name:App,components: {ClickCode}
}
/script4、效果 二、在小程序项目中使用用Canvas
在这里二维码的大小是自适应的
qrwidth: 200 / 750 * wx.getSystemInfoSync().windowWidth,
1、使用入口
viewbutton classedit-btn taphandleShareCard分享名片/button/view
canvas v-showshowQrcode classcanvas-qcode canvas-idqrcanvas :stylewidth: qrwidth px;height: qrwidth px;/canvas
canvas classtemp-canvas canvas-idtempCanvas styleposition: absolute; left: -10000px; top: 10000px; :stylewidth: qrwidth px;height: qrwidth px/canvas2、生成唯一的二维码 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绘制会性能更好些。
