qrcode.vue 3.6.0 → 3.7.1

package/dist/qrcode.vue.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.6.0
+ * qrcode.vue v3.7.1
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -910,6 +910,9 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var defaultErrorCorrectLevel = 'L';
+var DEFAULT_QR_SIZE = 100;
+var DEFAULT_MARGIN = 0;
+var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -929,16 +932,52 @@ 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 ops = [];
+    var path = '';
     modules.forEach(function (row, y) {
         var start = null;
         row.forEach(function (cell, x) {
             if (!cell && start !== null) {
                 // M0 0h7v1H0z injects the space with the move and drops the comma,
                 // saving a char per operation
-                ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+                path += "M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z");
                 start = null;
                 return;
             }
@@ -951,11 +990,11 @@ function generatePath(modules, margin) {
                 }
                 if (start === null) {
                     // Just a single dark module.
-                    ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+                    path += "M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z");
                 }
                 else {
                     // Otherwise finish the current line.
-                    ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+                    path += "M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z");
                 }
                 return;
             }
@@ -964,17 +1003,18 @@ function generatePath(modules, margin) {
             }
         });
     });
-    return ops.join('');
+    return path;
 }
 function getImageSettings(cells, size, margin, imageSettings) {
     var width = imageSettings.width, height = imageSettings.height, imageX = imageSettings.x, imageY = imageSettings.y;
     var numCells = cells.length + margin * 2;
-    var defaultSize = Math.floor(size * 0.1);
+    var defaultSize = Math.floor(size * DEFAULT_IMAGE_SIZE_RATIO);
     var scale = numCells / size;
     var w = (width || defaultSize) * scale;
     var h = (height || defaultSize) * scale;
     var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
     var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
+    var borderRadius = (imageSettings.borderRadius || 0) * scale;
     var excavation = null;
     if (imageSettings.excavate) {
         var floorX = Math.floor(x);
@@ -983,18 +1023,30 @@ function getImageSettings(cells, size, margin, imageSettings) {
         var ceilH = Math.ceil(h + y - floorY);
         excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
     }
-    return { x: x, y: y, h: h, w: w, excavation: excavation };
+    return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation) {
-    return modules.slice().map(function (row, y) {
-        if (y < excavation.y || y >= excavation.y + excavation.h) {
-            return row;
-        }
+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 (x < excavation.x || x >= excavation.x + excavation.w) {
+            if (!cell)
                 return cell;
-            }
-            return false;
+            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
+            return inExcavation ? false : cell;
         });
     });
 }
@@ -1006,7 +1058,7 @@ var QRCodeProps = {
     },
     size: {
         type: Number,
-        default: 100,
+        default: DEFAULT_QR_SIZE,
     },
     level: {
         type: String,
@@ -1024,7 +1076,7 @@ var QRCodeProps = {
     margin: {
         type: Number,
         required: false,
-        default: 0,
+        default: DEFAULT_MARGIN,
     },
     imageSettings: {
         type: Object,
@@ -1065,7 +1117,7 @@ var QrcodeSvg = vue.defineComponent({
     setup: function (props) {
         var numCells = vue.ref(0);
         var fgPath = vue.ref('');
-        var imageProps;
+        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;
@@ -1074,14 +1126,15 @@ var QrcodeSvg = vue.defineComponent({
             numCells.value = cells.length + margin * 2;
             if (props.imageSettings.src) {
                 var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
+                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);
+                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
                 }
             }
             // Drawing strategy: instead of a rect per module, we're going to create a
@@ -1092,6 +1145,7 @@ var QrcodeSvg = vue.defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
                 return null;
@@ -1109,7 +1163,7 @@ var QrcodeSvg = vue.defineComponent({
                     fx: '50%',
                     fy: '50%',
                 };
-            return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+            return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
                 vue.h('stop', {
                     offset: '0%',
                     style: { stopColor: props.gradientStartColor },
@@ -1120,8 +1174,26 @@ var QrcodeSvg = vue.defineComponent({
                 }),
             ]);
         };
+        var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
+        var renderClipPath = function () {
+            var borderRadius = imageProps.value.borderRadius;
+            if (!props.imageSettings.src)
+                return null;
+            if (borderRadius <= 0)
+                return null;
+            return vue.h('clipPath', { id: qrLogoClipPathId }, [
+                vue.h('rect', {
+                    x: imageProps.value.x,
+                    y: imageProps.value.y,
+                    width: imageProps.value.width,
+                    height: imageProps.value.height,
+                    rx: borderRadius,
+                    ry: borderRadius,
+                }),
+            ]);
+        };
         generate();
-        vue.onUpdated(generate);
+        vue.watch(props, generate, { deep: true });
         return function () { return vue.h('svg', {
             width: props.size,
             height: props.size,
@@ -1129,17 +1201,17 @@ var QrcodeSvg = vue.defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            vue.h('defs', {}, [renderGradient()]),
+            vue.h('defs', {}, [renderGradient(), renderClipPath()]),
             vue.h('rect', {
                 width: '100%',
                 height: '100%',
                 fill: props.background,
             }),
             vue.h('path', {
-                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
-            props.imageSettings.src && vue.h('image', __assign({ href: props.imageSettings.src }, imageProps)),
+            props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1164,7 +1236,7 @@ var QrcodeCanvas = vue.defineComponent({
             var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
             var numCells = cells.length + margin * 2;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0 };
+            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);
@@ -1173,12 +1245,13 @@ var QrcodeCanvas = vue.defineComponent({
                     y: imageSettings.y + margin,
                     width: imageSettings.w,
                     height: imageSettings.h,
+                    borderRadius: imageSettings.borderRadius,
                 };
                 if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation);
+                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
                 }
             }
-            var devicePixelRatio = window.devicePixelRatio || 1;
+            var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
             var scale = (size / numCells) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
             ctx.scale(scale, scale);
@@ -1212,11 +1285,28 @@ var QrcodeCanvas = vue.defineComponent({
                 });
             }
             if (showImage) {
-                ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                var borderRadius = imageProps.borderRadius;
+                if (borderRadius > 0) {
+                    ctx.save();
+                    ctx.beginPath();
+                    if (ctx.roundRect) {
+                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                    }
+                    else {
+                        // Fallback for browsers without roundRect support
+                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    }
+                    ctx.clip();
+                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    ctx.restore();
+                }
+                else {
+                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                }
             }
         };
         vue.onMounted(generate);
-        vue.onUpdated(generate);
+        vue.watch(props, generate, { deep: true });
         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.6.0
+ * qrcode.vue v3.7.1
  * 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, onUpdated, h, onMounted, Fragment } from 'vue';
+import { defineComponent, ref, watch, h, onMounted, Fragment } from 'vue';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -906,6 +906,9 @@ var qrcodegen;
 var QR = qrcodegen;
 
 var defaultErrorCorrectLevel = 'L';
+var DEFAULT_QR_SIZE = 100;
+var DEFAULT_MARGIN = 0;
+var DEFAULT_IMAGE_SIZE_RATIO = 0.1;
 var ErrorCorrectLevelMap = {
     L: QR.QrCode.Ecc.LOW,
     M: QR.QrCode.Ecc.MEDIUM,
@@ -925,16 +928,52 @@ 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 ops = [];
+    var path = '';
     modules.forEach(function (row, y) {
         var start = null;
         row.forEach(function (cell, x) {
             if (!cell && start !== null) {
                 // M0 0h7v1H0z injects the space with the move and drops the comma,
                 // saving a char per operation
-                ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+                path += "M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z");
                 start = null;
                 return;
             }
@@ -947,11 +986,11 @@ function generatePath(modules, margin) {
                 }
                 if (start === null) {
                     // Just a single dark module.
-                    ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+                    path += "M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z");
                 }
                 else {
                     // Otherwise finish the current line.
-                    ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+                    path += "M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z");
                 }
                 return;
             }
@@ -960,17 +999,18 @@ function generatePath(modules, margin) {
             }
         });
     });
-    return ops.join('');
+    return path;
 }
 function getImageSettings(cells, size, margin, imageSettings) {
     var width = imageSettings.width, height = imageSettings.height, imageX = imageSettings.x, imageY = imageSettings.y;
     var numCells = cells.length + margin * 2;
-    var defaultSize = Math.floor(size * 0.1);
+    var defaultSize = Math.floor(size * DEFAULT_IMAGE_SIZE_RATIO);
     var scale = numCells / size;
     var w = (width || defaultSize) * scale;
     var h = (height || defaultSize) * scale;
     var x = imageX == null ? cells.length / 2 - w / 2 : imageX * scale;
     var y = imageY == null ? cells.length / 2 - h / 2 : imageY * scale;
+    var borderRadius = (imageSettings.borderRadius || 0) * scale;
     var excavation = null;
     if (imageSettings.excavate) {
         var floorX = Math.floor(x);
@@ -979,18 +1019,30 @@ function getImageSettings(cells, size, margin, imageSettings) {
         var ceilH = Math.ceil(h + y - floorY);
         excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
     }
-    return { x: x, y: y, h: h, w: w, excavation: excavation };
+    return { x: x, y: y, h: h, w: w, borderRadius: borderRadius, excavation: excavation };
 }
-function excavateModules(modules, excavation) {
-    return modules.slice().map(function (row, y) {
-        if (y < excavation.y || y >= excavation.y + excavation.h) {
-            return row;
-        }
+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 (x < excavation.x || x >= excavation.x + excavation.w) {
+            if (!cell)
                 return cell;
-            }
-            return false;
+            var inExcavation = isPointInRoundedRect(x + 0.5, y + 0.5, excavation.x, excavation.y, excavation.w, excavation.h, borderRadius);
+            return inExcavation ? false : cell;
         });
     });
 }
@@ -1002,7 +1054,7 @@ var QRCodeProps = {
     },
     size: {
         type: Number,
-        default: 100,
+        default: DEFAULT_QR_SIZE,
     },
     level: {
         type: String,
@@ -1020,7 +1072,7 @@ var QRCodeProps = {
     margin: {
         type: Number,
         required: false,
-        default: 0,
+        default: DEFAULT_MARGIN,
     },
     imageSettings: {
         type: Object,
@@ -1061,7 +1113,7 @@ var QrcodeSvg = defineComponent({
     setup: function (props) {
         var numCells = ref(0);
         var fgPath = ref('');
-        var imageProps;
+        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;
@@ -1070,14 +1122,15 @@ var QrcodeSvg = defineComponent({
             numCells.value = cells.length + margin * 2;
             if (props.imageSettings.src) {
                 var imageSettings = getImageSettings(cells, props.size, margin, props.imageSettings);
-                imageProps = {
+                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);
+                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
                 }
             }
             // Drawing strategy: instead of a rect per module, we're going to create a
@@ -1088,6 +1141,7 @@ var QrcodeSvg = defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var qrGradientId = 'qrcode.vue-gradient';
         var renderGradient = function () {
             if (!props.gradient)
                 return null;
@@ -1105,7 +1159,7 @@ var QrcodeSvg = defineComponent({
                     fx: '50%',
                     fy: '50%',
                 };
-            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+            return h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: qrGradientId }, gradientProps), [
                 h('stop', {
                     offset: '0%',
                     style: { stopColor: props.gradientStartColor },
@@ -1116,8 +1170,26 @@ var QrcodeSvg = defineComponent({
                 }),
             ]);
         };
+        var qrLogoClipPathId = 'qrcode.vue-logo-clip-path';
+        var renderClipPath = function () {
+            var borderRadius = imageProps.value.borderRadius;
+            if (!props.imageSettings.src)
+                return null;
+            if (borderRadius <= 0)
+                return null;
+            return h('clipPath', { id: qrLogoClipPathId }, [
+                h('rect', {
+                    x: imageProps.value.x,
+                    y: imageProps.value.y,
+                    width: imageProps.value.width,
+                    height: imageProps.value.height,
+                    rx: borderRadius,
+                    ry: borderRadius,
+                }),
+            ]);
+        };
         generate();
-        onUpdated(generate);
+        watch(props, generate, { deep: true });
         return function () { return h('svg', {
             width: props.size,
             height: props.size,
@@ -1125,17 +1197,17 @@ var QrcodeSvg = defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            h('defs', {}, [renderGradient()]),
+            h('defs', {}, [renderGradient(), renderClipPath()]),
             h('rect', {
                 width: '100%',
                 height: '100%',
                 fill: props.background,
             }),
             h('path', {
-                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                fill: props.gradient ? "url(#".concat(qrGradientId, ")") : props.foreground,
                 d: fgPath.value,
             }),
-            props.imageSettings.src && h('image', __assign({ href: props.imageSettings.src }, imageProps)),
+            props.imageSettings.src && h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps.value), (imageProps.value.borderRadius > 0 ? { 'clip-path': "url(#".concat(qrLogoClipPathId, ")") } : {}))),
         ]); };
     },
 });
@@ -1160,7 +1232,7 @@ var QrcodeCanvas = defineComponent({
             var cells = QR.QrCode.encodeText(value, ErrorCorrectLevelMap[level]).getModules();
             var numCells = cells.length + margin * 2;
             var image = imageRef.value;
-            var imageProps = { x: 0, y: 0, width: 0, height: 0 };
+            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);
@@ -1169,12 +1241,13 @@ var QrcodeCanvas = defineComponent({
                     y: imageSettings.y + margin,
                     width: imageSettings.w,
                     height: imageSettings.h,
+                    borderRadius: imageSettings.borderRadius,
                 };
                 if (imageSettings.excavation) {
-                    cells = excavateModules(cells, imageSettings.excavation);
+                    cells = excavateModules(cells, imageSettings.excavation, imageSettings.borderRadius);
                 }
             }
-            var devicePixelRatio = window.devicePixelRatio || 1;
+            var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
             var scale = (size / numCells) * devicePixelRatio;
             canvas.height = canvas.width = size * devicePixelRatio;
             ctx.scale(scale, scale);
@@ -1208,11 +1281,28 @@ var QrcodeCanvas = defineComponent({
                 });
             }
             if (showImage) {
-                ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                var borderRadius = imageProps.borderRadius;
+                if (borderRadius > 0) {
+                    ctx.save();
+                    ctx.beginPath();
+                    if (ctx.roundRect) {
+                        ctx.roundRect(imageProps.x, imageProps.y, imageProps.width, imageProps.height, borderRadius);
+                    }
+                    else {
+                        // Fallback for browsers without roundRect support
+                        ctx.rect(imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    }
+                    ctx.clip();
+                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                    ctx.restore();
+                }
+                else {
+                    ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                }
             }
         };
         onMounted(generate);
-        onUpdated(generate);
+        watch(props, generate, { deep: true });
         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/dist/rstest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@rstest/core").RstestConfig;
+export default _default;

package/dist/{index.d.ts → src/index.d.ts}

@@ -9,6 +9,7 @@ export type ImageSettings = {
     height: number;
     width: number;
     excavate?: boolean;
+    borderRadius?: number;
 };
 export declare const QrcodeSvg: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     value: {