w-vue3-watermark 1.0.5 → 1.0.7

package/README.md

@@ -0,0 +1,52 @@
+## 安装
+
+```bash
+# npm 安装
+npm install w-vue3-watermark
+
+# yarn 安装
+yarn add w-vue3-watermark
+```
+
+## 使用
+
+```bash
+# 引入组件
+import { createApp } from 'vue'
+import watermark from 'w-vue3-watermark'
+
+# 注册组件
+createApp(App).use(watermark).mount('xxxx')
+
+# 组件使用
+<watermark
+  :waterName="水印内容"
+  :waterFontSize="水印字体大小"
+  :waterFontWeight="水印字体粗细"
+  :waterGap="水印重复的间隔"
+  :waterRotate="水印倾斜角度"
+  :waterFontFamily="水印字体"
+  :waterFontColor="水印字体颜色"
+  :shadowColor="水印阴影颜色"
+  :shadowOffsetX="阴影水平偏移"
+  :shadowOffsetY="阴影垂直偏移"
+  :shadowBlur="阴影模糊半径"
+/>
+
+# 参数默认值
+> 参数默认值说明
+
+| 字段   | 解释                                 | 默认值 | 类型 |
+| -------- | ------------------------------------ | ---- | ---- |
+| waterName | 水印内容                             | -    | [string, array] |
+| waterFontSize | 水印字体大小                         | 20 | number |
+| waterFontWeight | 水印字体粗细                         | 700 | number |
+| waterGap | 水印重复的间隔                         | 20 | number |
+| waterRotate | 水印倾斜角度                         | 30 | number |
+| waterFontFamily | 水印字体                             | Microsoft Yahei    | string |
+| waterFontColor | 水印字体颜色                         | rgba(255, 255, 255, 1) | string |
+| shadowColor | 水印阴影颜色                         | rgba(61, 61, 61, 0.25)   | string |
+| shadowOffsetX | 阴影水平偏移                         | 1.5 | number |
+| shadowOffsetY | 阴影垂直偏移                         | 1.5 | number |
+| shadowBlur | 阴影模糊半径                         | 0 | number |
+```

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "w-vue3-watermark",
-  "version": "1.0.5",
-  "description": "",
+  "version": "1.0.7",
+  "description": "vue3 水印组件",
   "main": "watermark.common.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": [],
+  "keywords": [
+    "vue3",
+    "watermark"
+  ],
   "author": "",
   "license": "ISC",
   "type": "commonjs"

package/watermark.common.js

@@ -69,6 +69,48 @@ var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue"
 ;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
 
 function useWatermarkBg(props) {
+  // 获取数组中宽度最长的文本和对应的最大宽度
+  function getLongestTextByWidth(textArr, ctx) {
+    // 边界处理：空数组直接返回空结果
+    if (!Array.isArray(textArr) || textArr.length === 0) {
+      return {
+        longestText: '',
+        maxWidth: 0
+      };
+    }
+
+    // 字符串直接返回宽度
+    if (typeof textArr === 'string') {
+      return {
+        longestText: textArr,
+        maxWidth: ctx.measureText(textArr).width
+      };
+    }
+
+    // 初始化变量：记录最长文本和最大宽度
+    let longestText = textArr[0];
+    let maxWidth = ctx.measureText(longestText).width;
+
+    // 遍历数组，逐个测量并比较宽度
+    for (let i = 1; i < textArr.length; i++) {
+      const currentText = textArr[i];
+      // 测量当前文本的宽度
+      const currentWidth = ctx.measureText(currentText).width;
+
+      // 比较当前宽度与已记录的最大宽度
+      if (currentWidth > maxWidth) {
+        // 更新最大宽度和对应的最长文本
+        maxWidth = currentWidth;
+        longestText = currentText;
+      }
+    }
+
+    // 返回结果（包含最长文本和最大宽度，方便后续使用）
+    return {
+      longestText,
+      maxWidth
+    };
+  }
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.computed)(() => {
     // 创建一个 canvas
     const canvas = document.createElement('canvas');
@@ -80,24 +122,30 @@ function useWatermarkBg(props) {
     // 获取文字宽度
     ctx.font = font;
     const {
-      width
-    } = ctx.measureText(props.waterName);
-    const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;
+      maxWidth
+    } = getLongestTextByWidth(props.waterName, ctx);
+    const canvasSize = Math.max(100, maxWidth) + props.waterGap * devicePixelRatio;
     canvas.width = canvasSize;
     canvas.height = canvasSize;
-    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.translate(0, canvas.height / 2);
     // 旋转 45 度让文字变倾斜
     ctx.rotate(Math.PI / 180 * -props.waterRotate);
     ctx.fillStyle = props.waterFontColor;
     ctx.font = font;
-    ctx.textAlign = 'center';
+    ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
     ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）
     ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px
     ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px
     ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）
     // 将文字画出来
-    ctx.fillText(props.waterName, 0, 0);
+    if (Array.isArray(props.waterName)) {
+      props.waterName.forEach((item, index) => {
+        ctx.fillText(item, 0, index * fontSize + index * 6);
+      });
+    } else {
+      ctx.fillText(props.waterName, 0, 0);
+    }
     return {
       base64: canvas.toDataURL(),
       size: canvasSize,
@@ -116,7 +164,7 @@ const __default__ = {
   props: {
     waterName: {
       // 传入水印的文本
-      type: String,
+      type: [String, Array],
       required: true,
       default: "watermark"
     },
@@ -138,7 +186,7 @@ const __default__ = {
     waterRotate: {
       // 水印倾斜
       type: Number,
-      default: 45
+      default: 30
     },
     waterFontFamily: {
       // 水印字体
@@ -153,12 +201,12 @@ const __default__ = {
     shadowColor: {
       // 阴影颜色
       type: String,
-      default: "rgba(61, 61, 61, 0.12)"
+      default: "rgba(61, 61, 61, 0.25)"
     },
     shadowOffsetX: {
       // 阴影水平偏移
       type: Number,
-      default: 5
+      default: 1.5
     },
     shadowOffsetY: {
       // 阴影垂直偏移

package/watermark.common.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.common.js","mappings":"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","sources":["webpack://vue3-watermark/webpack/bootstrap","webpack://vue3-watermark/webpack/runtime/define property getters","webpack://vue3-watermark/webpack/runtime/hasOwnProperty shorthand","webpack://vue3-watermark/webpack/runtime/make namespace object","webpack://vue3-watermark/webpack/runtime/publicPath","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue3-watermark/external commonjs2 {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://vue3-watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://vue3-watermark/./src/packages/water-mark/index.vue","webpack://vue3-watermark/./src/packages/water-mark/index.vue?e80c","webpack://vue3-watermark/./src/packages/water-mark/index.vue?ba69","webpack://vue3-watermark/./src/packages/index.js","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"vue\");","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { width } = ctx.measureText(props.waterName);\r\n    const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(canvas.width / 2, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'center';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    ctx.fillText(props.waterName, 0, 0);\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: String,\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 45,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.12)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
+{"version":3,"file":"watermark.common.js","mappings":"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","sources":["webpack://vue3-watermark/webpack/bootstrap","webpack://vue3-watermark/webpack/runtime/define property getters","webpack://vue3-watermark/webpack/runtime/hasOwnProperty shorthand","webpack://vue3-watermark/webpack/runtime/make namespace object","webpack://vue3-watermark/webpack/runtime/publicPath","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue3-watermark/external commonjs2 {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://vue3-watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://vue3-watermark/./src/packages/water-mark/index.vue","webpack://vue3-watermark/./src/packages/water-mark/index.vue?e80c","webpack://vue3-watermark/./src/packages/water-mark/index.vue?ba69","webpack://vue3-watermark/./src/packages/index.js","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"vue\");","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n      // 边界处理：空数组直接返回空结果\r\n      if (!Array.isArray(textArr) || textArr.length === 0) {\r\n          return {\r\n              longestText: '',\r\n              maxWidth: 0\r\n          };\r\n      }\r\n\r\n      // 字符串直接返回宽度\r\n      if (typeof textArr === 'string') {\r\n          return {\r\n              longestText: textArr,\r\n              maxWidth: ctx.measureText(textArr).width\r\n          };\r\n      }\r\n\r\n      // 初始化变量：记录最长文本和最大宽度\r\n      let longestText = textArr[0];\r\n      let maxWidth = ctx.measureText(longestText).width;\r\n\r\n      // 遍历数组，逐个测量并比较宽度\r\n      for (let i = 1; i < textArr.length; i++) {\r\n          const currentText = textArr[i];\r\n          // 测量当前文本的宽度\r\n          const currentWidth = ctx.measureText(currentText).width;\r\n\r\n          // 比较当前宽度与已记录的最大宽度\r\n          if (currentWidth > maxWidth) {\r\n              // 更新最大宽度和对应的最长文本\r\n              maxWidth = currentWidth;\r\n              longestText = currentText;\r\n          }\r\n      }\r\n\r\n      // 返回结果（包含最长文本和最大宽度，方便后续使用）\r\n      return {\r\n          longestText,\r\n          maxWidth\r\n      };\r\n  }\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n    const canvasSize = Math.max(100, maxWidth) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(0, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'left';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    if (Array.isArray(props.waterName)) {\r\n      props.waterName.forEach((item, index) => {\r\n        ctx.fillText(item, 0, index * fontSize + index * 6);\r\n      })\r\n    } else {\r\n      ctx.fillText(props.waterName, 0, 0);\r\n    }\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 30,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","forEach","item","index","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}

package/watermark.umd.js

@@ -113,6 +113,48 @@ var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(274);
 ;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
 
 function useWatermarkBg(props) {
+  // 获取数组中宽度最长的文本和对应的最大宽度
+  function getLongestTextByWidth(textArr, ctx) {
+    // 边界处理：空数组直接返回空结果
+    if (!Array.isArray(textArr) || textArr.length === 0) {
+      return {
+        longestText: '',
+        maxWidth: 0
+      };
+    }
+
+    // 字符串直接返回宽度
+    if (typeof textArr === 'string') {
+      return {
+        longestText: textArr,
+        maxWidth: ctx.measureText(textArr).width
+      };
+    }
+
+    // 初始化变量：记录最长文本和最大宽度
+    let longestText = textArr[0];
+    let maxWidth = ctx.measureText(longestText).width;
+
+    // 遍历数组，逐个测量并比较宽度
+    for (let i = 1; i < textArr.length; i++) {
+      const currentText = textArr[i];
+      // 测量当前文本的宽度
+      const currentWidth = ctx.measureText(currentText).width;
+
+      // 比较当前宽度与已记录的最大宽度
+      if (currentWidth > maxWidth) {
+        // 更新最大宽度和对应的最长文本
+        maxWidth = currentWidth;
+        longestText = currentText;
+      }
+    }
+
+    // 返回结果（包含最长文本和最大宽度，方便后续使用）
+    return {
+      longestText,
+      maxWidth
+    };
+  }
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
     // 创建一个 canvas
     const canvas = document.createElement('canvas');
@@ -124,24 +166,30 @@ function useWatermarkBg(props) {
     // 获取文字宽度
     ctx.font = font;
     const {
-      width
-    } = ctx.measureText(props.waterName);
-    const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;
+      maxWidth
+    } = getLongestTextByWidth(props.waterName, ctx);
+    const canvasSize = Math.max(100, maxWidth) + props.waterGap * devicePixelRatio;
     canvas.width = canvasSize;
     canvas.height = canvasSize;
-    ctx.translate(canvas.width / 2, canvas.height / 2);
+    ctx.translate(0, canvas.height / 2);
     // 旋转 45 度让文字变倾斜
     ctx.rotate(Math.PI / 180 * -props.waterRotate);
     ctx.fillStyle = props.waterFontColor;
     ctx.font = font;
-    ctx.textAlign = 'center';
+    ctx.textAlign = 'left';
     ctx.textBaseline = 'middle';
     ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）
     ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px
     ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px
     ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）
     // 将文字画出来
-    ctx.fillText(props.waterName, 0, 0);
+    if (Array.isArray(props.waterName)) {
+      props.waterName.forEach((item, index) => {
+        ctx.fillText(item, 0, index * fontSize + index * 6);
+      });
+    } else {
+      ctx.fillText(props.waterName, 0, 0);
+    }
     return {
       base64: canvas.toDataURL(),
       size: canvasSize,
@@ -160,7 +208,7 @@ const __default__ = {
   props: {
     waterName: {
       // 传入水印的文本
-      type: String,
+      type: [String, Array],
       required: true,
       default: "watermark"
     },
@@ -182,7 +230,7 @@ const __default__ = {
     waterRotate: {
       // 水印倾斜
       type: Number,
-      default: 45
+      default: 30
     },
     waterFontFamily: {
       // 水印字体
@@ -197,12 +245,12 @@ const __default__ = {
     shadowColor: {
       // 阴影颜色
       type: String,
-      default: "rgba(61, 61, 61, 0.12)"
+      default: "rgba(61, 61, 61, 0.25)"
     },
     shadowOffsetX: {
       // 阴影水平偏移
       type: Number,
-      default: 5
+      default: 1.5
     },
     shadowOffsetY: {
       // 阴影垂直偏移

package/watermark.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.umd.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?e25b","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { width } = ctx.measureText(props.waterName);\r\n    const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(canvas.width / 2, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'center';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    ctx.fillText(props.waterName, 0, 0);\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: String,\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 45,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.12)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
+{"version":3,"file":"watermark.umd.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?e25b","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n      // 边界处理：空数组直接返回空结果\r\n      if (!Array.isArray(textArr) || textArr.length === 0) {\r\n          return {\r\n              longestText: '',\r\n              maxWidth: 0\r\n          };\r\n      }\r\n\r\n      // 字符串直接返回宽度\r\n      if (typeof textArr === 'string') {\r\n          return {\r\n              longestText: textArr,\r\n              maxWidth: ctx.measureText(textArr).width\r\n          };\r\n      }\r\n\r\n      // 初始化变量：记录最长文本和最大宽度\r\n      let longestText = textArr[0];\r\n      let maxWidth = ctx.measureText(longestText).width;\r\n\r\n      // 遍历数组，逐个测量并比较宽度\r\n      for (let i = 1; i < textArr.length; i++) {\r\n          const currentText = textArr[i];\r\n          // 测量当前文本的宽度\r\n          const currentWidth = ctx.measureText(currentText).width;\r\n\r\n          // 比较当前宽度与已记录的最大宽度\r\n          if (currentWidth > maxWidth) {\r\n              // 更新最大宽度和对应的最长文本\r\n              maxWidth = currentWidth;\r\n              longestText = currentText;\r\n          }\r\n      }\r\n\r\n      // 返回结果（包含最长文本和最大宽度，方便后续使用）\r\n      return {\r\n          longestText,\r\n          maxWidth\r\n      };\r\n  }\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n    const canvasSize = Math.max(100, maxWidth) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(0, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'left';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    if (Array.isArray(props.waterName)) {\r\n      props.waterName.forEach((item, index) => {\r\n        ctx.fillText(item, 0, index * fontSize + index * 6);\r\n      })\r\n    } else {\r\n      ctx.fillText(props.waterName, 0, 0);\r\n    }\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 30,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","forEach","item","index","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}

package/watermark.umd.min.js

@@ -1,2 +1,2 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["watermark"]=t(require("vue")):e["watermark"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={274:function(t){t.exports=e}},r={};function o(e){var a=r[e];if(void 0!==a)return a.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,o),n.exports}!function(){o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){o.p=""}();var a={};return function(){if(o.r(a),o.d(a,{default:function(){return p}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(o.p=t[1])}var r=o(274);function n(e){return(0,r.computed)((()=>{const t=document.createElement("canvas"),r=window.devicePixelRatio||1,o=e.waterFontSize*r,a=e.waterFontWeight+" "+o+"px "+e.waterFontFamily,n=t.getContext("2d");n.font=a;const{width:u}=n.measureText(e.waterName),l=Math.max(100,u)+e.waterGap*r;return t.width=l,t.height=l,n.translate(t.width/2,t.height/2),n.rotate(Math.PI/180*-e.waterRotate),n.fillStyle=e.waterFontColor,n.font=a,n.textAlign="center",n.textBaseline="middle",n.shadowColor=e.shadowColor,n.shadowOffsetX=e.shadowOffsetX,n.shadowOffsetY=e.shadowOffsetY,n.shadowBlur=e.shadowBlur,n.fillText(e.waterName,0,0),{base64:t.toDataURL(),size:l,styleSize:l/r}}))}const u={name:"watermark"};var l=Object.assign(u,{props:{waterName:{type:String,required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:20},waterRotate:{type:Number,default:45},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterFontColor:{type:String,default:"rgba(255, 255, 255, 1)"},shadowColor:{type:String,default:"rgba(61, 61, 61, 0.12)"},shadowOffsetX:{type:Number,default:5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(e){const t=e,o=(0,r.ref)(null),a=(0,r.ref)(null),u=(0,r.ref)(null),l=n(t),{base64:i,styleSize:f}=l.value;(0,r.onMounted)((()=>{s(),u.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===a.value)return a.value.remove(),void s();if(t.target===a.value)return a.value.remove(),void s()}})),u.value.observe(o.value,{childList:!0,attributes:!0,subtree:!0})}));const s=()=>{a.value=document.createElement("div"),a.value.style.backgroundImage=`url(${i})`,a.value.style.inset=0,a.value.style.zIndex=9999,a.value.style.position="absolute",a.value.style.backgroundRepeat="repeat",a.value.style.backgroundSize=`${f}px ${f}px`,a.value.style.pointerEvents="none",o.value.appendChild(a.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:o},[(0,r.renderSlot)(e.$slots,"default")],512))}});const i=l;var f=i;const s=[f],d=function(e){s.forEach((t=>{e.component(t.name,t)}))};var c=d,p=c}(),a}()}));
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["watermark"]=t(require("vue")):e["watermark"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={274:function(t){t.exports=e}},r={};function a(e){var o=r[e];if(void 0!==o)return o.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,a),n.exports}!function(){a.d=function(e,t){for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){a.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){a.p=""}();var o={};return function(){if(a.r(o),a.d(o,{default:function(){return p}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(a.p=t[1])}var r=a(274);function n(e){function t(e,t){if(!Array.isArray(e)||0===e.length)return{longestText:"",maxWidth:0};if("string"===typeof e)return{longestText:e,maxWidth:t.measureText(e).width};let r=e[0],a=t.measureText(r).width;for(let o=1;o<e.length;o++){const n=e[o],u=t.measureText(n).width;u>a&&(a=u,r=n)}return{longestText:r,maxWidth:a}}return(0,r.computed)((()=>{const r=document.createElement("canvas"),a=window.devicePixelRatio||1,o=e.waterFontSize*a,n=e.waterFontWeight+" "+o+"px "+e.waterFontFamily,u=r.getContext("2d");u.font=n;const{maxWidth:l}=t(e.waterName,u),i=Math.max(100,l)+e.waterGap*a;return r.width=i,r.height=i,u.translate(0,r.height/2),u.rotate(Math.PI/180*-e.waterRotate),u.fillStyle=e.waterFontColor,u.font=n,u.textAlign="left",u.textBaseline="middle",u.shadowColor=e.shadowColor,u.shadowOffsetX=e.shadowOffsetX,u.shadowOffsetY=e.shadowOffsetY,u.shadowBlur=e.shadowBlur,Array.isArray(e.waterName)?e.waterName.forEach(((e,t)=>{u.fillText(e,0,t*o+6*t)})):u.fillText(e.waterName,0,0),{base64:r.toDataURL(),size:i,styleSize:i/a}}))}const u={name:"watermark"};var l=Object.assign(u,{props:{waterName:{type:[String,Array],required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:20},waterRotate:{type:Number,default:30},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterFontColor:{type:String,default:"rgba(255, 255, 255, 1)"},shadowColor:{type:String,default:"rgba(61, 61, 61, 0.25)"},shadowOffsetX:{type:Number,default:1.5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(e){const t=e,a=(0,r.ref)(null),o=(0,r.ref)(null),u=(0,r.ref)(null),l=n(t),{base64:i,styleSize:s}=l.value;(0,r.onMounted)((()=>{f(),u.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===o.value)return o.value.remove(),void f();if(t.target===o.value)return o.value.remove(),void f()}})),u.value.observe(a.value,{childList:!0,attributes:!0,subtree:!0})}));const f=()=>{o.value=document.createElement("div"),o.value.style.backgroundImage=`url(${i})`,o.value.style.inset=0,o.value.style.zIndex=9999,o.value.style.position="absolute",o.value.style.backgroundRepeat="repeat",o.value.style.backgroundSize=`${s}px ${s}px`,o.value.style.pointerEvents="none",a.value.appendChild(o.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:a},[(0,r.renderSlot)(e.$slots,"default")],512))}});const i=l;var s=i;const f=[s],d=function(e){f.forEach((t=>{e.component(t.name,t)}))};var c=d,p=c}(),o}()}));
 //# sourceMappingURL=watermark.umd.min.js.map

package/watermark.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"watermark.umd.min.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { width } = ctx.measureText(props.waterName);\r\n    const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(canvas.width / 2, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'center';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    ctx.fillText(props.waterName, 0, 0);\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: String,\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 45,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.12)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","onMounted","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","forEach","component"],"sourceRoot":""}
+{"version":3,"file":"watermark.umd.min.js","mappings":"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","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n  var currentScript = window.document.currentScript\n  if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n    var getCurrentScript = require('@soda/get-current-script')\n    currentScript = getCurrentScript()\n\n    // for backward compatibility, because previously we directly included the polyfill\n    if (!('currentScript' in document)) {\n      Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n    }\n  }\n\n  var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n  if (src) {\n    __webpack_public_path__ = src[1] // eslint-disable-line\n  }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n    // 获取数组中宽度最长的文本和对应的最大宽度\r\n    function getLongestTextByWidth(textArr, ctx) {\r\n      // 边界处理：空数组直接返回空结果\r\n      if (!Array.isArray(textArr) || textArr.length === 0) {\r\n          return {\r\n              longestText: '',\r\n              maxWidth: 0\r\n          };\r\n      }\r\n\r\n      // 字符串直接返回宽度\r\n      if (typeof textArr === 'string') {\r\n          return {\r\n              longestText: textArr,\r\n              maxWidth: ctx.measureText(textArr).width\r\n          };\r\n      }\r\n\r\n      // 初始化变量：记录最长文本和最大宽度\r\n      let longestText = textArr[0];\r\n      let maxWidth = ctx.measureText(longestText).width;\r\n\r\n      // 遍历数组，逐个测量并比较宽度\r\n      for (let i = 1; i < textArr.length; i++) {\r\n          const currentText = textArr[i];\r\n          // 测量当前文本的宽度\r\n          const currentWidth = ctx.measureText(currentText).width;\r\n\r\n          // 比较当前宽度与已记录的最大宽度\r\n          if (currentWidth > maxWidth) {\r\n              // 更新最大宽度和对应的最长文本\r\n              maxWidth = currentWidth;\r\n              longestText = currentText;\r\n          }\r\n      }\r\n\r\n      // 返回结果（包含最长文本和最大宽度，方便后续使用）\r\n      return {\r\n          longestText,\r\n          maxWidth\r\n      };\r\n  }\r\n  return computed(() => {\r\n    // 创建一个 canvas\r\n    const canvas = document.createElement('canvas');\r\n    const devicePixelRatio = window.devicePixelRatio || 1;\r\n    // 设置字体大小\r\n    const fontSize = props.waterFontSize * devicePixelRatio;\r\n    const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n    const ctx = canvas.getContext('2d');\r\n    // 获取文字宽度\r\n    ctx.font = font;\r\n    const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n    const canvasSize = Math.max(100, maxWidth) + props.waterGap * devicePixelRatio;\r\n    canvas.width = canvasSize;\r\n    canvas.height = canvasSize;\r\n    ctx.translate(0, canvas.height / 2);\r\n    // 旋转 45 度让文字变倾斜\r\n    ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n    ctx.fillStyle = props.waterFontColor;\r\n    ctx.font = font;\r\n    ctx.textAlign = 'left';\r\n    ctx.textBaseline = 'middle';\r\n    ctx.shadowColor = props.shadowColor; // 阴影颜色：半透明深灰色（推荐RGBA）\r\n    ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n    ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n    ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px（边缘柔和）\r\n    // 将文字画出来\r\n    if (Array.isArray(props.waterName)) {\r\n      props.waterName.forEach((item, index) => {\r\n        ctx.fillText(item, 0, index * fontSize + index * 6);\r\n      })\r\n    } else {\r\n      ctx.fillText(props.waterName, 0, 0);\r\n    }\r\n    return {\r\n      base64: canvas.toDataURL(),\r\n      size: canvasSize,\r\n      styleSize: canvasSize / devicePixelRatio,\r\n    };\r\n  });\r\n}\r\n","<template>\r\n  <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n<script>\r\nexport default {\r\n  name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n  waterName: {\r\n    // 传入水印的文本\r\n    type: [String, Array],\r\n    required: true,\r\n    default: \"watermark\",\r\n  },\r\n  waterFontSize: {\r\n    // 字体的大小\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterFontWeight: {\r\n    // 字体的粗细\r\n    type: Number,\r\n    default: 700,\r\n  },\r\n  waterGap: {\r\n    // 水印重复的间隔\r\n    type: Number,\r\n    default: 20,\r\n  },\r\n  waterRotate: {\r\n    // 水印倾斜\r\n    type: Number,\r\n    default: 30,\r\n  },\r\n  waterFontFamily: {\r\n    // 水印字体\r\n    type: String,\r\n    default: \"Microsoft Yahei\",\r\n  },\r\n  waterFontColor: {\r\n    // 水印字体颜色\r\n    type: String,\r\n    default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n  },\r\n  shadowColor: {\r\n    // 阴影颜色\r\n    type: String,\r\n    default: \"rgba(61, 61, 61, 0.25)\",\r\n  },\r\n  shadowOffsetX: {\r\n    // 阴影水平偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowOffsetY: {\r\n    // 阴影垂直偏移\r\n    type: Number,\r\n    default: 1.5,\r\n  },\r\n  shadowBlur: {\r\n    // 阴影模糊半径\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n  addDom();\r\n\r\n  // 添加dom监控器\r\n  k.value = new MutationObserver((records) => {\r\n    for (const record of records) {\r\n      for (const dom of record.removedNodes) {\r\n        if (dom === div.value) {\r\n          div.value.remove();\r\n          addDom();\r\n          return;\r\n        }\r\n      }\r\n      if (record.target === div.value) {\r\n        div.value.remove();\r\n        addDom();\r\n        return;\r\n      }\r\n    }\r\n  });\r\n  k.value.observe(watermarkContainer.value, {\r\n    childList: true,\r\n    attributes: true,\r\n    subtree: true,\r\n  });\r\n});\r\nconst addDom = () => {\r\n  div.value = document.createElement(\"div\");\r\n  div.value.style.backgroundImage = `url(${base64})`;\r\n  div.value.style.inset = 0;\r\n  div.value.style.zIndex = 9999;\r\n  div.value.style.position = \"absolute\";\r\n  div.value.style.backgroundRepeat = \"repeat\";\r\n  div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n  div.value.style.pointerEvents = \"none\";\r\n  watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n    components.forEach((k) => {\r\n        Vue.component(k.name, k)\r\n    })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","getLongestTextByWidth","textArr","ctx","Array","isArray","length","longestText","maxWidth","measureText","width","i","currentText","currentWidth","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","getContext","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","forEach","item","index","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","onMounted","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","component"],"sourceRoot":""}