1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <!--
| * @Descripttion: 生成二维码组件
| * @version: 1.0
| * @Author: sakuya
| * @Date: 2021年12月20日14:22:20
| * @LastEditors:
| * @LastEditTime:
| -->
|
| <template>
| <img ref="img"/>
| </template>
|
| <script>
| import QRcode from "qrcodejs2"
|
| export default {
| props: {
| text: { type: String, required: true, default: "" },
| size: { type: Number, default: 100 },
| logo: { type: String, default: "" },
| logoSize: { type: Number, default: 30 },
| logoPadding: { type: Number, default: 5 },
| colorDark: { type: String, default: "#000000" },
| colorLight: { type: String, default: "#ffffff" },
| correctLevel: { type: Number, default: 2 },
| },
| data() {
| return {
| qrcode: null
| }
| },
| watch:{
| text(){
| this.draw()
| }
| },
| mounted() {
| this.draw()
| },
| methods: {
| //创建原始二维码DOM
| async create(){
| return new Promise((resolve) => {
| var element = document.createElement("div");
| new QRcode(element, {
| text: this.text,
| width: this.size,
| height: this.size,
| colorDark: this.colorDark,
| colorLight: this.colorLight,
| correctLevel: this.correctLevel
| })
| if (element.getElementsByTagName("canvas")[0]) {
| this.qrcode = element
| resolve()
| }
| })
| },
| //绘制LOGO
| async drawLogo(){
| return new Promise((resolve) => {
| var logo = new Image()
| logo.src = this.logo
| const logoPos = (this.size - this.logoSize) / 2
| const rectSize = this.logoSize + this.logoPadding
| const rectPos = (this.size - rectSize) / 2
| var ctx = this.qrcode.getElementsByTagName("canvas")[0].getContext("2d")
| logo.onload = ()=>{
| ctx.fillRect(rectPos, rectPos, rectSize, rectSize)
| ctx.drawImage(logo, logoPos, logoPos, this.logoSize, this.logoSize)
| resolve()
| }
| })
| },
| async draw(){
| await this.create()
| if(this.logo){
| await this.drawLogo()
| }
| this.$refs.img.src = this.qrcode.getElementsByTagName("canvas")[0].toDataURL("image/png")
| },
| }
| }
| </script>
|
| <style>
| </style>
|
|
