qrcode.vue 3.5.1 → 3.7.0

package/README-zh_cn.md

@@ -6,7 +6,7 @@
 
 一款 Vue.js 二维码组件，同时支持 Vue 2 和 Vue 3.
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/main/LICENSE)
 
 ## 快速开始
 
@@ -76,13 +76,17 @@ createApp({
     :render-as="renderAs"
     :background="background"
     :foreground='foreground'
+    :gradient="gradient"
+    :gradient-type="gradientType"
+    :gradient-start-color="gradientStartColor"
+    :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
   />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
@@ -90,6 +94,8 @@ createApp({
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
+  
+  // 可传入二维码图片相关的属性，支持二维码 LOGO；
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -98,6 +104,12 @@ createApp({
     // y: 10,
     excavate: true,
   })
+
+  // 可传入渐变相关的属性，支持渐变：
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -168,11 +180,40 @@ createApp({
     // 这意味着嵌入图像重叠的任何模块都将使用背景颜色。
     // 使用此选项可确保图像周围的边缘清晰。嵌入透明图像时也很有用。
     excavate?: boolean,
+    borderRadius?: number, // 图片的边框圆角。
   }
   ```
 
 二维码图片 logo 配置。
 
+### `gradient`
+
+- 类型: `boolean`
+- 默认值: `false`
+
+启用二维码的渐变填充。
+
+### `gradient-type`
+
+- 类型: `GradientType('linear' | 'radial')`
+- 默认值: `linear`
+
+指定渐变类型。
+
+### `gradient-start-color`
+
+- 类型: `string`
+- 默认值: `#000000`
+
+渐变的起始颜色。
+
+### `gradient-end-color`
+
+- 类型: `string`
+- 默认值: `#ffffff`
+
+渐变的结束颜色。
+
 ### `class`
 
 - 类型：`string`
@@ -191,20 +232,20 @@ createApp({
 +    exports: 'named',
 ```
 
-
 现在在 common.js 和 cdn 直接引用 `QrcodeVue` 需要使用 `default` 字段：
 
 ```js
 const QrcodeVue = require('qrcode.vue').default
 const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
 ```
+
 ```html
 <!--With HTML-->
 <div id="root">
   <p class="flex space-x">
   <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
-<qrcode-canvas :value="test"></qrcode-canvas>
-</p>
+  <qrcode-canvas :value="test"></qrcode-canvas>
+  </p>
 <p><input v-model="test" /></p>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>

package/README.md

@@ -6,8 +6,6 @@
 
 A Vue.js component to generate [QRCode](https://en.wikipedia.org/wiki/QR_code). Both support Vue 2 and Vue 3.
 
-[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/scopewu/qrcode.vue/blob/master/LICENSE)
-
 [中文](./README-zh_cn.md) | [日本語](./README-ja.md)
 
 ## install
@@ -82,13 +80,17 @@ When you use the component with Vue 3 with `TypeScript`:
     :render-as="renderAs"
     :background="background"
     :foreground='foreground'
+    :gradient="gradient"
+    :gradient-type="gradientType"
+    :gradient-start-color="gradientStartColor"
+    :gradient-end-color="gradientEndColor"
     :image-settings='imageSettings'
   />
 </template>
 <script setup lang="ts">
   import { ref } from 'vue'
   import QrcodeVue from 'qrcode.vue'
-  import type { Level, RenderAs, ImageSettings } from 'qrcode.vue'
+  import type { Level, RenderAs, GradientType, ImageSettings } from 'qrcode.vue'
 
   const value = ref('qrcode')
   const level = ref<Level>('M')
@@ -96,6 +98,7 @@ When you use the component with Vue 3 with `TypeScript`:
   const background = ref('#ffffff')
   const foreground = ref('#000000')
   const margin = ref(0)
+  
   const imageSettings = ref<ImageSettings>({
     src: 'https://github.com/scopewu.png',
     width: 30,
@@ -104,6 +107,11 @@ When you use the component with Vue 3 with `TypeScript`:
     // y: 10,
     excavate: true,
   })
+
+  const gradient = ref(false)
+  const gradientType = ref<GradientType>('linear')
+  const gradientStartColor = ref('#000000')
+  const gradientEndColor = ref('#38bdf8')
 </script>
 ```
 
@@ -171,11 +179,40 @@ The foreground color of qrcode.
     height: number, // The height of image
     width: number,  // The height of image
     excavate?: boolean, // Whether or not to "excavate" the modules around the image.
+    borderRadius?: number, // The border radius of image.
   }
   ```
 
 The settings to support qrcode image logo.
 
+### `gradient`
+
+- Type: `boolean`
+- Default: `false`
+
+Enable gradient fill for the QR code.
+
+### `gradient-type`
+
+- Type: `GradientType('linear' | 'radial')`
+- Default: `linear`
+
+Specify the type of gradient.
+
+### `gradient-start-color`
+
+- Type: `string`
+- Default: `#000000`
+
+The start color of the gradient.
+
+### `gradient-end-color`
+
+- Type: `string`
+- Default: `#ffffff`
+
+The end color of the gradient.
+
 ### `class`
 
 - Type: `string`
@@ -200,14 +237,15 @@ Direct references to `QrcodeVue` in common.js and cdn now require the `default`
 const QrcodeVue = require('qrcode.vue').default
 const { default: QrcodeVue, QrcodeCanvas, QrcodeSvg } = require('qrcode.vue')
 ```
+
 ```html
 <!--With HTML-->
 <div id="root">
   <p class="flex space-x">
   <qrcode-vue :value="test" render-as="svg"></qrcode-vue>
-<qrcode-canvas :value="test"></qrcode-canvas>
-</p>
-<p><input v-model="test" /></p>
+  <qrcode-canvas :value="test"></qrcode-canvas>
+  </p>
+  <p><input v-model="test" /></p>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue@3.5/dist/vue.global.prod.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/qrcode.vue@3.5/dist/qrcode.vue.browser.min.js"></script>

package/dist/qrcode.vue.browser.js

@@ -1,5 +1,5 @@
 /*!
- * qrcode.vue v3.5.1
+ * qrcode.vue v3.7.0
  * A Vue.js component to generate QRCode. Both support Vue 2 and Vue 3
  * © 2017-PRESENT @scopewu(https://github.com/scopewu)
  * MIT License.
@@ -24,7 +24,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -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,12 +1003,12 @@ 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;
@@ -981,20 +1020,34 @@ function getImageSettings(cells, size, margin, imageSettings) {
         var floorY = Math.floor(y);
         var ceilW = Math.ceil(w + x - floorX);
         var ceilH = Math.ceil(h + y - floorY);
-        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH };
+        var borderRadius = (imageSettings.borderRadius || 0) * scale;
+        excavation = { x: floorX, y: floorY, w: ceilW, h: ceilH, borderRadius: borderRadius };
     }
     return { x: x, y: y, h: h, w: w, excavation: excavation };
 }
 function excavateModules(modules, excavation) {
-    return modules.slice().map(function (row, y) {
-        if (y < excavation.y || y >= excavation.y + excavation.h) {
-            return row;
-        }
+    var borderRadius = 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 +1059,7 @@ var QRCodeProps = {
     },
     size: {
         type: Number,
-        default: 100,
+        default: DEFAULT_QR_SIZE,
     },
     level: {
         type: String,
@@ -1024,13 +1077,34 @@ var QRCodeProps = {
     margin: {
         type: Number,
         required: false,
-        default: 0,
+        default: DEFAULT_MARGIN,
     },
     imageSettings: {
         type: Object,
         required: false,
         default: function () { return ({}); },
     },
+    gradient: {
+        type: Boolean,
+        required: false,
+        default: false,
+    },
+    gradientType: {
+        type: String,
+        required: false,
+        default: 'linear',
+        validator: function (t) { return ['linear', 'radial'].indexOf(t) > -1; },
+    },
+    gradientStartColor: {
+        type: String,
+        required: false,
+        default: '#000',
+    },
+    gradientEndColor: {
+        type: String,
+        required: false,
+        default: '#fff',
+    },
 };
 var QRCodeVueProps = __assign(__assign({}, QRCodeProps), { renderAs: {
         type: String,
@@ -1071,8 +1145,53 @@ var QrcodeSvg = vue.defineComponent({
             // For level 40, 31329 -> 2
             fgPath.value = generatePath(cells, margin);
         };
+        var renderGradient = function () {
+            if (!props.gradient)
+                return null;
+            var gradientProps = props.gradientType === 'linear'
+                ? {
+                    x1: '0%',
+                    y1: '0%',
+                    x2: '100%',
+                    y2: '100%',
+                }
+                : {
+                    cx: '50%',
+                    cy: '50%',
+                    r: '50%',
+                    fx: '50%',
+                    fy: '50%',
+                };
+            return vue.h(props.gradientType === 'linear' ? 'linearGradient' : 'radialGradient', __assign({ id: 'qr-gradient' }, gradientProps), [
+                vue.h('stop', {
+                    offset: '0%',
+                    style: { stopColor: props.gradientStartColor },
+                }),
+                vue.h('stop', {
+                    offset: '100%',
+                    style: { stopColor: props.gradientEndColor },
+                }),
+            ]);
+        };
+        var renderClipPath = function () {
+            var borderRadius = props.imageSettings.borderRadius || 0;
+            if (!props.imageSettings.src)
+                return null;
+            if (borderRadius <= 0)
+                return null;
+            return vue.h('clipPath', { id: 'qr-logo-clip' }, [
+                vue.h('rect', {
+                    x: imageProps.x,
+                    y: imageProps.y,
+                    width: imageProps.width,
+                    height: imageProps.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,
@@ -1080,12 +1199,17 @@ var QrcodeSvg = vue.defineComponent({
             xmlns: 'http://www.w3.org/2000/svg',
             viewBox: "0 0 ".concat(numCells.value, " ").concat(numCells.value),
         }, [
-            vue.h('path', {
+            vue.h('defs', {}, [renderGradient(), renderClipPath()]),
+            vue.h('rect', {
+                width: '100%',
+                height: '100%',
                 fill: props.background,
-                d: "M0,0 h".concat(numCells.value, "v").concat(numCells.value, "H0z"),
             }),
-            vue.h('path', { fill: props.foreground, d: fgPath.value }),
-            props.imageSettings.src && vue.h('image', __assign({ href: props.imageSettings.src }, imageProps)),
+            vue.h('path', {
+                fill: props.gradient ? 'url(#qr-gradient)' : props.foreground,
+                d: fgPath.value,
+            }),
+            props.imageSettings.src && vue.h('image', __assign(__assign({ href: props.imageSettings.src }, imageProps), (props.imageSettings.borderRadius ? { 'clip-path': 'url(#qr-logo-clip)' } : {}))),
         ]); };
     },
 });
@@ -1096,7 +1220,7 @@ var QrcodeCanvas = vue.defineComponent({
         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;
+            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 canvas = canvasEl.value;
@@ -1124,13 +1248,27 @@ var QrcodeCanvas = vue.defineComponent({
                     cells = excavateModules(cells, imageSettings.excavation);
                 }
             }
-            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);
             ctx.fillStyle = background;
             ctx.fillRect(0, 0, numCells, numCells);
-            ctx.fillStyle = foreground;
+            if (gradient) {
+                var grad = void 0;
+                if (gradientType === 'linear') {
+                    grad = ctx.createLinearGradient(0, 0, numCells, numCells);
+                }
+                else {
+                    grad = ctx.createRadialGradient(numCells / 2, numCells / 2, 0, numCells / 2, numCells / 2, numCells / 2);
+                }
+                grad.addColorStop(0, gradientStartColor);
+                grad.addColorStop(1, gradientEndColor);
+                ctx.fillStyle = grad;
+            }
+            else {
+                ctx.fillStyle = foreground;
+            }
             if (SUPPORTS_PATH2D) {
                 ctx.fill(new Path2D(generatePath(cells, margin)));
             }
@@ -1144,11 +1282,28 @@ var QrcodeCanvas = vue.defineComponent({
                 });
             }
             if (showImage) {
-                ctx.drawImage(image, imageProps.x, imageProps.y, imageProps.width, imageProps.height);
+                var borderRadius = props.imageSettings.borderRadius || 0;
+                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") }) })),
@@ -1164,8 +1319,20 @@ var QrcodeCanvas = vue.defineComponent({
 var QrcodeVue = vue.defineComponent({
     name: 'Qrcode',
     render: function () {
-        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings;
-        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, { value: value, size: size, margin: margin, level: level, background: background, foreground: foreground, imageSettings: imageSettings });
+        var _a = this.$props, renderAs = _a.renderAs, value = _a.value, size = _a.size, margin = _a.margin, level = _a.level, background = _a.background, foreground = _a.foreground, imageSettings = _a.imageSettings, gradient = _a.gradient, gradientType = _a.gradientType, gradientStartColor = _a.gradientStartColor, gradientEndColor = _a.gradientEndColor;
+        return vue.h(renderAs === 'svg' ? QrcodeSvg : QrcodeCanvas, {
+            value: value,
+            size: size,
+            margin: margin,
+            level: level,
+            background: background,
+            foreground: foreground,
+            imageSettings: imageSettings,
+            gradient: gradient,
+            gradientType: gradientType,
+            gradientStartColor: gradientStartColor,
+            gradientEndColor: gradientEndColor,
+        });
     },
     props: QRCodeVueProps,
 });