qrcode.vue 3.7.0 → 3.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +134 -0
- package/dist/qrcode.vue.browser.js +24 -21
- package/dist/qrcode.vue.browser.min.js +2 -2
- package/dist/qrcode.vue.cjs.js +24 -21
- package/dist/qrcode.vue.esm.js +24 -21
- package/package.json +2 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
## [3.7.1] - 2026-01-31
|
|
2
|
+
|
|
3
|
+
### Bugfix
|
|
4
|
+
|
|
5
|
+
- Fix logo image border radius scale in QRCode.
|
|
6
|
+
|
|
7
|
+
## [3.7.0] - 2026-01-29
|
|
8
|
+
|
|
9
|
+
### Feature
|
|
10
|
+
|
|
11
|
+
- Suppord border radius for QRCode logo image.
|
|
12
|
+
- optimize performance for QRCode.
|
|
13
|
+
|
|
14
|
+
### Bugfix
|
|
15
|
+
|
|
16
|
+
- Fix state update issue when value prop changed.
|
|
17
|
+
|
|
18
|
+
## [3.6.0] - 2024-11-03
|
|
19
|
+
|
|
20
|
+
### Feature
|
|
21
|
+
|
|
22
|
+
- Support `gradient` props for QRCode.
|
|
23
|
+
|
|
24
|
+
## [3.5.0] - 2024-09-26
|
|
25
|
+
|
|
26
|
+
### Feature
|
|
27
|
+
|
|
28
|
+
- Support logo image for Qrcode.
|
|
29
|
+
- Exports separate `QrcodeCanvas` and `QrcodeSvg` components
|
|
30
|
+
|
|
31
|
+
Direct references to `QrcodeVue` in common.js and cdn now require the `default` field:
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
const QrcodeVue = require('qrcode.vue').default
|
|
35
|
+
const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<!--With HTML-->
|
|
40
|
+
<div id="root">
|
|
41
|
+
<p class="flex space-x">
|
|
42
|
+
<qrcode-vue :value="test" render-as="svg"></qrcode-vue>
|
|
43
|
+
<qrcode-canvas :value="test"></qrcode-canvas>
|
|
44
|
+
<qrcode-svg :value="test" :image-settings="imageSettings"></qrcode-svg>
|
|
45
|
+
</p>
|
|
46
|
+
<p><input v-model="test" /></p>
|
|
47
|
+
</div>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>
|
|
50
|
+
|
|
51
|
+
<script>
|
|
52
|
+
Vue.createApp({
|
|
53
|
+
data() { return {
|
|
54
|
+
test: 'Hello World',
|
|
55
|
+
imageSettings: {
|
|
56
|
+
src: 'https://avatars.githubusercontent.com/u/15811268',
|
|
57
|
+
width: 30,
|
|
58
|
+
height: 30,
|
|
59
|
+
excavate: true,
|
|
60
|
+
},
|
|
61
|
+
}},
|
|
62
|
+
components: {
|
|
63
|
+
QrcodeVue: QrcodeVue.default,
|
|
64
|
+
QrcodeCanvas: QrcodeVue.QrcodeCanvas,
|
|
65
|
+
QrcodeSvg: QrcodeVue.QrcodeSvg,
|
|
66
|
+
},
|
|
67
|
+
}).mount('#root')
|
|
68
|
+
</script>
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
## [3.4.1] - 2023-08-05
|
|
72
|
+
|
|
73
|
+
### BUGFIX
|
|
74
|
+
|
|
75
|
+
- Fixed TypeScript type export error.
|
|
76
|
+
|
|
77
|
+
## [3.4.0] - 2023-04-15
|
|
78
|
+
|
|
79
|
+
### Performance
|
|
80
|
+
|
|
81
|
+
- remove `qr.js` dependency, use `nayuki/QR-Code-generator` instead.
|
|
82
|
+
|
|
83
|
+
## [3.3.1] - 2021-09-11
|
|
84
|
+
|
|
85
|
+
### BUGFIX
|
|
86
|
+
|
|
87
|
+
- Fix document description error, adjust `renderAs` to `render-as`.
|
|
88
|
+
|
|
89
|
+
## [3.2.0] - 2020-12-20
|
|
90
|
+
|
|
91
|
+
### Feature
|
|
92
|
+
|
|
93
|
+
- support typescript.
|
|
94
|
+
|
|
95
|
+
## [3.1.0] - 2020-12-20
|
|
96
|
+
|
|
97
|
+
### Feature
|
|
98
|
+
|
|
99
|
+
- Add support margin for QRcode.
|
|
100
|
+
|
|
101
|
+
## [3.0.0] - 2020-12-20
|
|
102
|
+
|
|
103
|
+
### Feature
|
|
104
|
+
|
|
105
|
+
- Support Vue 3
|
|
106
|
+
|
|
107
|
+
## [1.7.0] - 2019-11-10
|
|
108
|
+
|
|
109
|
+
### Feature
|
|
110
|
+
|
|
111
|
+
- Support generate Qrcode as svg.
|
|
112
|
+
|
|
113
|
+
## [1.6.3] - 2019-09-16
|
|
114
|
+
|
|
115
|
+
### Update
|
|
116
|
+
|
|
117
|
+
- Perfect documentation.
|
|
118
|
+
- Add eslint check.
|
|
119
|
+
|
|
120
|
+
## [1.6.2] - 2019-05-21
|
|
121
|
+
|
|
122
|
+
### Remove:
|
|
123
|
+
|
|
124
|
+
- `backingStorePixelRatio` is deprecated. more infomation [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D).
|
|
125
|
+
|
|
126
|
+
## [1.6.0] - 2018-04-14
|
|
127
|
+
|
|
128
|
+
### Changed
|
|
129
|
+
|
|
130
|
+
- Use Vue render function, not use jsx.
|
|
131
|
+
|
|
132
|
+
### Bugfixs
|
|
133
|
+
|
|
134
|
+
- convert utf-16 to utf-8.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.7.
|
|
2
|
+
* qrcode.vue v3.7.1
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
@@ -1014,19 +1014,18 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
1014
1014
|
var h = (height || defaultSize) * scale;
|
|
1015
1015
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
1016
1016
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
1017
|
+
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
1017
1018
|
var excavation = null;
|
|
1018
1019
|
if (imageSettings.excavate) {
|
|
1019
1020
|
var floorX = Math.floor(x);
|
|
1020
1021
|
var floorY = Math.floor(y);
|
|
1021
1022
|
var ceilW = Math.ceil(w + x - floorX);
|
|
1022
1023
|
var ceilH = Math.ceil(h + y - floorY);
|
|
1023
|
-
|
|
1024
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
|
|
1024
|
+
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
1025
1025
|
}
|
|
1026
|
-
return { x: x, y: y, h: h, w: w, excavation: excavation };
|
|
1026
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1027
1027
|
}
|
|
1028
|
-
function excavateModules(modules, excavation) {
|
|
1029
|
-
var borderRadius = excavation.borderRadius;
|
|
1028
|
+
function excavateModules(modules, excavation, borderRadius) {
|
|
1030
1029
|
// If no border radius, use simple rectangular excavation
|
|
1031
1030
|
if (!borderRadius || borderRadius <= 0) {
|
|
1032
1031
|
return modules.map(function (row, y) {
|
|
@@ -1118,7 +1117,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1118
1117
|
setup: function (props) {
|
|
1119
1118
|
var numCells = vue.ref(0);
|
|
1120
1119
|
var fgPath = vue.ref('');
|
|
1121
|
-
var imageProps;
|
|
1120
|
+
var imageProps = vue.ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
|
|
1122
1121
|
var generate = function () {
|
|
1123
1122
|
var value = props.value, _level = props.level, _margin = props.margin;
|
|
1124
1123
|
var margin = _margin >>> 0;
|
|
@@ -1127,14 +1126,15 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1127
1126
|
numCells.value = cells.length + margin * 2;
|
|
1128
1127
|
if (props.imageSettings.src) {
|
|
1129
1128
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
1130
|
-
imageProps = {
|
|
1129
|
+
imageProps.value = {
|
|
1131
1130
|
x: imageSettings.x + margin,
|
|
1132
1131
|
y: imageSettings.y + margin,
|
|
1133
1132
|
width: imageSettings.w,
|
|
1134
1133
|
height: imageSettings.h,
|
|
1134
|
+
borderRadius: imageSettings.borderRadius,
|
|
1135
1135
|
};
|
|
1136
1136
|
if (imageSettings.excavation) {
|
|
1137
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1137
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1138
1138
|
}
|
|
1139
1139
|
}
|
|
1140
1140
|
// Drawing strategy: instead of a rect per module, we're going to create a
|
|
@@ -1145,6 +1145,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1145
1145
|
// For level 40, 31329 -> 2
|
|
1146
1146
|
fgPath.value = generatePath(cells, margin);
|
|
1147
1147
|
};
|
|
1148
|
+
var qrGradientId = 'qrcode.vue-gradient';
|
|
1148
1149
|
var renderGradient = function () {
|
|
1149
1150
|
if (!props.gradient)
|
|
1150
1151
|
return null;
|
|
@@ -1162,7 +1163,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1162
1163
|
fx: '50%',
|
|
1163
1164
|
fy: '50%',
|
|
1164
1165
|
};
|
|
1165
|
-
return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id:
|
|
1166
|
+
return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
|
|
1166
1167
|
vue.h('stop', {
|
|
1167
1168
|
offset: '0%',
|
|
1168
1169
|
style: { stopColor: props.gradientStartColor },
|
|
@@ -1173,18 +1174,19 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1173
1174
|
}),
|
|
1174
1175
|
]);
|
|
1175
1176
|
};
|
|
1177
|
+
var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
|
|
1176
1178
|
var renderClipPath = function () {
|
|
1177
|
-
var borderRadius =
|
|
1179
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1178
1180
|
if (!props.imageSettings.src)
|
|
1179
1181
|
return null;
|
|
1180
1182
|
if (borderRadius <= 0)
|
|
1181
1183
|
return null;
|
|
1182
|
-
return vue.h('clipPath', { id:
|
|
1184
|
+
return vue.h('clipPath', { id: qrLogoClipPathId }, [
|
|
1183
1185
|
vue.h('rect', {
|
|
1184
|
-
x: imageProps.x,
|
|
1185
|
-
y: imageProps.y,
|
|
1186
|
-
width: imageProps.width,
|
|
1187
|
-
height: imageProps.height,
|
|
1186
|
+
x: imageProps.value.x,
|
|
1187
|
+
y: imageProps.value.y,
|
|
1188
|
+
width: imageProps.value.width,
|
|
1189
|
+
height: imageProps.value.height,
|
|
1188
1190
|
rx: borderRadius,
|
|
1189
1191
|
ry: borderRadius,
|
|
1190
1192
|
}),
|
|
@@ -1206,10 +1208,10 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1206
1208
|
fill: props.background,
|
|
1207
1209
|
}),
|
|
1208
1210
|
vue.h('path', {
|
|
1209
|
-
fill: props.gradient ?
|
|
1211
|
+
fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
|
|
1210
1212
|
d: fgPath.value,
|
|
1211
1213
|
}),
|
|
1212
|
-
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (
|
|
1214
|
+
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1213
1215
|
]); };
|
|
1214
1216
|
},
|
|
1215
1217
|
});
|
|
@@ -1234,7 +1236,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1234
1236
|
var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
|
|
1235
1237
|
var numCells = cells.length + margin * 2;
|
|
1236
1238
|
var image = imageRef.value;
|
|
1237
|
-
var imageProps = { x: 0, y: 0, width: 0, height: 0 };
|
|
1239
|
+
var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1238
1240
|
var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1239
1241
|
if (showImage) {
|
|
1240
1242
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
@@ -1243,9 +1245,10 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1243
1245
|
y: imageSettings.y + margin,
|
|
1244
1246
|
width: imageSettings.w,
|
|
1245
1247
|
height: imageSettings.h,
|
|
1248
|
+
borderRadius: imageSettings.borderRadius,
|
|
1246
1249
|
};
|
|
1247
1250
|
if (imageSettings.excavation) {
|
|
1248
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1251
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1249
1252
|
}
|
|
1250
1253
|
}
|
|
1251
1254
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
@@ -1282,7 +1285,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1282
1285
|
});
|
|
1283
1286
|
}
|
|
1284
1287
|
if (showImage) {
|
|
1285
|
-
var borderRadius =
|
|
1288
|
+
var borderRadius = imageProps.borderRadius;
|
|
1286
1289
|
if (borderRadius > 0) {
|
|
1287
1290
|
ctx.save();
|
|
1288
1291
|
ctx.beginPath();
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.7.
|
|
2
|
+
* qrcode.vue v3.7.1
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
6
6
|
*/
|
|
7
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,o){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>o||o>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var a=[],s=0;this.size>s;s++)a.push(!1);for(s=0;this.size>s;s++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var u=this.addEccAndInterleave(n);if(this.drawCodewords(u),-1==o){var h=1e9;for(s=0;8>s;s++){this.applyMask(s),this.drawFormatBits(s);var d=this.getPenaltyScore();h>d&&(o=s,h=d),this.applyMask(s)}}i(o>=0&&7>=o),this.mask=o,this.applyMask(o),this.drawFormatBits(o),this.isFunction=[]}return t.encodeText=function(r,n){var i=e.QrSegment.makeSegments(r);return t.encodeSegments(i,n)},t.encodeBinary=function(r,n){var i=e.QrSegment.makeBytes(r);return t.encodeSegments([i],n)},t.encodeSegments=function(e,n,a,s,u,h){if(void 0===a&&(a=1),void 0===s&&(s=40),void 0===u&&(u=-1),void 0===h&&(h=!0),t.MIN_VERSION>a||a>s||s>t.MAX_VERSION||-1>u||u>7)throw new RangeError("Invalid value");var d,l;for(d=a;;d++){var f=8*t.getNumDataCodewords(d,n),c=o.getTotalBits(e,d);if(f>=c){l=c;break}if(d>=s)throw new RangeError("Data too long")}for(var g=0,v=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];v.length>g;g++){var p=v[g];h&&l<=8*t.getNumDataCodewords(d,p)&&(n=p)}for(var m=[],E=0,y=e;y.length>E;E++){var w=y[E];r(w.mode.modeBits,4,m),r(w.numChars,w.mode.numCharCountBits(d),m);for(var C=0,M=w.getData();M.length>C;C++){m.push(M[C])}}i(m.length==l);var R=8*t.getNumDataCodewords(d,n);i(R>=m.length),r(0,Math.min(4,R-m.length),m),r(0,(8-m.length%8)%8,m),i(m.length%8==0);for(var S=236;R>m.length;S^=253)r(S,8,m);for(var N=[];m.length>8*N.length;)N.push(0);return m.forEach(function(e,t){return N[t>>>3]|=e<<7-(7&t)}),new t(d,n,N,u)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,o=0;10>o;o++)r=r<<1^1335*(r>>>9);var a=21522^(t<<10|r);i(a>>>15==0);for(o=0;5>=o;o++)this.setFunctionModule(8,o,n(a,o));this.setFunctionModule(8,7,n(a,6)),this.setFunctionModule(8,8,n(a,7)),this.setFunctionModule(7,8,n(a,8));for(o=9;15>o;o++)this.setFunctionModule(14-o,8,n(a,o));for(o=0;8>o;o++)this.setFunctionModule(this.size-1-o,8,n(a,o));for(o=8;15>o;o++)this.setFunctionModule(8,this.size-15+o,n(a,o));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;i(r>>>18==0);for(t=0;18>t;t++){var o=n(r,t),a=this.size-11+t%3,s=Math.floor(t/3);this.setFunctionModule(a,s,o),this.setFunctionModule(s,a,o)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var i=Math.max(Math.abs(n),Math.abs(r)),o=e+n,a=t+r;o>=0&&this.size>o&&a>=0&&this.size>a&&this.setFunctionModule(o,a,2!=i&&4!=i)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var o=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],s=Math.floor(t.getNumRawDataModules(r)/8),u=o-s%o,h=Math.floor(s/o),d=[],l=t.reedSolomonComputeDivisor(a),f=0,c=0;o>f;f++){var g=e.slice(c,c+h-a+(u>f?0:1));c+=g.length;var v=t.reedSolomonComputeRemainder(g,l);u>f&&g.push(0),d.push(g.concat(v))}var p=[],m=function(e){d.forEach(function(t,r){e==h-a&&u>r||p.push(t[e])})};for(f=0;d[0].length>f;f++)m(f);return i(p.length==s),p},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,o=this.size-1;o>=1;o-=2){6==o&&(o=5);for(var a=0;this.size>a;a++)for(var s=0;2>s;s++){var u=o-s,h=!(o+1&2)?this.size-1-a:a;!this.isFunction[h][u]&&8*e.length>r&&(this.modules[h][u]=n(e[r>>>3],7-(7&r)),r++)}}i(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,o=0,a=[0,0,0,0,0,0,0],s=0;this.size>s;s++)this.modules[r][s]==n?5==++o?e+=t.PENALTY_N1:o>5&&e++:(this.finderPenaltyAddHistory(o,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][s],o=1);e+=this.finderPenaltyTerminateAndCount(n,o,a)*t.PENALTY_N3}for(s=0;this.size>s;s++){n=!1;var u=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][s]==n?5==++u?e+=t.PENALTY_N1:u>5&&e++:(this.finderPenaltyAddHistory(u,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][s],u=1);e+=this.finderPenaltyTerminateAndCount(n,u,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(s=0;this.size-1>s;s++){var h=this.modules[r][s];h==this.modules[r][s+1]&&h==this.modules[r+1][s]&&h==this.modules[r+1][s+1]&&(e+=t.PENALTY_N2)}for(var d=0,l=0,f=this.modules;f.length>l;l++){d=f[l].reduce(function(e,t){return e+(t?1:0)},d)}var c=this.size*this.size,g=Math.ceil(Math.abs(20*d-10*c)/c)-1;return i(g>=0&&9>=g),i((e+=g*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return i(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var i=1;for(n=0;e>n;n++){for(var o=0;r.length>o;o++)r[o]=t.reedSolomonMultiply(r[o],i),r.length>o+1&&(r[o]^=r[o+1]);i=t.reedSolomonMultiply(i,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),i=function(e){var i=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,i)})},o=0,a=e;a.length>o;o++){i(a[o])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return i(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];i(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function i(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var o=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],i=0,o=t;o.length>i;i++){r(o[i],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],i=0;t.length>i;){var o=Math.min(t.length-i,3);r(parseInt(t.substring(i,i+o),10),3*o+1,n),i+=o}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,i=[];for(n=0;t.length>=n+2;n+=2){var o=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(o+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,i)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,i),new e(e.Mode.ALPHANUMERIC,t.length,i)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,i=e;i.length>n;n++){var o=i[n],a=o.mode.numCharCountBits(t);if(o.numChars>=1<<a)return 1/0;r+=4+a+o.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=o}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var i=r,o={L:i.QrCode.Ecc.LOW,M:i.QrCode.Ecc.MEDIUM,Q:i.QrCode.Ecc.QUARTILE,H:i.QrCode.Ecc.HIGH},a=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in o}function u(e,t){void 0===t&&(t=0);var r="";return e.forEach(function(e,n){var i=null;e.forEach(function(o,a){if(!o&&null!==i)return r+="M".concat(i+t," ").concat(n+t,"h").concat(a-i,"v1H").concat(i+t,"z"),void(i=null);if(a!==e.length-1)o&&null===i&&(i=a);else{if(!o)return;r+=null===i?"M".concat(a+t,",").concat(n+t," h1v1H").concat(a+t,"z"):"M".concat(i+t,",").concat(n+t," h").concat(a+1-i,"v1H").concat(i+t,"z")}})}),r}function h(e,t,r,n){var i=n.width,o=n.height,a=n.x,s=n.y,u=e.length+2*r,h=Math.floor(.1*t),d=u/t,l=(i||h)*d,f=(o||h)*d,c=null==a?e.length/2-l/2:a*d,g=null==s?e.length/2-f/2:s*d,v=null;if(n.excavate){var p=Math.floor(c),m=Math.floor(g);v={x:p,y:m,w:Math.ceil(l+c-p),h:Math.ceil(f+g-m),borderRadius:(n.borderRadius||0)*d}}return{x:c,y:g,h:f,w:l,excavation:v}}function d(e,t){var r=t.borderRadius;return e.map(r&&r>0?function(e,n){return e.map(function(e,i){return e?!(a=n+.5,u=t.y,h=t.w,d=t.h,l=r,!((s=t.x)>(o=i+.5)||o>s+h||u>a||a>u+d||!(0>=l||o>s+l&&s+h-l>o||a>u+l&&u+d-l>a)&&(s+l>o&&u+l>a?l*l<(f=o-(s+l))*f+(c=a-(u+l))*c:o>s+h-l&&u+l>a?l*l<(f=o-(s+h-l))*f+(c=a-(u+l))*c:s+l>o&&a>u+d-l?l*l<(f=o-(s+l))*f+(c=a-(u+d-l))*c:o>s+h-l&&a>u+d-l&&l*l<(f=o-(s+h-l))*f+(c=a-(u+d-l))*c)))&&e:e;var o,a,s,u,h,d,l,f,c})}:function(e,r){return t.y>r||r>=t.y+t.h?e:e.map(function(e,r){return(t.x>r||r>=t.x+t.w)&&e})})}var l={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"}},f=n(n({},l),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:l,setup:function(e){var r,a=t.ref(0),l=t.ref(""),f=function(){var t=e.value,n=e.level,f=e.margin>>>0,c=s(n)?n:"L",g=i.QrCode.encodeText(t,o[c]).getModules();if(a.value=g.length+2*f,e.imageSettings.src){var v=h(g,e.size,f,e.imageSettings);r={x:v.x+f,y:v.y+f,width:v.w,height:v.h},v.excavation&&(g=d(g,v.excavation))}l.value=u(g,f)};return f(),t.watch(e,f,{deep:!0}),function(){return t.h("svg",{width:e.size,height:e.size,"shape-rendering":"crispEdges",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(a.value," ").concat(a.value)},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:"qr-gradient"},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null,(i=e.imageSettings.borderRadius||0,e.imageSettings.src&&i>0?t.h("clipPath",{id:"qr-logo-clip"},[t.h("rect",{x:r.x,y:r.y,width:r.width,height:r.height,rx:i,ry:i})]):null)]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#qr-gradient)":e.foreground,d:l.value}),e.imageSettings.src&&t.h("image",n(n({href:e.imageSettings.src},r),e.imageSettings.borderRadius?{"clip-path":"url(#qr-logo-clip)"}:{}))]);var i}}}),g=t.defineComponent({name:"QRCodeCanvas",props:l,setup:function(e,r){var l=t.ref(null),f=t.ref(null),c=function(){var t=e.value,r=e.level,n=e.size,c=e.background,g=e.foreground,v=e.gradient,p=e.gradientType,m=e.gradientStartColor,E=e.gradientEndColor,y=e.margin>>>0,w=s(r)?r:"L",C=l.value;if(C){var M=C.getContext("2d");if(M){var R=i.QrCode.encodeText(t,o[w]).getModules(),S=R.length+2*y,N=f.value,A={x:0,y:0,width:0,height:0},P=e.imageSettings.src&&null!=N&&0!==N.naturalWidth&&0!==N.naturalHeight;if(P){var I=h(R,e.size,y,e.imageSettings);A={x:I.x+y,y:I.y+y,width:I.w,height:I.h},I.excavation&&(R=d(R,I.excavation))}var _="undefined"!=typeof window&&window.devicePixelRatio||1,x=n/S*_;if(C.height=C.width=n*_,M.scale(x,x),M.fillStyle=c,M.fillRect(0,0,S,S),v){var b=void 0;(b="linear"===p?M.createLinearGradient(0,0,S,S):M.createRadialGradient(S/2,S/2,0,S/2,S/2,S/2)).addColorStop(0,m),b.addColorStop(1,E),M.fillStyle=b}else M.fillStyle=g;if(a?M.fill(new Path2D(u(R,y))):R.forEach(function(e,t){e.forEach(function(e,r){e&&M.fillRect(r+y,t+y,1,1)})}),P){var z=e.imageSettings.borderRadius||0;z>0?(M.save(),M.beginPath(),M.roundRect?M.roundRect(A.x,A.y,A.width,A.height,z):M.rect(A.x,A.y,A.width,A.height),M.clip(),M.drawImage(N,A.x,A.y,A.width,A.height),M.restore()):M.drawImage(N,A.x,A.y,A.width,A.height)}}}};t.onMounted(c),t.watch(e,c,{deep:!0});var g=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:l,style:n(n({},g),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:f,src:e.imageSettings.src,style:{display:"none"},onLoad:c})])}}}),v=t.defineComponent({name:"Qrcode",render:function(){var e=this.$props;return t.h("svg"===e.renderAs?c:g,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor})},props:f});e.QrcodeCanvas=g,e.QrcodeSvg=c,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})});
|
|
7
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).QrcodeVue={},e.Vue)}(this,function(e,t){"use strict";var r,n=function(){return n=Object.assign||function(e){for(var t,r=1,n=arguments.length;n>r;r++)for(var i in t=arguments[r])Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i]);return e},n.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError,function(e){var t=function(){function t(e,r,n,o){if(this.version=e,this.errorCorrectionLevel=r,this.modules=[],this.isFunction=[],t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version value out of range");if(-1>o||o>7)throw new RangeError("Mask value out of range");this.size=4*e+17;for(var a=[],s=0;this.size>s;s++)a.push(!1);for(s=0;this.size>s;s++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var u=this.addEccAndInterleave(n);if(this.drawCodewords(u),-1==o){var h=1e9;for(s=0;8>s;s++){this.applyMask(s),this.drawFormatBits(s);var d=this.getPenaltyScore();h>d&&(o=s,h=d),this.applyMask(s)}}i(o>=0&&7>=o),this.mask=o,this.applyMask(o),this.drawFormatBits(o),this.isFunction=[]}return t.encodeText=function(r,n){var i=e.QrSegment.makeSegments(r);return t.encodeSegments(i,n)},t.encodeBinary=function(r,n){var i=e.QrSegment.makeBytes(r);return t.encodeSegments([i],n)},t.encodeSegments=function(e,n,a,s,u,h){if(void 0===a&&(a=1),void 0===s&&(s=40),void 0===u&&(u=-1),void 0===h&&(h=!0),t.MIN_VERSION>a||a>s||s>t.MAX_VERSION||-1>u||u>7)throw new RangeError("Invalid value");var d,l;for(d=a;;d++){var f=8*t.getNumDataCodewords(d,n),c=o.getTotalBits(e,d);if(f>=c){l=c;break}if(d>=s)throw new RangeError("Data too long")}for(var g=0,v=[t.Ecc.MEDIUM,t.Ecc.QUARTILE,t.Ecc.HIGH];v.length>g;g++){var p=v[g];h&&l<=8*t.getNumDataCodewords(d,p)&&(n=p)}for(var m=[],E=0,y=e;y.length>E;E++){var w=y[E];r(w.mode.modeBits,4,m),r(w.numChars,w.mode.numCharCountBits(d),m);for(var C=0,M=w.getData();M.length>C;C++){m.push(M[C])}}i(m.length==l);var R=8*t.getNumDataCodewords(d,n);i(R>=m.length),r(0,Math.min(4,R-m.length),m),r(0,(8-m.length%8)%8,m),i(m.length%8==0);for(var S=236;R>m.length;S^=253)r(S,8,m);for(var N=[];m.length>8*N.length;)N.push(0);return m.forEach(function(e,t){return N[t>>>3]|=e<<7-(7&t)}),new t(d,n,N,u)},t.prototype.getModule=function(e,t){return e>=0&&this.size>e&&t>=0&&this.size>t&&this.modules[t][e]},t.prototype.getModules=function(){return this.modules},t.prototype.drawFunctionPatterns=function(){for(var e=0;this.size>e;e++)this.setFunctionModule(6,e,e%2==0),this.setFunctionModule(e,6,e%2==0);this.drawFinderPattern(3,3),this.drawFinderPattern(this.size-4,3),this.drawFinderPattern(3,this.size-4);var t=this.getAlignmentPatternPositions(),r=t.length;for(e=0;r>e;e++)for(var n=0;r>n;n++)0==e&&0==n||0==e&&n==r-1||e==r-1&&0==n||this.drawAlignmentPattern(t[e],t[n]);this.drawFormatBits(0),this.drawVersion()},t.prototype.drawFormatBits=function(e){for(var t=this.errorCorrectionLevel.formatBits<<3|e,r=t,o=0;10>o;o++)r=r<<1^1335*(r>>>9);var a=21522^(t<<10|r);i(a>>>15==0);for(o=0;5>=o;o++)this.setFunctionModule(8,o,n(a,o));this.setFunctionModule(8,7,n(a,6)),this.setFunctionModule(8,8,n(a,7)),this.setFunctionModule(7,8,n(a,8));for(o=9;15>o;o++)this.setFunctionModule(14-o,8,n(a,o));for(o=0;8>o;o++)this.setFunctionModule(this.size-1-o,8,n(a,o));for(o=8;15>o;o++)this.setFunctionModule(8,this.size-15+o,n(a,o));this.setFunctionModule(8,this.size-8,!0)},t.prototype.drawVersion=function(){if(this.version>=7){for(var e=this.version,t=0;12>t;t++)e=e<<1^7973*(e>>>11);var r=this.version<<12|e;i(r>>>18==0);for(t=0;18>t;t++){var o=n(r,t),a=this.size-11+t%3,s=Math.floor(t/3);this.setFunctionModule(a,s,o),this.setFunctionModule(s,a,o)}}},t.prototype.drawFinderPattern=function(e,t){for(var r=-4;4>=r;r++)for(var n=-4;4>=n;n++){var i=Math.max(Math.abs(n),Math.abs(r)),o=e+n,a=t+r;o>=0&&this.size>o&&a>=0&&this.size>a&&this.setFunctionModule(o,a,2!=i&&4!=i)}},t.prototype.drawAlignmentPattern=function(e,t){for(var r=-2;2>=r;r++)for(var n=-2;2>=n;n++)this.setFunctionModule(e+n,t+r,1!=Math.max(Math.abs(n),Math.abs(r)))},t.prototype.setFunctionModule=function(e,t,r){this.modules[t][e]=r,this.isFunction[t][e]=!0},t.prototype.addEccAndInterleave=function(e){var r=this.version,n=this.errorCorrectionLevel;if(e.length!=t.getNumDataCodewords(r,n))throw new RangeError("Invalid argument");for(var o=t.NUM_ERROR_CORRECTION_BLOCKS[n.ordinal][r],a=t.ECC_CODEWORDS_PER_BLOCK[n.ordinal][r],s=Math.floor(t.getNumRawDataModules(r)/8),u=o-s%o,h=Math.floor(s/o),d=[],l=t.reedSolomonComputeDivisor(a),f=0,c=0;o>f;f++){var g=e.slice(c,c+h-a+(u>f?0:1));c+=g.length;var v=t.reedSolomonComputeRemainder(g,l);u>f&&g.push(0),d.push(g.concat(v))}var p=[],m=function(e){d.forEach(function(t,r){e==h-a&&u>r||p.push(t[e])})};for(f=0;d[0].length>f;f++)m(f);return i(p.length==s),p},t.prototype.drawCodewords=function(e){if(e.length!=Math.floor(t.getNumRawDataModules(this.version)/8))throw new RangeError("Invalid argument");for(var r=0,o=this.size-1;o>=1;o-=2){6==o&&(o=5);for(var a=0;this.size>a;a++)for(var s=0;2>s;s++){var u=o-s,h=!(o+1&2)?this.size-1-a:a;!this.isFunction[h][u]&&8*e.length>r&&(this.modules[h][u]=n(e[r>>>3],7-(7&r)),r++)}}i(r==8*e.length)},t.prototype.applyMask=function(e){if(0>e||e>7)throw new RangeError("Mask value out of range");for(var t=0;this.size>t;t++)for(var r=0;this.size>r;r++){var n=void 0;switch(e){case 0:n=(r+t)%2==0;break;case 1:n=t%2==0;break;case 2:n=r%3==0;break;case 3:n=(r+t)%3==0;break;case 4:n=(Math.floor(r/3)+Math.floor(t/2))%2==0;break;case 5:n=r*t%2+r*t%3==0;break;case 6:n=(r*t%2+r*t%3)%2==0;break;case 7:n=((r+t)%2+r*t%3)%2==0;break;default:throw Error("Unreachable")}!this.isFunction[t][r]&&n&&(this.modules[t][r]=!this.modules[t][r])}},t.prototype.getPenaltyScore=function(){for(var e=0,r=0;this.size>r;r++){for(var n=!1,o=0,a=[0,0,0,0,0,0,0],s=0;this.size>s;s++)this.modules[r][s]==n?5==++o?e+=t.PENALTY_N1:o>5&&e++:(this.finderPenaltyAddHistory(o,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][s],o=1);e+=this.finderPenaltyTerminateAndCount(n,o,a)*t.PENALTY_N3}for(s=0;this.size>s;s++){n=!1;var u=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][s]==n?5==++u?e+=t.PENALTY_N1:u>5&&e++:(this.finderPenaltyAddHistory(u,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][s],u=1);e+=this.finderPenaltyTerminateAndCount(n,u,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(s=0;this.size-1>s;s++){var h=this.modules[r][s];h==this.modules[r][s+1]&&h==this.modules[r+1][s]&&h==this.modules[r+1][s+1]&&(e+=t.PENALTY_N2)}for(var d=0,l=0,f=this.modules;f.length>l;l++){d=f[l].reduce(function(e,t){return e+(t?1:0)},d)}var c=this.size*this.size,g=Math.ceil(Math.abs(20*d-10*c)/c)-1;return i(g>=0&&9>=g),i((e+=g*t.PENALTY_N4)>=0&&2568888>=e),e},t.prototype.getAlignmentPatternPositions=function(){if(1==this.version)return[];for(var e=Math.floor(this.version/7)+2,t=2*Math.floor((8*this.version+3*e+5)/(4*e-4)),r=[6],n=this.size-7;e>r.length;n-=t)r.splice(1,0,n);return r},t.getNumRawDataModules=function(e){if(t.MIN_VERSION>e||e>t.MAX_VERSION)throw new RangeError("Version number out of range");var r=(16*e+128)*e+64;if(e>=2){var n=Math.floor(e/7)+2;r-=(25*n-10)*n-55,7>e||(r-=36)}return i(r>=208&&29648>=r),r},t.getNumDataCodewords=function(e,r){return Math.floor(t.getNumRawDataModules(e)/8)-t.ECC_CODEWORDS_PER_BLOCK[r.ordinal][e]*t.NUM_ERROR_CORRECTION_BLOCKS[r.ordinal][e]},t.reedSolomonComputeDivisor=function(e){if(1>e||e>255)throw new RangeError("Degree out of range");for(var r=[],n=0;e-1>n;n++)r.push(0);r.push(1);var i=1;for(n=0;e>n;n++){for(var o=0;r.length>o;o++)r[o]=t.reedSolomonMultiply(r[o],i),r.length>o+1&&(r[o]^=r[o+1]);i=t.reedSolomonMultiply(i,2)}return r},t.reedSolomonComputeRemainder=function(e,r){for(var n=r.map(function(e){return 0}),i=function(e){var i=e^n.shift();n.push(0),r.forEach(function(e,r){return n[r]^=t.reedSolomonMultiply(e,i)})},o=0,a=e;a.length>o;o++){i(a[o])}return n},t.reedSolomonMultiply=function(e,t){if(e>>>8!=0||t>>>8!=0)throw new RangeError("Byte out of range");for(var r=0,n=7;n>=0;n--)r=r<<1^285*(r>>>7),r^=(t>>>n&1)*e;return i(r>>>8==0),r},t.prototype.finderPenaltyCountPatterns=function(e){var t=e[1];i(3*this.size>=t);var r=t>0&&e[2]==t&&e[3]==3*t&&e[4]==t&&e[5]==t;return(!r||4*t>e[0]||t>e[6]?0:1)+(!r||4*t>e[6]||t>e[0]?0:1)},t.prototype.finderPenaltyTerminateAndCount=function(e,t,r){return e&&(this.finderPenaltyAddHistory(t,r),t=0),this.finderPenaltyAddHistory(t+=this.size,r),this.finderPenaltyCountPatterns(r)},t.prototype.finderPenaltyAddHistory=function(e,t){0==t[0]&&(e+=this.size),t.pop(),t.unshift(e)},t.MIN_VERSION=1,t.MAX_VERSION=40,t.PENALTY_N1=3,t.PENALTY_N2=3,t.PENALTY_N3=40,t.PENALTY_N4=10,t.ECC_CODEWORDS_PER_BLOCK=[[-1,7,10,15,20,26,18,20,24,30,18,20,24,26,30,22,24,28,30,28,28,28,28,30,30,26,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,10,16,26,18,24,16,18,22,22,26,30,22,22,24,24,28,28,26,26,26,26,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28],[-1,13,22,18,26,18,24,18,22,20,24,28,26,24,20,30,24,28,28,26,30,28,30,30,30,30,28,30,30,30,30,30,30,30,30,30,30,30,30,30,30],[-1,17,28,22,16,22,28,26,26,24,28,24,28,22,24,24,30,28,28,26,28,30,24,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]],t.NUM_ERROR_CORRECTION_BLOCKS=[[-1,1,1,1,1,1,2,2,2,2,4,4,4,4,4,6,6,6,6,7,8,8,9,9,10,12,12,12,13,14,15,16,17,18,19,19,20,21,22,24,25],[-1,1,1,1,2,2,4,4,4,5,5,5,8,9,9,10,10,11,13,14,16,17,17,18,20,21,23,25,26,28,29,31,33,35,37,38,40,43,45,47,49],[-1,1,1,2,2,4,4,6,6,8,8,8,10,12,16,12,17,16,18,21,20,23,23,25,27,29,34,34,35,38,40,43,45,48,51,53,56,59,62,65,68],[-1,1,1,2,4,4,4,5,6,8,8,11,11,16,16,18,16,19,21,25,25,25,34,30,32,35,37,40,42,45,48,51,54,57,60,63,66,70,74,77,81]],t}();function r(e,t,r){if(0>t||t>31||e>>>t!=0)throw new RangeError("Value out of range");for(var n=t-1;n>=0;n--)r.push(e>>>n&1)}function n(e,t){return!!(e>>>t&1)}function i(e){if(!e)throw Error("Assertion error")}e.QrCode=t;var o=function(){function e(e,t,r){if(this.mode=e,this.numChars=t,this.bitData=r,0>t)throw new RangeError("Invalid argument");this.bitData=r.slice()}return e.makeBytes=function(t){for(var n=[],i=0,o=t;o.length>i;i++){r(o[i],8,n)}return new e(e.Mode.BYTE,t.length,n)},e.makeNumeric=function(t){if(!e.isNumeric(t))throw new RangeError("String contains non-numeric characters");for(var n=[],i=0;t.length>i;){var o=Math.min(t.length-i,3);r(parseInt(t.substring(i,i+o),10),3*o+1,n),i+=o}return new e(e.Mode.NUMERIC,t.length,n)},e.makeAlphanumeric=function(t){if(!e.isAlphanumeric(t))throw new RangeError("String contains unencodable characters in alphanumeric mode");var n,i=[];for(n=0;t.length>=n+2;n+=2){var o=45*e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n));r(o+=e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n+1)),11,i)}return t.length>n&&r(e.ALPHANUMERIC_CHARSET.indexOf(t.charAt(n)),6,i),new e(e.Mode.ALPHANUMERIC,t.length,i)},e.makeSegments=function(t){return""==t?[]:e.isNumeric(t)?[e.makeNumeric(t)]:e.isAlphanumeric(t)?[e.makeAlphanumeric(t)]:[e.makeBytes(e.toUtf8ByteArray(t))]},e.makeEci=function(t){var n=[];if(0>t)throw new RangeError("ECI assignment value out of range");if(128>t)r(t,8,n);else if(16384>t)r(2,2,n),r(t,14,n);else{if(t>=1e6)throw new RangeError("ECI assignment value out of range");r(6,3,n),r(t,21,n)}return new e(e.Mode.ECI,0,n)},e.isNumeric=function(t){return e.NUMERIC_REGEX.test(t)},e.isAlphanumeric=function(t){return e.ALPHANUMERIC_REGEX.test(t)},e.prototype.getData=function(){return this.bitData.slice()},e.getTotalBits=function(e,t){for(var r=0,n=0,i=e;i.length>n;n++){var o=i[n],a=o.mode.numCharCountBits(t);if(o.numChars>=1<<a)return 1/0;r+=4+a+o.bitData.length}return r},e.toUtf8ByteArray=function(e){e=encodeURI(e);for(var t=[],r=0;e.length>r;r++)"%"!=e.charAt(r)?t.push(e.charCodeAt(r)):(t.push(parseInt(e.substring(r+1,r+3),16)),r+=2);return t},e.NUMERIC_REGEX=/^[0-9]*$/,e.ALPHANUMERIC_REGEX=/^[A-Z0-9 $%*+.\/:-]*$/,e.ALPHANUMERIC_CHARSET="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ $%*+-./:",e}();e.QrSegment=o}(r||(r={})),function(e){var t,r;t=e.QrCode||(e.QrCode={}),r=function(){function e(e,t){this.ordinal=e,this.formatBits=t}return e.LOW=new e(0,1),e.MEDIUM=new e(1,0),e.QUARTILE=new e(2,3),e.HIGH=new e(3,2),e}(),t.Ecc=r}(r||(r={})),function(e){var t,r;t=e.QrSegment||(e.QrSegment={}),r=function(){function e(e,t){this.modeBits=e,this.numBitsCharCount=t}return e.prototype.numCharCountBits=function(e){return this.numBitsCharCount[Math.floor((e+7)/17)]},e.NUMERIC=new e(1,[10,12,14]),e.ALPHANUMERIC=new e(2,[9,11,13]),e.BYTE=new e(4,[8,16,16]),e.KANJI=new e(8,[8,10,12]),e.ECI=new e(7,[0,0,0]),e}(),t.Mode=r}(r||(r={}));var i=r,o={L:i.QrCode.Ecc.LOW,M:i.QrCode.Ecc.MEDIUM,Q:i.QrCode.Ecc.QUARTILE,H:i.QrCode.Ecc.HIGH},a=function(){try{(new Path2D).addPath(new Path2D)}catch(e){return!1}return!0}();function s(e){return e in o}function u(e,t){void 0===t&&(t=0);var r="";return e.forEach(function(e,n){var i=null;e.forEach(function(o,a){if(!o&&null!==i)return r+="M".concat(i+t," ").concat(n+t,"h").concat(a-i,"v1H").concat(i+t,"z"),void(i=null);if(a!==e.length-1)o&&null===i&&(i=a);else{if(!o)return;r+=null===i?"M".concat(a+t,",").concat(n+t," h1v1H").concat(a+t,"z"):"M".concat(i+t,",").concat(n+t," h").concat(a+1-i,"v1H").concat(i+t,"z")}})}),r}function h(e,t,r,n){var i=n.width,o=n.height,a=n.x,s=n.y,u=e.length+2*r,h=Math.floor(.1*t),d=u/t,l=(i||h)*d,f=(o||h)*d,c=null==a?e.length/2-l/2:a*d,g=null==s?e.length/2-f/2:s*d,v=(n.borderRadius||0)*d,p=null;if(n.excavate){var m=Math.floor(c),E=Math.floor(g);p={x:m,y:E,w:Math.ceil(l+c-m),h:Math.ceil(f+g-E)}}return{x:c,y:g,h:f,w:l,borderRadius:v,excavation:p}}function d(e,t,r){return e.map(r&&r>0?function(e,n){return e.map(function(e,i){return e?!(a=n+.5,u=t.y,h=t.w,d=t.h,l=r,!((s=t.x)>(o=i+.5)||o>s+h||u>a||a>u+d||!(0>=l||o>s+l&&s+h-l>o||a>u+l&&u+d-l>a)&&(s+l>o&&u+l>a?l*l<(f=o-(s+l))*f+(c=a-(u+l))*c:o>s+h-l&&u+l>a?l*l<(f=o-(s+h-l))*f+(c=a-(u+l))*c:s+l>o&&a>u+d-l?l*l<(f=o-(s+l))*f+(c=a-(u+d-l))*c:o>s+h-l&&a>u+d-l&&l*l<(f=o-(s+h-l))*f+(c=a-(u+d-l))*c)))&&e:e;var o,a,s,u,h,d,l,f,c})}:function(e,r){return t.y>r||r>=t.y+t.h?e:e.map(function(e,r){return(t.x>r||r>=t.x+t.w)&&e})})}var l={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return s(e)}},background:{type:String,default:"#fff"},foreground:{type:String,default:"#000"},margin:{type:Number,required:!1,default:0},imageSettings:{type:Object,required:!1,default:function(){return{}}},gradient:{type:Boolean,required:!1,default:!1},gradientType:{type:String,required:!1,default:"linear",validator:function(e){return["linear","radial"].indexOf(e)>-1}},gradientStartColor:{type:String,required:!1,default:"#000"},gradientEndColor:{type:String,required:!1,default:"#fff"}},f=n(n({},l),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:l,setup:function(e){var r=t.ref(0),a=t.ref(""),l=t.ref({x:0,y:0,width:0,height:0,borderRadius:0}),f=function(){var t=e.value,n=e.level,f=e.margin>>>0,c=s(n)?n:"L",g=i.QrCode.encodeText(t,o[c]).getModules();if(r.value=g.length+2*f,e.imageSettings.src){var v=h(g,e.size,f,e.imageSettings);l.value={x:v.x+f,y:v.y+f,width:v.w,height:v.h,borderRadius:v.borderRadius},v.excavation&&(g=d(g,v.excavation,v.borderRadius))}a.value=u(g,f)},c="qrcode.vue-gradient",g="qrcode.vue-logo-clip-path";return f(),t.watch(e,f,{deep:!0}),function(){return t.h("svg",{width:e.size,height:e.size,"shape-rendering":"crispEdges",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 ".concat(r.value," ").concat(r.value)},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:c},"linear"===e.gradientType?{x1:"0%",y1:"0%",x2:"100%",y2:"100%"}:{cx:"50%",cy:"50%",r:"50%",fx:"50%",fy:"50%"}),[t.h("stop",{offset:"0%",style:{stopColor:e.gradientStartColor}}),t.h("stop",{offset:"100%",style:{stopColor:e.gradientEndColor}})]):null,(i=l.value.borderRadius,e.imageSettings.src&&i>0?t.h("clipPath",{id:g},[t.h("rect",{x:l.value.x,y:l.value.y,width:l.value.width,height:l.value.height,rx:i,ry:i})]):null)]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(c,")"):e.foreground,d:a.value}),e.imageSettings.src&&t.h("image",n(n({href:e.imageSettings.src},l.value),l.value.borderRadius>0?{"clip-path":"url(#".concat(g,")")}:{}))]);var i}}}),g=t.defineComponent({name:"QRCodeCanvas",props:l,setup:function(e,r){var l=t.ref(null),f=t.ref(null),c=function(){var t=e.value,r=e.level,n=e.size,c=e.background,g=e.foreground,v=e.gradient,p=e.gradientType,m=e.gradientStartColor,E=e.gradientEndColor,y=e.margin>>>0,w=s(r)?r:"L",C=l.value;if(C){var M=C.getContext("2d");if(M){var R=i.QrCode.encodeText(t,o[w]).getModules(),S=R.length+2*y,N=f.value,A={x:0,y:0,width:0,height:0,borderRadius:0},P=e.imageSettings.src&&null!=N&&0!==N.naturalWidth&&0!==N.naturalHeight;if(P){var I=h(R,e.size,y,e.imageSettings);A={x:I.x+y,y:I.y+y,width:I.w,height:I.h,borderRadius:I.borderRadius},I.excavation&&(R=d(R,I.excavation,I.borderRadius))}var b="undefined"!=typeof window&&window.devicePixelRatio||1,x=n/S*b;if(C.height=C.width=n*b,M.scale(x,x),M.fillStyle=c,M.fillRect(0,0,S,S),v){var _=void 0;(_="linear"===p?M.createLinearGradient(0,0,S,S):M.createRadialGradient(S/2,S/2,0,S/2,S/2,S/2)).addColorStop(0,m),_.addColorStop(1,E),M.fillStyle=_}else M.fillStyle=g;if(a?M.fill(new Path2D(u(R,y))):R.forEach(function(e,t){e.forEach(function(e,r){e&&M.fillRect(r+y,t+y,1,1)})}),P){var z=A.borderRadius;z>0?(M.save(),M.beginPath(),M.roundRect?M.roundRect(A.x,A.y,A.width,A.height,z):M.rect(A.x,A.y,A.width,A.height),M.clip(),M.drawImage(N,A.x,A.y,A.width,A.height),M.restore()):M.drawImage(N,A.x,A.y,A.width,A.height)}}}};t.onMounted(c),t.watch(e,c,{deep:!0});var g=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:l,style:n(n({},g),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:f,src:e.imageSettings.src,style:{display:"none"},onLoad:c})])}}}),v=t.defineComponent({name:"Qrcode",render:function(){var e=this.$props;return t.h("svg"===e.renderAs?c:g,{value:e.value,size:e.size,margin:e.margin,level:e.level,background:e.background,foreground:e.foreground,imageSettings:e.imageSettings,gradient:e.gradient,gradientType:e.gradientType,gradientStartColor:e.gradientStartColor,gradientEndColor:e.gradientEndColor})},props:f});e.QrcodeCanvas=g,e.QrcodeSvg=c,e.default=v,Object.defineProperty(e,"__esModule",{value:!0})});
|
package/dist/qrcode.vue.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.7.
|
|
2
|
+
* qrcode.vue v3.7.1
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
@@ -1014,19 +1014,18 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
1014
1014
|
var h = (height || defaultSize) * scale;
|
|
1015
1015
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
1016
1016
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
1017
|
+
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
1017
1018
|
var excavation = null;
|
|
1018
1019
|
if (imageSettings.excavate) {
|
|
1019
1020
|
var floorX = Math.floor(x);
|
|
1020
1021
|
var floorY = Math.floor(y);
|
|
1021
1022
|
var ceilW = Math.ceil(w + x - floorX);
|
|
1022
1023
|
var ceilH = Math.ceil(h + y - floorY);
|
|
1023
|
-
|
|
1024
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
|
|
1024
|
+
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
1025
1025
|
}
|
|
1026
|
-
return { x: x, y: y, h: h, w: w, excavation: excavation };
|
|
1026
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1027
1027
|
}
|
|
1028
|
-
function excavateModules(modules, excavation) {
|
|
1029
|
-
var borderRadius = excavation.borderRadius;
|
|
1028
|
+
function excavateModules(modules, excavation, borderRadius) {
|
|
1030
1029
|
// If no border radius, use simple rectangular excavation
|
|
1031
1030
|
if (!borderRadius || borderRadius <= 0) {
|
|
1032
1031
|
return modules.map(function (row, y) {
|
|
@@ -1118,7 +1117,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1118
1117
|
setup: function (props) {
|
|
1119
1118
|
var numCells = vue.ref(0);
|
|
1120
1119
|
var fgPath = vue.ref('');
|
|
1121
|
-
var imageProps;
|
|
1120
|
+
var imageProps = vue.ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
|
|
1122
1121
|
var generate = function () {
|
|
1123
1122
|
var value = props.value, _level = props.level, _margin = props.margin;
|
|
1124
1123
|
var margin = _margin >>> 0;
|
|
@@ -1127,14 +1126,15 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1127
1126
|
numCells.value = cells.length + margin * 2;
|
|
1128
1127
|
if (props.imageSettings.src) {
|
|
1129
1128
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
1130
|
-
imageProps = {
|
|
1129
|
+
imageProps.value = {
|
|
1131
1130
|
x: imageSettings.x + margin,
|
|
1132
1131
|
y: imageSettings.y + margin,
|
|
1133
1132
|
width: imageSettings.w,
|
|
1134
1133
|
height: imageSettings.h,
|
|
1134
|
+
borderRadius: imageSettings.borderRadius,
|
|
1135
1135
|
};
|
|
1136
1136
|
if (imageSettings.excavation) {
|
|
1137
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1137
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1138
1138
|
}
|
|
1139
1139
|
}
|
|
1140
1140
|
// Drawing strategy: instead of a rect per module, we're going to create a
|
|
@@ -1145,6 +1145,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1145
1145
|
// For level 40, 31329 -> 2
|
|
1146
1146
|
fgPath.value = generatePath(cells, margin);
|
|
1147
1147
|
};
|
|
1148
|
+
var qrGradientId = 'qrcode.vue-gradient';
|
|
1148
1149
|
var renderGradient = function () {
|
|
1149
1150
|
if (!props.gradient)
|
|
1150
1151
|
return null;
|
|
@@ -1162,7 +1163,7 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1162
1163
|
fx: '50%',
|
|
1163
1164
|
fy: '50%',
|
|
1164
1165
|
};
|
|
1165
|
-
return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id:
|
|
1166
|
+
return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
|
|
1166
1167
|
vue.h('stop', {
|
|
1167
1168
|
offset: '0%',
|
|
1168
1169
|
style: { stopColor: props.gradientStartColor },
|
|
@@ -1173,18 +1174,19 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1173
1174
|
}),
|
|
1174
1175
|
]);
|
|
1175
1176
|
};
|
|
1177
|
+
var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
|
|
1176
1178
|
var renderClipPath = function () {
|
|
1177
|
-
var borderRadius =
|
|
1179
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1178
1180
|
if (!props.imageSettings.src)
|
|
1179
1181
|
return null;
|
|
1180
1182
|
if (borderRadius <= 0)
|
|
1181
1183
|
return null;
|
|
1182
|
-
return vue.h('clipPath', { id:
|
|
1184
|
+
return vue.h('clipPath', { id: qrLogoClipPathId }, [
|
|
1183
1185
|
vue.h('rect', {
|
|
1184
|
-
x: imageProps.x,
|
|
1185
|
-
y: imageProps.y,
|
|
1186
|
-
width: imageProps.width,
|
|
1187
|
-
height: imageProps.height,
|
|
1186
|
+
x: imageProps.value.x,
|
|
1187
|
+
y: imageProps.value.y,
|
|
1188
|
+
width: imageProps.value.width,
|
|
1189
|
+
height: imageProps.value.height,
|
|
1188
1190
|
rx: borderRadius,
|
|
1189
1191
|
ry: borderRadius,
|
|
1190
1192
|
}),
|
|
@@ -1206,10 +1208,10 @@ var QrcodeSvg = vue.defineComponent({
|
|
|
1206
1208
|
fill: props.background,
|
|
1207
1209
|
}),
|
|
1208
1210
|
vue.h('path', {
|
|
1209
|
-
fill: props.gradient ?
|
|
1211
|
+
fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
|
|
1210
1212
|
d: fgPath.value,
|
|
1211
1213
|
}),
|
|
1212
|
-
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (
|
|
1214
|
+
props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1213
1215
|
]); };
|
|
1214
1216
|
},
|
|
1215
1217
|
});
|
|
@@ -1234,7 +1236,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1234
1236
|
var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
|
|
1235
1237
|
var numCells = cells.length + margin * 2;
|
|
1236
1238
|
var image = imageRef.value;
|
|
1237
|
-
var imageProps = { x: 0, y: 0, width: 0, height: 0 };
|
|
1239
|
+
var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1238
1240
|
var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1239
1241
|
if (showImage) {
|
|
1240
1242
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
@@ -1243,9 +1245,10 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1243
1245
|
y: imageSettings.y + margin,
|
|
1244
1246
|
width: imageSettings.w,
|
|
1245
1247
|
height: imageSettings.h,
|
|
1248
|
+
borderRadius: imageSettings.borderRadius,
|
|
1246
1249
|
};
|
|
1247
1250
|
if (imageSettings.excavation) {
|
|
1248
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1251
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1249
1252
|
}
|
|
1250
1253
|
}
|
|
1251
1254
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
@@ -1282,7 +1285,7 @@ var QrcodeCanvas = vue.defineComponent({
|
|
|
1282
1285
|
});
|
|
1283
1286
|
}
|
|
1284
1287
|
if (showImage) {
|
|
1285
|
-
var borderRadius =
|
|
1288
|
+
var borderRadius = imageProps.borderRadius;
|
|
1286
1289
|
if (borderRadius > 0) {
|
|
1287
1290
|
ctx.save();
|
|
1288
1291
|
ctx.beginPath();
|
package/dist/qrcode.vue.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* qrcode.vue v3.7.
|
|
2
|
+
* qrcode.vue v3.7.1
|
|
3
3
|
* A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
|
|
4
4
|
* © 2017-PRESENT @scopewu(https://github.com/scopewu)
|
|
5
5
|
* MIT License.
|
|
@@ -1010,19 +1010,18 @@ function getImageSettings(cells, size, margin, imageSettings) {
|
|
|
1010
1010
|
var h = (height || defaultSize) * scale;
|
|
1011
1011
|
var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
|
|
1012
1012
|
var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
|
|
1013
|
+
var borderRadius = (imageSettings.borderRadius || 0) * scale;
|
|
1013
1014
|
var excavation = null;
|
|
1014
1015
|
if (imageSettings.excavate) {
|
|
1015
1016
|
var floorX = Math.floor(x);
|
|
1016
1017
|
var floorY = Math.floor(y);
|
|
1017
1018
|
var ceilW = Math.ceil(w + x - floorX);
|
|
1018
1019
|
var ceilH = Math.ceil(h + y - floorY);
|
|
1019
|
-
|
|
1020
|
-
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
|
|
1020
|
+
excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
|
|
1021
1021
|
}
|
|
1022
|
-
return { x: x, y: y, h: h, w: w, excavation: excavation };
|
|
1022
|
+
return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
|
|
1023
1023
|
}
|
|
1024
|
-
function excavateModules(modules, excavation) {
|
|
1025
|
-
var borderRadius = excavation.borderRadius;
|
|
1024
|
+
function excavateModules(modules, excavation, borderRadius) {
|
|
1026
1025
|
// If no border radius, use simple rectangular excavation
|
|
1027
1026
|
if (!borderRadius || borderRadius <= 0) {
|
|
1028
1027
|
return modules.map(function (row, y) {
|
|
@@ -1114,7 +1113,7 @@ var QrcodeSvg = defineComponent({
|
|
|
1114
1113
|
setup: function (props) {
|
|
1115
1114
|
var numCells = ref(0);
|
|
1116
1115
|
var fgPath = ref('');
|
|
1117
|
-
var imageProps;
|
|
1116
|
+
var imageProps = ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
|
|
1118
1117
|
var generate = function () {
|
|
1119
1118
|
var value = props.value, _level = props.level, _margin = props.margin;
|
|
1120
1119
|
var margin = _margin >>> 0;
|
|
@@ -1123,14 +1122,15 @@ var QrcodeSvg = defineComponent({
|
|
|
1123
1122
|
numCells.value = cells.length + margin * 2;
|
|
1124
1123
|
if (props.imageSettings.src) {
|
|
1125
1124
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
1126
|
-
imageProps = {
|
|
1125
|
+
imageProps.value = {
|
|
1127
1126
|
x: imageSettings.x + margin,
|
|
1128
1127
|
y: imageSettings.y + margin,
|
|
1129
1128
|
width: imageSettings.w,
|
|
1130
1129
|
height: imageSettings.h,
|
|
1130
|
+
borderRadius: imageSettings.borderRadius,
|
|
1131
1131
|
};
|
|
1132
1132
|
if (imageSettings.excavation) {
|
|
1133
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1133
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1134
1134
|
}
|
|
1135
1135
|
}
|
|
1136
1136
|
// Drawing strategy: instead of a rect per module, we're going to create a
|
|
@@ -1141,6 +1141,7 @@ var QrcodeSvg = defineComponent({
|
|
|
1141
1141
|
// For level 40, 31329 -> 2
|
|
1142
1142
|
fgPath.value = generatePath(cells, margin);
|
|
1143
1143
|
};
|
|
1144
|
+
var qrGradientId = 'qrcode.vue-gradient';
|
|
1144
1145
|
var renderGradient = function () {
|
|
1145
1146
|
if (!props.gradient)
|
|
1146
1147
|
return null;
|
|
@@ -1158,7 +1159,7 @@ var QrcodeSvg = defineComponent({
|
|
|
1158
1159
|
fx: '50%',
|
|
1159
1160
|
fy: '50%',
|
|
1160
1161
|
};
|
|
1161
|
-
return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id:
|
|
1162
|
+
return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
|
|
1162
1163
|
h('stop', {
|
|
1163
1164
|
offset: '0%',
|
|
1164
1165
|
style: { stopColor: props.gradientStartColor },
|
|
@@ -1169,18 +1170,19 @@ var QrcodeSvg = defineComponent({
|
|
|
1169
1170
|
}),
|
|
1170
1171
|
]);
|
|
1171
1172
|
};
|
|
1173
|
+
var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
|
|
1172
1174
|
var renderClipPath = function () {
|
|
1173
|
-
var borderRadius =
|
|
1175
|
+
var borderRadius = imageProps.value.borderRadius;
|
|
1174
1176
|
if (!props.imageSettings.src)
|
|
1175
1177
|
return null;
|
|
1176
1178
|
if (borderRadius <= 0)
|
|
1177
1179
|
return null;
|
|
1178
|
-
return h('clipPath', { id:
|
|
1180
|
+
return h('clipPath', { id: qrLogoClipPathId }, [
|
|
1179
1181
|
h('rect', {
|
|
1180
|
-
x: imageProps.x,
|
|
1181
|
-
y: imageProps.y,
|
|
1182
|
-
width: imageProps.width,
|
|
1183
|
-
height: imageProps.height,
|
|
1182
|
+
x: imageProps.value.x,
|
|
1183
|
+
y: imageProps.value.y,
|
|
1184
|
+
width: imageProps.value.width,
|
|
1185
|
+
height: imageProps.value.height,
|
|
1184
1186
|
rx: borderRadius,
|
|
1185
1187
|
ry: borderRadius,
|
|
1186
1188
|
}),
|
|
@@ -1202,10 +1204,10 @@ var QrcodeSvg = defineComponent({
|
|
|
1202
1204
|
fill: props.background,
|
|
1203
1205
|
}),
|
|
1204
1206
|
h('path', {
|
|
1205
|
-
fill: props.gradient ?
|
|
1207
|
+
fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
|
|
1206
1208
|
d: fgPath.value,
|
|
1207
1209
|
}),
|
|
1208
|
-
props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (
|
|
1210
|
+
props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
|
|
1209
1211
|
]); };
|
|
1210
1212
|
},
|
|
1211
1213
|
});
|
|
@@ -1230,7 +1232,7 @@ var QrcodeCanvas = defineComponent({
|
|
|
1230
1232
|
var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
|
|
1231
1233
|
var numCells = cells.length + margin * 2;
|
|
1232
1234
|
var image = imageRef.value;
|
|
1233
|
-
var imageProps = { x: 0, y: 0, width: 0, height: 0 };
|
|
1235
|
+
var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
|
|
1234
1236
|
var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
|
|
1235
1237
|
if (showImage) {
|
|
1236
1238
|
var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
|
|
@@ -1239,9 +1241,10 @@ var QrcodeCanvas = defineComponent({
|
|
|
1239
1241
|
y: imageSettings.y + margin,
|
|
1240
1242
|
width: imageSettings.w,
|
|
1241
1243
|
height: imageSettings.h,
|
|
1244
|
+
borderRadius: imageSettings.borderRadius,
|
|
1242
1245
|
};
|
|
1243
1246
|
if (imageSettings.excavation) {
|
|
1244
|
-
cells = excavateModules(cells, imageSettings.excavation);
|
|
1247
|
+
cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
|
|
1245
1248
|
}
|
|
1246
1249
|
}
|
|
1247
1250
|
var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
|
|
@@ -1278,7 +1281,7 @@ var QrcodeCanvas = defineComponent({
|
|
|
1278
1281
|
});
|
|
1279
1282
|
}
|
|
1280
1283
|
if (showImage) {
|
|
1281
|
-
var borderRadius =
|
|
1284
|
+
var borderRadius = imageProps.borderRadius;
|
|
1282
1285
|
if (borderRadius > 0) {
|
|
1283
1286
|
ctx.save();
|
|
1284
1287
|
ctx.beginPath();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "qrcode.vue",
|
|
3
|
-
"version": "3.7.
|
|
3
|
+
"version": "3.7.1",
|
|
4
4
|
"description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/qrcode.vue.cjs.js",
|
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
],
|
|
35
35
|
"files": [
|
|
36
36
|
"/dist",
|
|
37
|
+
"CHANGELOG.md",
|
|
37
38
|
"README-zh_cn.md",
|
|
38
39
|
"README.md"
|
|
39
40
|
],
|