一、普通方式的生成
1、引入js
<script src="~/Scripts/qrcode/jquery.qrcode.min.js"></script>
2、生成
$(this).children('div').qrcode({
width: 120,
height: 120,
text: $url,
src: '/Content/images/logo-code.png'
});
这种方式可生成二维码,可控制大小,还可以生成中间的logo
二、纯vue前端环境
1、安装qrcode
npm i qrcodejs2
2、引入
import QRCode from 'qrcodejs2'
3、生成
let qrcode = new QRCode('code_' + item.id, {
width: 120,
height: 120,
text: url, // 二维码地址
colorDark: "#000",
colorLight: "#fff",
)
但是这种方式生成的二维码有个缺点,就是不能生成中间的logo。工作正式使用的二维码,还是带logo的,所以这个很有必要
经过搜索发现这样 一种方式可以实现logo和二维码的结合
<template> <!-- 生成二维码开放接口: 二维码内容[通常为url] 二维码大小[限制为正方形] 二维码中间显示:文字或LOGO[默认不显示]--> <div id="meQrcode"> <div class="qrcode_box"> <img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码图片"> <!--<img class="qrcode_logo" ref="qrcode_logo" :src="'./static/images/bg_creat.png'" alt="二维码logo">--> <img v-if="qrLogo" class="qrcode_logo" ref="qrcode_logo" :src="qrLogo" alt="二维码logo"> <canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas"></canvas> </div> </div> </template> <script> const QRCode = require("qrcode"); export default { name:'MyQrcode', data() { return {}; }, /**传入时间戳显示倒计时函数【后台时间戳一般都是10位的】 * @argument qrUrl 二维码内容 * @argument qrSize 二维码大小 * @argument qrText 二维码中间显示文字 * @argument qrTextSize 二维码中间显示文字大小(默认16px) * @argument qrLogo 二维码中间显示图片 * @argument qrLogoSize 二维码中间显示图片大小(默认为80) * 注:qrText与qrLogo只能显示一个,如果想要显示两个需要自行设计 */ props: ["qrUrl", "qrSize", "qrText", "qrLogo", "qrLogoSize", "qrTextSize"], created() { }, mounted() { // 画二维码里的logo[注意添加logo图片的时候需要使用服务器] let qrcode_canvas = this.$refs.qrcode_canvas; let qrcode_logo = this.$refs.qrcode_logo; let canvas = this.$refs.canvas; let vue = this QRCode.toDataURL(this.qrUrl, {errorCorrectionLevel: "H"}, (err, url) => { qrcode_canvas.src = url; // 画二维码里的logo// 在canvas里进行拼接 let ctx = canvas.getContext("2d"); setTimeout(() => { //获取图片 ctx.drawImage(qrcode_canvas, 0, 0, vue.qrSize, vue.qrSize); if (vue.qrLogo) { //设置logo大小 //设置获取的logo将其变为圆角以及添加白色背景 ctx.fillStyle = "#fff"; ctx.beginPath(); let logoPosition = (vue.qrSize - vue.qrLogoSize) / 2; //logo相对于canvas居中定位 let h = vue.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2) let w = vue.qrLogoSize + 10; //圆角宽 let x = logoPosition - 5; let y = logoPosition - 5; let r = 5; //圆角半径 ctx.moveTo(x + r, y); ctx.arcTo(x + w, y, x + w, y + h, r); ctx.arcTo(x + w, y + h, x, y + h, r); ctx.arcTo(x, y + h, x, y, r); ctx.arcTo(x, y, x + w, y, r); ctx.closePath(); ctx.fill(); ctx.drawImage( qrcode_logo, logoPosition, logoPosition, vue.qrLogoSize, vue.qrLogoSize ); } else if (vue.qrText) { //设置字体 let fpadd = 10; //规定内间距 ctx.font = "bold " + vue.qrTextSize + "px Arial"; let tw = ctx.measureText(vue.qrText).width; //文字真实宽度 let ftop = (vue.qrSize - vue.qrTextSize) / 2; //根据字体大小计算文字top let fleft = (vue.qrSize - tw) / 2; //根据字体大小计算文字left let tp = vue.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置 ctx.fillStyle = "#fff"; ctx.fillRect( fleft - tp / 2, ftop - tp / 2, tw + tp, vue.qrTextSize + tp ); ctx.textBaseline = "top"; //设置绘制文本时的文本基线。 ctx.fillStyle = "#f40"; ctx.fillText(this.qrText, fleft, ftop); } canvas.style.display = "none"; qrcode_canvas.src = canvas.toDataURL(); qrcode_canvas.style.display = "inline-block"; }, 500); }); } }; </script> <style scoped> .qrcode_box, #meQrcode { display: inline-block; } .qrcode_box img { display: none; } </style>
然后只需要就可以当成组件使用了
<my-qrcode :qr-url="baseUrl + '/survey/mobile.html#/login/' + currentSurvey.id" :qr-size='130' :qr-logo-size="30" :qr-logo="'./static/images/logo-code.png'"></my-qrcode>