目录
1.初始化qrcode
cnpm install --save qrcode2.二维码生成以及下载组件代码
可以自己控制是否生成logo以及文字说明
<template>
<div id="meQrcode" :title="qrText">
<div class="qrcode_box">
<img class="qrcode_canvas" id="qrcode_canvas" ref="qrcode_canvas" alt="二维码" />
<img v-if="qrLogo" class="qrcode_logo" ref="qrcode_logo" :src="qrLogo" alt="logo" />
<canvas :width="qrSize" :height="qrSize" class="canvas" ref="canvas" id="canvas"></canvas>
<el-button round size="small" @click="savePic">保存图片</el-button>
</div>
</div>
</template>
<script>
import QRCode from "qrcode";
import logo from "./logo.jpg";
export default {
props: {
//二维码存储内容
qrUrl: {
type: String,
default: "你不配"
},
//二维码尺寸（正方形 长宽相同）
qrSize: {
type: Number,
default: 300
},
//二维码底部文字
qrText: {
default: "美女"
},
//二维码中部logo 如果写default: ""则不生成logo
qrLogo: {
type: String,
default: logo
},
//logo尺寸（正方形 长宽相同）
qrLogoSize: {
type: Number,
default: 40
},
//底部说明文字字号
qrTextSize: {
type: Number,
default: 14
}
},
data() {
return {};
},
methods: {
/**
* @argument qrUrl 二维码内容
* @argument qrSize 二维码大小
* @argument qrText 二维码中间显示文字
* @argument qrTextSize 二维码中间显示文字大小(默认16px)
* @argument qrLogo 二维码中间显示图片
* @argument qrLogoSize 二维码中间显示图片大小(默认为80)
*/
handleQrcodeToDataUrl() {
let qrcode_canvas = this.$refs.qrcode_canvas;
let qrcode_logo = this.$refs.qrcode_logo;
let canvas = this.$refs.canvas;
const that = 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, that.qrSize, that.qrSize);
if (that.qrLogo) {
//设置logo大小
//设置获取的logo将其变为圆角以及添加白色背景
ctx.fillStyle = "#fff";
ctx.beginPath();
let logoPosition = (that.qrSize - that.qrLogoSize) / 2; //logo相对于canvas居中定位
let h = that.qrLogoSize + 10; //圆角高 10为基数(logo四周白色背景为10/2)
let w = that.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(); qrcode_logo.onload = function () {
ctx.drawImage(
qrcode_logo,
logoPosition,
logoPosition,
that.qrLogoSize,
that.qrLogoSize
);
}
}
if (that.qrText) {
//设置字体
let fpadd = 10; //规定内间距
ctx.font = "bold " + that.qrTextSize + "px Arial";
let tw = ctx.measureText(that.qrText).width; //文字真实宽度
let ftop = that.qrSize - that.qrTextSize; //根据字体大小计算文字top
let fleft = (that.qrSize - tw) / 2; //根据字体大小计算文字left
let tp = that.qrTextSize / 2; //字体边距为字体大小的一半可以自己设置
ctx.fillStyle = "#fff";
ctx.fillRect(
fleft - tp / 2,
ftop - tp / 2,
tw + tp,
that.qrTextSize + tp
);
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
ctx.fillStyle = "#333";
ctx.fillText(that.qrText, fleft, ftop);
}
qrcode_canvas.src = canvas.toDataURL();
}, 0);
}
);
},
//保存图片
savePic() {
let a = document.createElement("a")
//将二维码面板处理为图片
a.href = this.$refs.canvas.toDataURL("image/png", 0.5);
a.download = this.qrUrl + ".png"
a.click()
},
},
mounted() {
this.handleQrcodeToDataUrl();
},
updated() {
this.handleQrcodeToDataUrl();
},
};
</script>
<style scoped>
.qrcode_box,
#meQrcode {
display: inline-block;
}
.qrcode_box img {
display: none;
}
</style>3.父页面调用组件代码
//引入组件
import QrItem from '@/components/qrcode/qrcode.vue'
//组件声明
components: {
QrItem
},
//代码应用
<qr-item :qrText="codeText" :qrUrl="codeText" :qrSize="200"></qr-item>
//qrText qrUrl qrSize均为组件的参数，还有一些参数没有传，则使用组件默认值，自行传递即可，
//codeText是本页的变量4.组件展示效果
5.二维码下载展示效果
下载对于没有logo或文字的情况下也是可以的【亲测】
?
?