qrcode.vue 3.7.1 → 3.8.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [3.8.0] - 2026-02-02
+
+### Performance
+
+- optimize QRCode rendering performance.
+
 ## [3.7.1] - 2026-01-31
 
 ### Bugfix

package/dist/qrcode.vue.browser.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.7.1
+ * qrcode.vue v3.8.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -913,6 +913,7 @@ var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
 var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
+var IMAGE_EXCAVATE_THICKNESS = 2;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -932,42 +933,6 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
-function isPointInRoundedRect(px, py, rx, ry, rw, rh, r) {
-    // Fast check: point outside the bounding box
-    if (px < rx || px > rx + rw || py < ry || py > ry + rh) {
-        return false;
-    }
-    // If no border radius or point is in the center rectangle
-    if (r <= 0 || (px > rx + r && px < rx + rw - r) || (py > ry + r && py < ry + rh - r)) {
-        return true;
-    }
-    // Check the four corners
-    // Top-left corner
-    if (px < rx + r && py < ry + r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Top-right corner
-    if (px > rx + rw - r && py < ry + r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-left corner
-    if (px < rx + r && py > ry + rh - r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-right corner
-    if (px > rx + rw - r && py > ry + rh - r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    return true;
-}
 function generatePath(modules, margin) {
     if (margin === void 0) { margin = 0; }
     var path = '';
@@ -1025,30 +990,40 @@ function getImageSettings(cells, size, margin, imageSettings) {
     }
     return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation, borderRadius) {
-    // If no border radius, use simple rectangular excavation
-    if (!borderRadius || borderRadius <= 0) {
-        return modules.map(function (row, y) {
-            if (y < excavation.y || y >= excavation.y + excavation.h) {
-                return row;
-            }
-            return row.map(function (cell, x) {
-                if (x < excavation.x || x >= excavation.x + excavation.w) {
-                    return cell;
-                }
-                return false;
-            });
-        });
-    }
-    // For rounded corners, check each module against the rounded rectangle shape
-    return modules.map(function (row, y) {
-        return row.map(function (cell, x) {
-            if (!cell)
-                return cell;
-            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
-            return inExcavation ? false : cell;
-        });
+function useQRCode(props) {
+    var margin = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
+    var cells = vue.computed(function () {
+        var level = validErrorCorrectLevel(props.level) ? props.level : defaultErrorCorrectLevel;
+        return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
+    });
+    var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
+    var fgPath = vue.computed(function () { return generatePath(cells.value, margin.value); });
+    var imageProps = vue.computed(function () {
+        if (!props.imageSettings.src) {
+            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+        }
+        var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
+        return {
+            x: settings.x + margin.value,
+            y: settings.y + margin.value,
+            width: settings.w,
+            height: settings.h,
+            borderRadius: settings.borderRadius,
+        };
     });
+    var imageBorderProps = vue.computed(function () {
+        if (!props.imageSettings.excavate || !props.imageSettings.src)
+            return null;
+        var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
+        return {
+            x: imageProps.value.x - borderThickness,
+            y: imageProps.value.y - borderThickness,
+            width: imageProps.value.width + borderThickness * 2,
+            height: imageProps.value.height + borderThickness * 2,
+            borderRadius: imageProps.value.borderRadius,
+        };
+    });
+    return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
 var QRCodeProps = {
     value: {
@@ -1115,36 +1090,7 @@ var QrcodeSvg = vue.defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
     setup: function (props) {
-        var numCells = vue.ref(0);
-        var fgPath = vue.ref('');
-        var imageProps = vue.ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
-        var generate = function () {
-            var value = props.value, _level = props.level, _margin = props.margin;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            numCells.value = cells.length + margin * 2;
-            if (props.imageSettings.src) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps.value = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
-            // Drawing strategy: instead of a rect per module, we're going to create a
-            // single path for the dark modules and layer that on top of a light rect,
-            // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-            // way faster than DOM ops.
-            // For level 1, 441 nodes -> 2
-            // For level 40, 31329 -> 2
-            fgPath.value = generatePath(cells, margin);
-        };
+        var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
@@ -1192,8 +1138,6 @@ var QrcodeSvg = vue.defineComponent({
                 }),
             ]);
         };
-        generate();
-        vue.watch(props, generate, { deep: true });
         return function () { return vue.h('svg', {
             width: props.size,
             height: props.size,
@@ -1211,6 +1155,15 @@ var QrcodeSvg = vue.defineComponent({
                 fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
+            imageBorderProps.value && vue.h('rect', {
+                x: imageBorderProps.value.x,
+                y: imageBorderProps.value.y,
+                width: imageBorderProps.value.width,
+                height: imageBorderProps.value.height,
+                fill: props.background,
+                rx: imageBorderProps.value.borderRadius,
+                ry: imageBorderProps.value.borderRadius,
+            }),
             props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
@@ -1219,94 +1172,86 @@ var QrcodeCanvas = vue.defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
+        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var canvasEl = vue.ref(null);
         var imageRef = vue.ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
+            var size = props.size, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var canvas = canvasEl.value;
             if (!canvas) {
                 return;
             }
-            var ctx = canvas.getContext('2d');
-            if (!ctx) {
+            var canvasCtx = canvas.getContext('2d');
+            if (!canvasCtx) {
                 return;
             }
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            var numCells = cells.length + margin * 2;
+            var qrCells = cells.value;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
-            var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-            var scale = (size / numCells) * devicePixelRatio;
+            var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            ctx.scale(scale, scale);
-            ctx.fillStyle = background;
-            ctx.fillRect(0, 0, numCells, numCells);
+            canvasCtx.scale(scale, scale);
+            canvasCtx.fillStyle = background;
+            canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
                 var grad = void 0;
                 if (gradientType === 'linear') {
-                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                    grad = canvasCtx.createLinearGradient(0, 0, numCells.value, numCells.value);
                 }
                 else {
-                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                    grad = canvasCtx.createRadialGradient(numCells.value / 2, numCells.value / 2, 0, numCells.value / 2, numCells.value / 2, numCells.value / 2);
                 }
                 grad.addColorStop(0, gradientStartColor);
                 grad.addColorStop(1, gradientEndColor);
-                ctx.fillStyle = grad;
+                canvasCtx.fillStyle = grad;
             }
             else {
-                ctx.fillStyle = foreground;
+                canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                ctx.fill(new Path2D(generatePath(cells, margin)));
+                canvasCtx.fill(new Path2D(generatePath(qrCells, margin.value)));
             }
             else {
-                cells.forEach(function (row, rdx) {
+                qrCells.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
-                            ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+                            canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
                         }
                     });
                 });
             }
+            var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
             if (showImage) {
-                var borderRadius = imageProps.borderRadius;
-                if (borderRadius > 0) {
-                    ctx.save();
+                var drawRoundedRect = function (ctx, x, y, width, height, radius) {
                     ctx.beginPath();
                     if (ctx.roundRect) {
-                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                        ctx.roundRect(x, y, width, height, radius);
                     }
                     else {
-                        // Fallback for browsers without roundRect support
-                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                        ctx.rect(x, y, width, height);
                     }
-                    ctx.clip();
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    ctx.restore();
+                };
+                if (imageBorderProps.value) {
+                    var imageBorder = imageBorderProps.value;
+                    canvasCtx.fillStyle = props.background;
+                    drawRoundedRect(canvasCtx, imageBorder.x, imageBorder.y, imageBorder.width, imageBorder.height, imageBorder.borderRadius);
+                    canvasCtx.fill();
+                }
+                var borderRadius = imageProps.value.borderRadius;
+                if (borderRadius > 0) {
+                    canvasCtx.save();
+                    drawRoundedRect(canvasCtx, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height, borderRadius);
+                    canvasCtx.clip();
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
+                    canvasCtx.restore();
                 }
                 else {
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
                 }
             }
         };
         vue.onMounted(generate);
-        vue.watch(props, generate, { deep: true });
+        vue.watchEffect(generate);
         var style = ctx.attrs.style;
         return function () { return vue.h(vue.Fragment, [
             vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),

package/dist/qrcode.vue.browser.min.js

@@ -1,7 +1,7 @@
 /*!
- * qrcode.vue v3.7.1
+ * qrcode.vue v3.8.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-!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})});
+!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=[],u=0;this.size>u;u++)a.push(!1);for(u=0;this.size>u;u++)this.modules.push(a.slice()),this.isFunction.push(a.slice());this.drawFunctionPatterns();var s=this.addEccAndInterleave(n);if(this.drawCodewords(s),-1==o){var l=1e9;for(u=0;8>u;u++){this.applyMask(u),this.drawFormatBits(u);var d=this.getPenaltyScore();l>d&&(o=u,l=d),this.applyMask(u)}}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,u,s,l){if(void 0===a&&(a=1),void 0===u&&(u=40),void 0===s&&(s=-1),void 0===l&&(l=!0),t.MIN_VERSION>a||a>u||u>t.MAX_VERSION||-1>s||s>7)throw new RangeError("Invalid value");var d,h;for(d=a;;d++){var c=8*t.getNumDataCodewords(d,n),f=o.getTotalBits(e,d);if(c>=f){h=f;break}if(d>=u)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 m=v[g];l&&h<=8*t.getNumDataCodewords(d,m)&&(n=m)}for(var p=[],E=0,y=e;y.length>E;E++){var w=y[E];r(w.mode.modeBits,4,p),r(w.numChars,w.mode.numCharCountBits(d),p);for(var C=0,M=w.getData();M.length>C;C++){p.push(M[C])}}i(p.length==h);var R=8*t.getNumDataCodewords(d,n);i(R>=p.length),r(0,Math.min(4,R-p.length),p),r(0,(8-p.length%8)%8,p),i(p.length%8==0);for(var S=236;R>p.length;S^=253)r(S,8,p);for(var N=[];p.length>8*N.length;)N.push(0);return p.forEach(function(e,t){return N[t>>>3]|=e<<7-(7&t)}),new t(d,n,N,s)},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,u=Math.floor(t/3);this.setFunctionModule(a,u,o),this.setFunctionModule(u,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],u=Math.floor(t.getNumRawDataModules(r)/8),s=o-u%o,l=Math.floor(u/o),d=[],h=t.reedSolomonComputeDivisor(a),c=0,f=0;o>c;c++){var g=e.slice(f,f+l-a+(s>c?0:1));f+=g.length;var v=t.reedSolomonComputeRemainder(g,h);s>c&&g.push(0),d.push(g.concat(v))}var m=[],p=function(e){d.forEach(function(t,r){e==l-a&&s>r||m.push(t[e])})};for(c=0;d[0].length>c;c++)p(c);return i(m.length==u),m},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 u=0;2>u;u++){var s=o-u,l=!(o+1&2)?this.size-1-a:a;!this.isFunction[l][s]&&8*e.length>r&&(this.modules[l][s]=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],u=0;this.size>u;u++)this.modules[r][u]==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][u],o=1);e+=this.finderPenaltyTerminateAndCount(n,o,a)*t.PENALTY_N3}for(u=0;this.size>u;u++){n=!1;var s=0;for(a=[0,0,0,0,0,0,0],r=0;this.size>r;r++)this.modules[r][u]==n?5==++s?e+=t.PENALTY_N1:s>5&&e++:(this.finderPenaltyAddHistory(s,a),n||(e+=this.finderPenaltyCountPatterns(a)*t.PENALTY_N3),n=this.modules[r][u],s=1);e+=this.finderPenaltyTerminateAndCount(n,s,a)*t.PENALTY_N3}for(r=0;this.size-1>r;r++)for(u=0;this.size-1>u;u++){var l=this.modules[r][u];l==this.modules[r][u+1]&&l==this.modules[r+1][u]&&l==this.modules[r+1][u+1]&&(e+=t.PENALTY_N2)}for(var d=0,h=0,c=this.modules;c.length>h;h++){d=c[h].reduce(function(e,t){return e+(t?1:0)},d)}var f=this.size*this.size,g=Math.ceil(Math.abs(20*d-10*f)/f)-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 u(e){return e in o}function s(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 l(e){var r=t.computed(function(){var t;return(null!==(t=e.margin)&&void 0!==t?t:0)>>>0}),n=t.computed(function(){var t=u(e.level)?e.level:"L";return i.QrCode.encodeText(e.value,o[t]).getModules()}),a=t.computed(function(){return n.value.length+2*r.value}),l=t.computed(function(){return s(n.value,r.value)}),d=t.computed(function(){if(!e.imageSettings.src)return{x:0,y:0,width:0,height:0,borderRadius:0};var t=function(e,t,r,n){var i=n.width,o=n.height,a=n.x,u=n.y,s=e.length+2*r,l=Math.floor(.1*t),d=s/t,h=(i||l)*d,c=(o||l)*d,f=null==a?e.length/2-h/2:a*d,g=null==u?e.length/2-c/2:u*d,v=(n.borderRadius||0)*d,m=null;if(n.excavate){var p=Math.floor(f),E=Math.floor(g);m={x:p,y:E,w:Math.ceil(h+f-p),h:Math.ceil(c+g-E)}}return{x:f,y:g,h:c,w:h,borderRadius:v,excavation:m}}(n.value,e.size,r.value,e.imageSettings);return{x:t.x+r.value,y:t.y+r.value,width:t.w,height:t.h,borderRadius:t.borderRadius}}),h=t.computed(function(){if(!e.imageSettings.excavate||!e.imageSettings.src)return null;var t=2/(e.size/a.value);return{x:d.value.x-t,y:d.value.y-t,width:d.value.width+2*t,height:d.value.height+2*t,borderRadius:d.value.borderRadius}});return{margin:r,numCells:a,cells:n,fgPath:l,imageProps:d,imageBorderProps:h}}var d={value:{type:String,required:!0,default:""},size:{type:Number,default:100},level:{type:String,default:"L",validator:function(e){return u(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"}},h=n(n({},d),{renderAs:{type:String,required:!1,default:"canvas",validator:function(e){return["canvas","svg"].indexOf(e)>-1}}}),c=t.defineComponent({name:"QRCodeSvg",props:d,setup:function(e){var r=l(e),i=r.numCells,o=r.fgPath,a=r.imageProps,u=r.imageBorderProps,s="qrcode.vue-gradient",d="qrcode.vue-logo-clip-path";return 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(i.value," ").concat(i.value)},[t.h("defs",{},[e.gradient?t.h("linear"===e.gradientType?"linearGradient":"radialGradient",n({id:s},"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,(r=a.value.borderRadius,e.imageSettings.src&&r>0?t.h("clipPath",{id:d},[t.h("rect",{x:a.value.x,y:a.value.y,width:a.value.width,height:a.value.height,rx:r,ry:r})]):null)]),t.h("rect",{width:"100%",height:"100%",fill:e.background}),t.h("path",{fill:e.gradient?"url(#".concat(s,")"):e.foreground,d:o.value}),u.value&&t.h("rect",{x:u.value.x,y:u.value.y,width:u.value.width,height:u.value.height,fill:e.background,rx:u.value.borderRadius,ry:u.value.borderRadius}),e.imageSettings.src&&t.h("image",n(n({href:e.imageSettings.src},a.value),a.value.borderRadius>0?{"clip-path":"url(#".concat(d,")")}:{}))]);var r}}}),f=t.defineComponent({name:"QRCodeCanvas",props:d,setup:function(e,r){var i=l(e),o=i.margin,u=i.cells,d=i.numCells,h=i.imageProps,c=i.imageBorderProps,f=t.ref(null),g=t.ref(null),v=function(){var t=e.size,r=e.background,n=e.foreground,i=e.gradient,l=e.gradientType,v=e.gradientStartColor,m=e.gradientEndColor,p=f.value;if(p){var E=p.getContext("2d");if(E){var y=u.value,w=g.value,C="undefined"!=typeof window&&window.devicePixelRatio||1,M=t/d.value*C;if(p.height=p.width=t*C,E.scale(M,M),E.fillStyle=r,E.fillRect(0,0,d.value,d.value),i){var R=void 0;(R="linear"===l?E.createLinearGradient(0,0,d.value,d.value):E.createRadialGradient(d.value/2,d.value/2,0,d.value/2,d.value/2,d.value/2)).addColorStop(0,v),R.addColorStop(1,m),E.fillStyle=R}else E.fillStyle=n;if(a?E.fill(new Path2D(s(y,o.value))):y.forEach(function(e,t){e.forEach(function(e,r){e&&E.fillRect(r+o.value,t+o.value,1,1)})}),e.imageSettings.src&&w&&0!==w.naturalWidth&&0!==w.naturalHeight){var S=function(e,t,r,n,i,o){e.beginPath(),e.roundRect?e.roundRect(t,r,n,i,o):e.rect(t,r,n,i)};if(c.value){var N=c.value;E.fillStyle=e.background,S(E,N.x,N.y,N.width,N.height,N.borderRadius),E.fill()}var A=h.value.borderRadius;A>0?(E.save(),S(E,h.value.x,h.value.y,h.value.width,h.value.height,A),E.clip(),E.drawImage(w,h.value.x,h.value.y,h.value.width,h.value.height),E.restore()):E.drawImage(w,h.value.x,h.value.y,h.value.width,h.value.height)}}}};t.onMounted(v),t.watchEffect(v);var m=r.attrs.style;return function(){return t.h(t.Fragment,[t.h("canvas",n(n({},r.attrs),{ref:f,style:n(n({},m),{width:"".concat(e.size,"px"),height:"".concat(e.size,"px")})})),e.imageSettings.src&&t.h("img",{ref:g,src:e.imageSettings.src,style:{display:"none"},onLoad:v})])}}}),g=t.defineComponent({name:"Qrcode",render:function(){var e=this.$props;return t.h("svg"===e.renderAs?c:f,{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:h});e.QrcodeCanvas=f,e.QrcodeSvg=c,e.default=g,Object.defineProperty(e,"__esModule",{value:!0})});

package/dist/qrcode.vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.7.1
+ * qrcode.vue v3.8.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -913,6 +913,7 @@ var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
 var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
+var IMAGE_EXCAVATE_THICKNESS = 2;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -932,42 +933,6 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
-function isPointInRoundedRect(px, py, rx, ry, rw, rh, r) {
-    // Fast check: point outside the bounding box
-    if (px < rx || px > rx + rw || py < ry || py > ry + rh) {
-        return false;
-    }
-    // If no border radius or point is in the center rectangle
-    if (r <= 0 || (px > rx + r && px < rx + rw - r) || (py > ry + r && py < ry + rh - r)) {
-        return true;
-    }
-    // Check the four corners
-    // Top-left corner
-    if (px < rx + r && py < ry + r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Top-right corner
-    if (px > rx + rw - r && py < ry + r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-left corner
-    if (px < rx + r && py > ry + rh - r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-right corner
-    if (px > rx + rw - r && py > ry + rh - r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    return true;
-}
 function generatePath(modules, margin) {
     if (margin === void 0) { margin = 0; }
     var path = '';
@@ -1025,30 +990,40 @@ function getImageSettings(cells, size, margin, imageSettings) {
     }
     return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation, borderRadius) {
-    // If no border radius, use simple rectangular excavation
-    if (!borderRadius || borderRadius <= 0) {
-        return modules.map(function (row, y) {
-            if (y < excavation.y || y >= excavation.y + excavation.h) {
-                return row;
-            }
-            return row.map(function (cell, x) {
-                if (x < excavation.x || x >= excavation.x + excavation.w) {
-                    return cell;
-                }
-                return false;
-            });
-        });
-    }
-    // For rounded corners, check each module against the rounded rectangle shape
-    return modules.map(function (row, y) {
-        return row.map(function (cell, x) {
-            if (!cell)
-                return cell;
-            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
-            return inExcavation ? false : cell;
-        });
+function useQRCode(props) {
+    var margin = vue.computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
+    var cells = vue.computed(function () {
+        var level = validErrorCorrectLevel(props.level) ? props.level : defaultErrorCorrectLevel;
+        return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
+    });
+    var numCells = vue.computed(function () { return cells.value.length + margin.value * 2; });
+    var fgPath = vue.computed(function () { return generatePath(cells.value, margin.value); });
+    var imageProps = vue.computed(function () {
+        if (!props.imageSettings.src) {
+            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+        }
+        var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
+        return {
+            x: settings.x + margin.value,
+            y: settings.y + margin.value,
+            width: settings.w,
+            height: settings.h,
+            borderRadius: settings.borderRadius,
+        };
     });
+    var imageBorderProps = vue.computed(function () {
+        if (!props.imageSettings.excavate || !props.imageSettings.src)
+            return null;
+        var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
+        return {
+            x: imageProps.value.x - borderThickness,
+            y: imageProps.value.y - borderThickness,
+            width: imageProps.value.width + borderThickness * 2,
+            height: imageProps.value.height + borderThickness * 2,
+            borderRadius: imageProps.value.borderRadius,
+        };
+    });
+    return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
 var QRCodeProps = {
     value: {
@@ -1115,36 +1090,7 @@ var QrcodeSvg = vue.defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
     setup: function (props) {
-        var numCells = vue.ref(0);
-        var fgPath = vue.ref('');
-        var imageProps = vue.ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
-        var generate = function () {
-            var value = props.value, _level = props.level, _margin = props.margin;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            numCells.value = cells.length + margin * 2;
-            if (props.imageSettings.src) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps.value = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
-            // Drawing strategy: instead of a rect per module, we're going to create a
-            // single path for the dark modules and layer that on top of a light rect,
-            // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-            // way faster than DOM ops.
-            // For level 1, 441 nodes -> 2
-            // For level 40, 31329 -> 2
-            fgPath.value = generatePath(cells, margin);
-        };
+        var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
@@ -1192,8 +1138,6 @@ var QrcodeSvg = vue.defineComponent({
                 }),
             ]);
         };
-        generate();
-        vue.watch(props, generate, { deep: true });
         return function () { return vue.h('svg', {
             width: props.size,
             height: props.size,
@@ -1211,6 +1155,15 @@ var QrcodeSvg = vue.defineComponent({
                 fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
+            imageBorderProps.value && vue.h('rect', {
+                x: imageBorderProps.value.x,
+                y: imageBorderProps.value.y,
+                width: imageBorderProps.value.width,
+                height: imageBorderProps.value.height,
+                fill: props.background,
+                rx: imageBorderProps.value.borderRadius,
+                ry: imageBorderProps.value.borderRadius,
+            }),
             props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
@@ -1219,94 +1172,86 @@ var QrcodeCanvas = vue.defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
+        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var canvasEl = vue.ref(null);
         var imageRef = vue.ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
+            var size = props.size, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var canvas = canvasEl.value;
             if (!canvas) {
                 return;
             }
-            var ctx = canvas.getContext('2d');
-            if (!ctx) {
+            var canvasCtx = canvas.getContext('2d');
+            if (!canvasCtx) {
                 return;
             }
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            var numCells = cells.length + margin * 2;
+            var qrCells = cells.value;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
-            var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-            var scale = (size / numCells) * devicePixelRatio;
+            var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            ctx.scale(scale, scale);
-            ctx.fillStyle = background;
-            ctx.fillRect(0, 0, numCells, numCells);
+            canvasCtx.scale(scale, scale);
+            canvasCtx.fillStyle = background;
+            canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
                 var grad = void 0;
                 if (gradientType === 'linear') {
-                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                    grad = canvasCtx.createLinearGradient(0, 0, numCells.value, numCells.value);
                 }
                 else {
-                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                    grad = canvasCtx.createRadialGradient(numCells.value / 2, numCells.value / 2, 0, numCells.value / 2, numCells.value / 2, numCells.value / 2);
                 }
                 grad.addColorStop(0, gradientStartColor);
                 grad.addColorStop(1, gradientEndColor);
-                ctx.fillStyle = grad;
+                canvasCtx.fillStyle = grad;
             }
             else {
-                ctx.fillStyle = foreground;
+                canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                ctx.fill(new Path2D(generatePath(cells, margin)));
+                canvasCtx.fill(new Path2D(generatePath(qrCells, margin.value)));
             }
             else {
-                cells.forEach(function (row, rdx) {
+                qrCells.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
-                            ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+                            canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
                         }
                     });
                 });
             }
+            var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
             if (showImage) {
-                var borderRadius = imageProps.borderRadius;
-                if (borderRadius > 0) {
-                    ctx.save();
+                var drawRoundedRect = function (ctx, x, y, width, height, radius) {
                     ctx.beginPath();
                     if (ctx.roundRect) {
-                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                        ctx.roundRect(x, y, width, height, radius);
                     }
                     else {
-                        // Fallback for browsers without roundRect support
-                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                        ctx.rect(x, y, width, height);
                     }
-                    ctx.clip();
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    ctx.restore();
+                };
+                if (imageBorderProps.value) {
+                    var imageBorder = imageBorderProps.value;
+                    canvasCtx.fillStyle = props.background;
+                    drawRoundedRect(canvasCtx, imageBorder.x, imageBorder.y, imageBorder.width, imageBorder.height, imageBorder.borderRadius);
+                    canvasCtx.fill();
+                }
+                var borderRadius = imageProps.value.borderRadius;
+                if (borderRadius > 0) {
+                    canvasCtx.save();
+                    drawRoundedRect(canvasCtx, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height, borderRadius);
+                    canvasCtx.clip();
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
+                    canvasCtx.restore();
                 }
                 else {
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
                 }
             }
         };
         vue.onMounted(generate);
-        vue.watch(props, generate, { deep: true });
+        vue.watchEffect(generate);
         var style = ctx.attrs.style;
         return function () { return vue.h(vue.Fragment, [
             vue.h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),

package/dist/qrcode.vue.esm.js

@@ -1,10 +1,10 @@
 /*!
- * qrcode.vue v3.7.1
+ * qrcode.vue v3.8.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
  */
-import { defineComponent, ref, watch, h, onMounted, Fragment } from 'vue';
+import { defineComponent, h, ref, onMounted, watchEffect, Fragment, computed } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -909,6 +909,7 @@ var defaultErrorCorrectLevel = 'L';
 var DEFAULT_QR_SIZE = 100;
 var DEFAULT_MARGIN = 0;
 var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
+var IMAGE_EXCAVATE_THICKNESS = 2;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -928,42 +929,6 @@ var SUPPORTS_PATH2D = (function () {
 function validErrorCorrectLevel(level) {
     return level in ErrorCorrectLevelMap;
 }
-function isPointInRoundedRect(px, py, rx, ry, rw, rh, r) {
-    // Fast check: point outside the bounding box
-    if (px < rx || px > rx + rw || py < ry || py > ry + rh) {
-        return false;
-    }
-    // If no border radius or point is in the center rectangle
-    if (r <= 0 || (px > rx + r && px < rx + rw - r) || (py > ry + r && py < ry + rh - r)) {
-        return true;
-    }
-    // Check the four corners
-    // Top-left corner
-    if (px < rx + r && py < ry + r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Top-right corner
-    if (px > rx + rw - r && py < ry + r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-left corner
-    if (px < rx + r && py > ry + rh - r) {
-        var dx = px - (rx + r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    // Bottom-right corner
-    if (px > rx + rw - r && py > ry + rh - r) {
-        var dx = px - (rx + rw - r);
-        var dy = py - (ry + rh - r);
-        return dx * dx + dy * dy <= r * r;
-    }
-    return true;
-}
 function generatePath(modules, margin) {
     if (margin === void 0) { margin = 0; }
     var path = '';
@@ -1021,30 +986,40 @@ function getImageSettings(cells, size, margin, imageSettings) {
     }
     return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation, borderRadius) {
-    // If no border radius, use simple rectangular excavation
-    if (!borderRadius || borderRadius <= 0) {
-        return modules.map(function (row, y) {
-            if (y < excavation.y || y >= excavation.y + excavation.h) {
-                return row;
-            }
-            return row.map(function (cell, x) {
-                if (x < excavation.x || x >= excavation.x + excavation.w) {
-                    return cell;
-                }
-                return false;
-            });
-        });
-    }
-    // For rounded corners, check each module against the rounded rectangle shape
-    return modules.map(function (row, y) {
-        return row.map(function (cell, x) {
-            if (!cell)
-                return cell;
-            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
-            return inExcavation ? false : cell;
-        });
+function useQRCode(props) {
+    var margin = computed(function () { var _a; return ((_a = props.margin) !== null && _a !== void 0 ? _a : DEFAULT_MARGIN) >>> 0; });
+    var cells = computed(function () {
+        var level = validErrorCorrectLevel(props.level) ? props.level : defaultErrorCorrectLevel;
+        return QR.QrCode.encodeText(props.value, ErrorCorrectLevelMap[level]).getModules();
+    });
+    var numCells = computed(function () { return cells.value.length + margin.value * 2; });
+    var fgPath = computed(function () { return generatePath(cells.value, margin.value); });
+    var imageProps = computed(function () {
+        if (!props.imageSettings.src) {
+            return { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
+        }
+        var settings = getImageSettings(cells.value, props.size, margin.value, props.imageSettings);
+        return {
+            x: settings.x + margin.value,
+            y: settings.y + margin.value,
+            width: settings.w,
+            height: settings.h,
+            borderRadius: settings.borderRadius,
+        };
     });
+    var imageBorderProps = computed(function () {
+        if (!props.imageSettings.excavate || !props.imageSettings.src)
+            return null;
+        var borderThickness = IMAGE_EXCAVATE_THICKNESS / (props.size / numCells.value);
+        return {
+            x: imageProps.value.x - borderThickness,
+            y: imageProps.value.y - borderThickness,
+            width: imageProps.value.width + borderThickness * 2,
+            height: imageProps.value.height + borderThickness * 2,
+            borderRadius: imageProps.value.borderRadius,
+        };
+    });
+    return { margin: margin, numCells: numCells, cells: cells, fgPath: fgPath, imageProps: imageProps, imageBorderProps: imageBorderProps };
 }
 var QRCodeProps = {
     value: {
@@ -1111,36 +1086,7 @@ var QrcodeSvg = defineComponent({
     name: 'QRCodeSvg',
     props: QRCodeProps,
     setup: function (props) {
-        var numCells = ref(0);
-        var fgPath = ref('');
-        var imageProps = ref({ x: 0, y: 0, width: 0, height: 0, borderRadius: 0 });
-        var generate = function () {
-            var value = props.value, _level = props.level, _margin = props.margin;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            numCells.value = cells.length + margin * 2;
-            if (props.imageSettings.src) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps.value = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
-            // Drawing strategy: instead of a rect per module, we're going to create a
-            // single path for the dark modules and layer that on top of a light rect,
-            // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-            // way faster than DOM ops.
-            // For level 1, 441 nodes -> 2
-            // For level 40, 31329 -> 2
-            fgPath.value = generatePath(cells, margin);
-        };
+        var _a = useQRCode(props), numCells = _a.numCells, fgPath = _a.fgPath, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
@@ -1188,8 +1134,6 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         };
-        generate();
-        watch(props, generate, { deep: true });
         return function () { return h('svg', {
             width: props.size,
             height: props.size,
@@ -1207,6 +1151,15 @@ var QrcodeSvg = defineComponent({
                 fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
+            imageBorderProps.value && h('rect', {
+                x: imageBorderProps.value.x,
+                y: imageBorderProps.value.y,
+                width: imageBorderProps.value.width,
+                height: imageBorderProps.value.height,
+                fill: props.background,
+                rx: imageBorderProps.value.borderRadius,
+                ry: imageBorderProps.value.borderRadius,
+            }),
             props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
@@ -1215,94 +1168,86 @@ var QrcodeCanvas = defineComponent({
     name: 'QRCodeCanvas',
     props: QRCodeProps,
     setup: function (props, ctx) {
+        var _a = useQRCode(props), margin = _a.margin, cells = _a.cells, numCells = _a.numCells, imageProps = _a.imageProps, imageBorderProps = _a.imageBorderProps;
         var canvasEl = ref(null);
         var imageRef = ref(null);
         var generate = function () {
-            var value = props.value, _level = props.level, size = props.size, _margin = props.margin, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
-            var margin = _margin >>> 0;
-            var level = validErrorCorrectLevel(_level) ? _level : defaultErrorCorrectLevel;
+            var size = props.size, background = props.background, foreground = props.foreground, gradient = props.gradient, gradientType = props.gradientType, gradientStartColor = props.gradientStartColor, gradientEndColor = props.gradientEndColor;
             var canvas = canvasEl.value;
             if (!canvas) {
                 return;
             }
-            var ctx = canvas.getContext('2d');
-            if (!ctx) {
+            var canvasCtx = canvas.getContext('2d');
+            if (!canvasCtx) {
                 return;
             }
-            var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
-            var numCells = cells.length + margin * 2;
+            var qrCells = cells.value;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0, borderRadius: 0 };
-            var showImage = props.imageSettings.src && image != null && image.naturalWidth !== 0 && image.naturalHeight !== 0;
-            if (showImage) {
-                var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
-                    x: imageSettings.x + margin,
-                    y: imageSettings.y + margin,
-                    width: imageSettings.w,
-                    height: imageSettings.h,
-                    borderRadius: imageSettings.borderRadius,
-                };
-                if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
-                }
-            }
             var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
-            var scale = (size / numCells) * devicePixelRatio;
+            var scale = (size / numCells.value) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
-            ctx.scale(scale, scale);
-            ctx.fillStyle = background;
-            ctx.fillRect(0, 0, numCells, numCells);
+            canvasCtx.scale(scale, scale);
+            canvasCtx.fillStyle = background;
+            canvasCtx.fillRect(0, 0, numCells.value, numCells.value);
             if (gradient) {
                 var grad = void 0;
                 if (gradientType === 'linear') {
-                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                    grad = canvasCtx.createLinearGradient(0, 0, numCells.value, numCells.value);
                 }
                 else {
-                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                    grad = canvasCtx.createRadialGradient(numCells.value / 2, numCells.value / 2, 0, numCells.value / 2, numCells.value / 2, numCells.value / 2);
                 }
                 grad.addColorStop(0, gradientStartColor);
                 grad.addColorStop(1, gradientEndColor);
-                ctx.fillStyle = grad;
+                canvasCtx.fillStyle = grad;
             }
             else {
-                ctx.fillStyle = foreground;
+                canvasCtx.fillStyle = foreground;
             }
             if (SUPPORTS_PATH2D) {
-                ctx.fill(new Path2D(generatePath(cells, margin)));
+                canvasCtx.fill(new Path2D(generatePath(qrCells, margin.value)));
             }
             else {
-                cells.forEach(function (row, rdx) {
+                qrCells.forEach(function (row, rdx) {
                     row.forEach(function (cell, cdx) {
                         if (cell) {
-                            ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+                            canvasCtx.fillRect(cdx + margin.value, rdx + margin.value, 1, 1);
                         }
                     });
                 });
             }
+            var showImage = props.imageSettings.src && image && image.naturalWidth !== 0 && image.naturalHeight !== 0;
             if (showImage) {
-                var borderRadius = imageProps.borderRadius;
-                if (borderRadius > 0) {
-                    ctx.save();
+                var drawRoundedRect = function (ctx, x, y, width, height, radius) {
                     ctx.beginPath();
                     if (ctx.roundRect) {
-                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                        ctx.roundRect(x, y, width, height, radius);
                     }
                     else {
-                        // Fallback for browsers without roundRect support
-                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                        ctx.rect(x, y, width, height);
                     }
-                    ctx.clip();
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
-                    ctx.restore();
+                };
+                if (imageBorderProps.value) {
+                    var imageBorder = imageBorderProps.value;
+                    canvasCtx.fillStyle = props.background;
+                    drawRoundedRect(canvasCtx, imageBorder.x, imageBorder.y, imageBorder.width, imageBorder.height, imageBorder.borderRadius);
+                    canvasCtx.fill();
+                }
+                var borderRadius = imageProps.value.borderRadius;
+                if (borderRadius > 0) {
+                    canvasCtx.save();
+                    drawRoundedRect(canvasCtx, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height, borderRadius);
+                    canvasCtx.clip();
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
+                    canvasCtx.restore();
                 }
                 else {
-                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    canvasCtx.drawImage(image, imageProps.value.x, imageProps.value.y, imageProps.value.width, imageProps.value.height);
                 }
             }
         };
         onMounted(generate);
-        watch(props, generate, { deep: true });
+        watchEffect(generate);
         var style = ctx.attrs.style;
         return function () { return h(Fragment, [
             h('canvas', __assign(__assign({}, ctx.attrs), { ref: canvasEl, style: __assign(__assign({}, style), { width: "".concat(props.size, "px"), height: "".concat(props.size, "px") }) })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qrcode.vue",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3",
   "type": "module",
   "main": "./dist/qrcode.vue.cjs.js",