npm - w-vue3-watermark - Versions diffs - 1.0.15 → 1.0.17 - Mend

w-vue3-watermark 1.0.15 → 1.0.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "w-vue3-watermark",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "vue3 水印组件",
   "main": "watermark.common.js",
   "scripts": {

package/watermark.common.js CHANGED Viewed

@@ -245,11 +245,24 @@ const __default__ = {
     const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 挂载的dom节点
     const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 水印节点
     const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 监听器
+    const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // base64
+    const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // styleSize
     const bg = useWatermarkBg(props); // 水印参数
-    const {
-      base64,
-      styleSize
-    } = bg.value;
+    base64.value = bg.value.base64;
+    styleSize.value = bg.value.styleSize;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(props, val => {
+      const bg = useWatermarkBg(val); // 水印参数
+      base64.value = bg.value.base64;
+      styleSize.value = bg.value.styleSize;
+      // 删除w-water-mask-bg class
+      document.querySelectorAll('.w-water-mask-bg').forEach(item => {
+        item.remove();
+      });
+      // 重新添加水印
+      addDom();
+    }, {
+      deep: true
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
       addDom();
@@ -278,12 +291,14 @@ const __default__ = {
     });
     const addDom = () => {
       div.value = document.createElement("div");
-      div.value.style.backgroundImage = `url(${base64})`;
+      div.value.style.backgroundImage = `url(${base64.value})`;
+      // 添加个class
+      div.value.classList.add('w-water-mask-bg');
       div.value.style.inset = 0;
       div.value.style.zIndex = 9999;
       div.value.style.position = "absolute";
       div.value.style.backgroundRepeat = "repeat";
-      div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
+      div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
       div.value.style.pointerEvents = "none";
       watermarkContainer.value.appendChild(div.value);
     };

package/watermark.common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"watermark.common.js","mappings":";;UAAA;UACA;;;;;WCDA;WACA;WACA;WACA;WACA,yCAAyC,wCAAwC;WACjF;WACA;WACA;;;;;WCPA,8CAA8C;;;;;WCA9C;WACA;WACA;WACA,uDAAuD,iBAAiB;WACxE;WACA,gDAAgD,aAAa;WAC7D;;;;;WCNA;;;;;;;;;;;;;;ACAA;AACA;;AAEA;AACA;AACA,MAAM,KAAuC,EAAE,yBAQ5C;;AAEH;AACA;AACA,IAAI,qBAAuB;AAC3B;AACA;;AAEA;AACA,kDAAe,IAAI;;;ACtBnB,IAAI,4DAA4B;;ACAD;AAEhB,SAASC,cAAcA,CAAEC,KAAK,EAAE;EAC3C;EACA,SAASC,qBAAqBA,CAACC,OAAO,EAAEC,GAAG,EAAE;IACzC;IACA,IAAI,CAACC,KAAK,CAACC,OAAO,CAACH,OAAO,CAAC,IAAIA,OAAO,CAACI,MAAM,KAAK,CAAC,EAAE;MACjD,OAAO;QACHC,WAAW,EAAE,EAAE;QACfC,QAAQ,EAAE;MACd,CAAC;IACL;;IAEA;IACA,IAAI,OAAON,OAAO,KAAK,QAAQ,EAAE;MAC7B,OAAO;QACHK,WAAW,EAAEL,OAAO;QACpBM,QAAQ,EAAEL,GAAG,CAACM,WAAW,CAACP,OAAO,CAAC,CAACQ;MACvC,CAAC;IACL;;IAEA;IACA,IAAIH,WAAW,GAAGL,OAAO,CAAC,CAAC,CAAC;IAC5B,IAAIM,QAAQ,GAAGL,GAAG,CAACM,WAAW,CAACF,WAAW,CAAC,CAACG,KAAK;;IAEjD;IACA,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGT,OAAO,CAACI,MAAM,EAAEK,CAAC,EAAE,EAAE;MACrC,MAAMC,WAAW,GAAGV,OAAO,CAACS,CAAC,CAAC;MAC9B,MAAME,YAAY,GAAGV,GAAG,CAACM,WAAW,CAACG,WAAW,CAAC,CAACF,KAAK;MAEvD,IAAIG,YAAY,GAAGL,QAAQ,EAAE;QACzBA,QAAQ,GAAGK,YAAY;QACvBN,WAAW,GAAGK,WAAW;MAC7B;IACJ;IAEA,OAAO;MACHL,WAAW;MACXC;IACJ,CAAC;EACL;EAEA,OAAOV,yEAAQ,CAAC,MAAM;IAClB,MAAMgB,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAC/C,MAAMC,gBAAgB,GAAGC,MAAM,CAACD,gBAAgB,IAAI,CAAC;IACrD,MAAME,QAAQ,GAAGnB,KAAK,CAACoB,aAAa,GAAGH,gBAAgB;IACvD,MAAMI,IAAI,GAAI,GAAErB,KAAK,CAACsB,eAAgB,IAAGH,QAAS,MAAKnB,KAAK,CAACuB,eAAgB,EAAC;IAC9E,MAAMpB,GAAG,GAAGW,MAAM,CAACU,UAAU,CAAC,IAAI,CAAC;IACnC,MAAMC,QAAQ,GAAGzB,KAAK,CAACyB,QAAQ,GAAGR,gBAAgB,CAAC,CAAC;;IAEpD;IACAd,GAAG,CAACkB,IAAI,GAAGA,IAAI;IACf,MAAM;MAAEb;IAAS,CAAC,GAAGP,qBAAqB,CAACD,KAAK,CAAC0B,SAAS,EAAEvB,GAAG,CAAC;;IAEhE;IACA;IACA,MAAMwB,cAAc,GAAGnB,QAAQ,CAAC,CAAC;IACjC,MAAMoB,eAAe,GAAGxB,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC0B,SAAS,CAAC,GAChD,CAAC1B,KAAK,CAAC0B,SAAS,CAACpB,MAAM,GAAG,CAAC,KAAKa,QAAQ,GAAG,CAAC,GAAGF,gBAAgB,CAAC,GAAGE,QAAQ,GAC3EA,QAAQ,CAAC,CAAC;IAChB;IACA,MAAMU,cAAc,GAAGC,IAAI,CAACC,GAAG,CAAC,GAAG,EAAED,IAAI,CAACE,IAAI,CAACL,cAAc,IAAI,CAAC,GAAGC,eAAe,IAAI,CAAC,CAAC,CAAC,GAAGH,QAAQ,GAAG,CAAC;IAC1GX,MAAM,CAACJ,KAAK,GAAGmB,cAAc;IAC7Bf,MAAM,CAACmB,MAAM,GAAGJ,cAAc;;IAE9B;IACA1B,GAAG,CAAC+B,SAAS,CAAC,CAAC,EAAE,CAAC,EAAEpB,MAAM,CAACJ,KAAK,EAAEI,MAAM,CAACmB,MAAM,CAAC;IAChD9B,GAAG,CAACkB,IAAI,GAAGA,IAAI;IACflB,GAAG,CAACgC,SAAS,GAAGnC,KAAK,CAACoC,cAAc;IACpCjC,GAAG,CAACkC,SAAS,GAAGrC,KAAK,CAACsC,cAAc;IACpCnC,GAAG,CAACoC,YAAY,GAAG,QAAQ;IAC3BpC,GAAG,CAACqC,WAAW,GAAGxC,KAAK,CAACwC,WAAW;IACnCrC,GAAG,CAACsC,aAAa,GAAGzC,KAAK,CAACyC,aAAa;IACvCtC,GAAG,CAACuC,aAAa,GAAG1C,KAAK,CAAC0C,aAAa;IACvCvC,GAAG,CAACwC,UAAU,GAAG3C,KAAK,CAAC2C,UAAU;;IAEjC;IACA;IACA;IACA,MAAMC,UAAU,GAAGnB,QAAQ,CAAC,CAAC;IAC7BtB,GAAG,CAAC0C,SAAS,CAACD,UAAU,EAAE9B,MAAM,CAACmB,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;;IAE9C;IACA9B,GAAG,CAAC2C,MAAM,CAAEhB,IAAI,CAACiB,EAAE,GAAG,GAAG,GAAI,CAAC/C,KAAK,CAACgD,WAAW,CAAC;;IAEhD;IACA,IAAI5C,KAAK,CAACC,OAAO,CAACL,KAAK,CAAC0B,SAAS,CAAC,EAAE;MAChC1B,KAAK,CAAC0B,SAAS,CAACuB,OAAO,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAK;QACrC;QACA,MAAMC,WAAW,GAAGjC,QAAQ,GAAG,CAAC,GAAGF,gBAAgB;QACnD;QACAd,GAAG,CAACkD,QAAQ,CAACH,IAAI,EAAE,CAAC,EAAEC,KAAK,GAAGC,WAAW,CAAC;MAC9C,CAAC,CAAC;IACN,CAAC,MAAM;MACH;MACAjD,GAAG,CAACkD,QAAQ,CAACrD,KAAK,CAAC0B,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;IACvC;;IAEA;IACA,OAAO;MACH4B,MAAM,EAAExC,MAAM,CAACyC,SAAS,CAAC,CAAC;MAC1BC,IAAI,EAAE3B,cAAc;MACpB4B,SAAS,EAAE5B,cAAc,GAAGZ;IAChC,CAAC;EACL,CAAC,CAAC;AACN;;;AC7FkD;AACD;AAPjD,MAAA2C,WAAA,GAAe;EACbC,IAAI,EAAE;AACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMD,MAAM7D,KAAK,GAAG8D,OA8DZ;IAEF,MAAMC,kBAAkB,GAAGJ,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACtC,MAAMK,GAAG,GAAGL,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACvB,MAAMM,CAAC,GAAGN,oEAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACrB,MAAMO,EAAE,GAAGnE,cAAc,CAACC,KAAK,CAAC,CAAC,CAAC;IAClC,MAAM;MAAEsD,MAAM;MAAEG;IAAU,CAAC,GAAGS,EAAE,CAACC,KAAK;IAEtCT,0EAAS,CAAC,MAAM;MACdU,MAAM,CAAC,CAAC;;MAER;MACAH,CAAC,CAACE,KAAK,GAAG,IAAIE,gBAAgB,CAAEC,OAAO,IAAK;QAC1C,KAAK,MAAMC,MAAM,IAAID,OAAO,EAAE;UAC5B,KAAK,MAAME,GAAG,IAAID,MAAM,CAACE,YAAY,EAAE;YACrC,IAAID,GAAG,KAAKR,GAAG,CAACG,KAAK,EAAE;cACrBH,GAAG,CAACG,KAAK,CAACO,MAAM,CAAC,CAAC;cAClBN,MAAM,CAAC,CAAC;cACR;YACF;UACF;UACA,IAAIG,MAAM,CAACI,MAAM,KAAKX,GAAG,CAACG,KAAK,EAAE;YAC/BH,GAAG,CAACG,KAAK,CAACO,MAAM,CAAC,CAAC;YAClBN,MAAM,CAAC,CAAC;YACR;UACF;QACF;MACF,CAAC,CAAC;MACFH,CAAC,CAACE,KAAK,CAACS,OAAO,CAACb,kBAAkB,CAACI,KAAK,EAAE;QACxCU,SAAS,EAAE,IAAI;QACfC,UAAU,EAAE,IAAI;QAChBC,OAAO,EAAE;MACX,CAAC,CAAC;IACJ,CAAC,CAAC;IACF,MAAMX,MAAM,GAAGA,CAAA,KAAM;MACnBJ,GAAG,CAACG,KAAK,GAAGpD,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;MACzCgD,GAAG,CAACG,KAAK,CAACa,KAAK,CAACC,eAAe,GAAI,OAAM3B,MAAO,GAAE;MAClDU,GAAG,CAACG,KAAK,CAACa,KAAK,CAACE,KAAK,GAAG,CAAC;MACzBlB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACG,MAAM,GAAG,IAAI;MAC7BnB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACI,QAAQ,GAAG,UAAU;MACrCpB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACK,gBAAgB,GAAG,QAAQ;MAC3CrB,GAAG,CAACG,KAAK,CAACa,KAAK,CAACM,cAAc,GAAI,GAAE7B,SAAU,MAAKA,SAAU,IAAG;MAChEO,GAAG,CAACG,KAAK,CAACa,KAAK,CAACO,aAAa,GAAG,MAAM;MACtCxB,kBAAkB,CAACI,KAAK,CAACqB,WAAW,CAACxB,GAAG,CAACG,KAAK,CAAC;IACjD,CAAC;;;;;;;;;;;ACxHqQ;;ACAnM;AACL;;AAE9D,oBAAoB,4CAAM;;AAE1B,+CAAe;;ACLgC;AAE/C,MAAMuB,UAAU,GAAG,CAAED,UAAS,CAAE;;AAEhC;AACA,MAAME,OAAO,GAAG,SAAAA,CAAUC,GAAG,EAAE;EAC3BF,UAAU,CAACzC,OAAO,CAAEgB,CAAC,IAAK;IACtB2B,GAAG,CAACC,SAAS,CAAC5B,CAAC,CAACJ,IAAI,EAAEI,CAAC,CAAC;EAC5B,CAAC,CAAC;AACN,CAAC;AAED,iDAAe0B,OAAO;;ACXE;AACA;AACxB,8CAAe,YAAG;AACI","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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","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":""}
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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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, watch } 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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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 base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n const bg = useWatermarkBg(val); // 水印参数\r\n base64.value = bg.value.base64\r\n styleSize.value = bg.value.styleSize\r\n // 删除w-water-mask-bg class\r\n document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n item.remove();\r\n })\r\n // 重新添加水印\r\n addDom();\r\n},{\r\n deep: true\r\n})\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.value})`;\r\n // 添加个class\r\n div.value.classList.add('w-water-mask-bg')\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.value}px ${styleSize.value}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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","onMounted","ref","watch","__default__","name","__props","watermarkContainer","div","k","bg","value","val","querySelectorAll","remove","addDom","deep","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}

package/watermark.umd.js CHANGED Viewed

@@ -289,11 +289,24 @@ const __default__ = {
     const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 挂载的dom节点
     const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 水印节点
     const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 监听器
+    const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // base64
+    const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // styleSize
     const bg = useWatermarkBg(props); // 水印参数
-    const {
-      base64,
-      styleSize
-    } = bg.value;
+    base64.value = bg.value.base64;
+    styleSize.value = bg.value.styleSize;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(props, val => {
+      const bg = useWatermarkBg(val); // 水印参数
+      base64.value = bg.value.base64;
+      styleSize.value = bg.value.styleSize;
+      // 删除w-water-mask-bg class
+      document.querySelectorAll('.w-water-mask-bg').forEach(item => {
+        item.remove();
+      });
+      // 重新添加水印
+      addDom();
+    }, {
+      deep: true
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       addDom();
@@ -322,12 +335,14 @@ const __default__ = {
     });
     const addDom = () => {
       div.value = document.createElement("div");
-      div.value.style.backgroundImage = `url(${base64})`;
+      div.value.style.backgroundImage = `url(${base64.value})`;
+      // 添加个class
+      div.value.classList.add('w-water-mask-bg');
       div.value.style.inset = 0;
       div.value.style.zIndex = 9999;
       div.value.style.position = "absolute";
       div.value.style.backgroundRepeat = "repeat";
-      div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
+      div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
       div.value.style.pointerEvents = "none";
       watermarkContainer.value.appendChild(div.value);
     };

package/watermark.umd.js.map CHANGED Viewed

	@@ -1 +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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","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":""}
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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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, watch } 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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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 base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n const bg = useWatermarkBg(val); // 水印参数\r\n base64.value = bg.value.base64\r\n styleSize.value = bg.value.styleSize\r\n // 删除w-water-mask-bg class\r\n document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n item.remove();\r\n })\r\n // 重新添加水印\r\n addDom();\r\n},{\r\n deep: true\r\n})\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.value})`;\r\n // 添加个class\r\n div.value.classList.add('w-water-mask-bg')\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.value}px ${styleSize.value}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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","onMounted","ref","watch","__default__","name","__props","watermarkContainer","div","k","bg","value","val","querySelectorAll","remove","addDom","deep","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","component"],"sourceRoot":""}

package/watermark.umd.min.js CHANGED Viewed

@@ -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 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"),l=e.waterGap*a;u.font=n;const{maxWidth:i}=t(e.waterName,u),s=i,f=Array.isArray(e.waterName)?(e.waterName.length-1)*(o+6*a)+o:o,d=Math.max(100,Math.sqrt(s**2+f**2))+2*l;r.width=d,r.height=d,u.clearRect(0,0,r.width,r.height),u.font=n,u.fillStyle=e.waterFontColor,u.textAlign=e.waterTextAlign,u.textBaseline="middle",u.shadowColor=e.shadowColor,u.shadowOffsetX=e.shadowOffsetX,u.shadowOffsetY=e.shadowOffsetY,u.shadowBlur=e.shadowBlur;const c=l;return u.translate(c,r.height/2),u.rotate(Math.PI/180*-e.waterRotate),Array.isArray(e.waterName)?e.waterName.forEach(((e,t)=>{const r=o+6*a;u.fillText(e,0,t*r)})):u.fillText(e.waterName,0,0),{base64:r.toDataURL(),size:d,styleSize:d/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:100},waterRotate:{type:Number,default:20},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterTextAlign:{type:String,default:"left"},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}()}));
+(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 m}}),"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],l=t.measureText(n).width;l>a&&(a=l,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}`,l=r.getContext("2d"),u=e.waterGap*a;l.font=n;const{maxWidth:i}=t(e.waterName,l),s=i,f=Array.isArray(e.waterName)?(e.waterName.length-1)*(o+6*a)+o:o,d=Math.max(100,Math.sqrt(s**2+f**2))+2*u;r.width=d,r.height=d,l.clearRect(0,0,r.width,r.height),l.font=n,l.fillStyle=e.waterFontColor,l.textAlign=e.waterTextAlign,l.textBaseline="middle",l.shadowColor=e.shadowColor,l.shadowOffsetX=e.shadowOffsetX,l.shadowOffsetY=e.shadowOffsetY,l.shadowBlur=e.shadowBlur;const c=u;return l.translate(c,r.height/2),l.rotate(Math.PI/180*-e.waterRotate),Array.isArray(e.waterName)?e.waterName.forEach(((e,t)=>{const r=o+6*a;l.fillText(e,0,t*r)})):l.fillText(e.waterName,0,0),{base64:r.toDataURL(),size:d,styleSize:d/a}}))}const l={name:"watermark"};var u=Object.assign(l,{props:{waterName:{type:[String,Array],required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:100},waterRotate:{type:Number,default:20},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterTextAlign:{type:String,default:"left"},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),l=(0,r.ref)(null),u=(0,r.ref)(null),i=(0,r.ref)(null),s=n(t);u.value=s.value.base64,i.value=s.value.styleSize,(0,r.watch)(t,(e=>{const t=n(e);u.value=t.value.base64,i.value=t.value.styleSize,document.querySelectorAll(".w-water-mask-bg").forEach((e=>{e.remove()})),f()}),{deep:!0}),(0,r.onMounted)((()=>{f(),l.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()}})),l.value.observe(a.value,{childList:!0,attributes:!0,subtree:!0})}));const f=()=>{o.value=document.createElement("div"),o.value.style.backgroundImage=`url(${u.value})`,o.value.classList.add("w-water-mask-bg"),o.value.style.inset=0,o.value.style.zIndex=9999,o.value.style.position="absolute",o.value.style.backgroundRepeat="repeat",o.value.style.backgroundSize=`${i.value}px ${i.value}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=u;var s=i;const f=[s],d=function(e){f.forEach((t=>{e.component(t.name,t)}))};var c=d,m=c}(),o}()}));
 //# sourceMappingURL=watermark.umd.min.js.map

package/watermark.umd.min.js.map CHANGED Viewed

	@@ -1 +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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","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":""}
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\n\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 const currentWidth = ctx.measureText(currentText).width;\r\n\r\n if (currentWidth > maxWidth) {\r\n maxWidth = currentWidth;\r\n longestText = currentText;\r\n }\r\n }\r\n\r\n return {\r\n longestText,\r\n maxWidth\r\n };\r\n }\r\n\r\n return computed(() => {\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio \|\| 1;\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 const waterGap = props.waterGap * devicePixelRatio; // 统一缓存适配后的间距\r\n\r\n // 第一步：先设置字体，测量文字最大宽度\r\n ctx.font = font;\r\n const { maxWidth } = getLongestTextByWidth(props.waterName, ctx);\r\n\r\n // 第二步：精准计算 Canvas 尺寸（平衡左右上下空间，无冗余浪费）\r\n // 核心：基于文字实际宽度+字体大小+间距，计算旋转后刚好容纳的画布尺寸\r\n const textTotalWidth = maxWidth; // 文字原始最大宽度\r\n const textTotalHeight = Array.isArray(props.waterName) \r\n ? (props.waterName.length - 1) * (fontSize + 6 * devicePixelRatio) + fontSize \r\n : fontSize; // 文字整体高度（多行文适配）\r\n // 画布基础尺寸：文字整体尺寸 + 双向间距（左右/上下各留一份gap，避免贴边）\r\n const baseCanvasSize = Math.max(100, Math.sqrt(textTotalWidth 2 + textTotalHeight 2)) + waterGap * 2;\r\n canvas.width = baseCanvasSize;\r\n canvas.height = baseCanvasSize;\r\n\r\n // 第三步：重置上下文，配置样式（保持原有功能不变）\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n ctx.font = font;\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.textAlign = props.waterTextAlign;\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor;\r\n ctx.shadowOffsetX = props.shadowOffsetX;\r\n ctx.shadowOffsetY = props.shadowOffsetY;\r\n ctx.shadowBlur = props.shadowBlur;\r\n\r\n // 第四步：核心修复——合理设置旋转中心+最小必要偏移（平衡左右上下）\r\n // 1. 旋转中心移至画布「左侧中间偏上」（而非中心），避免左右空间失衡\r\n // 2. 仅预留最小必要偏移（waterGap），既避免左上角截取，又不挤占右侧空间\r\n const safeOffset = waterGap; // 安全偏移量（最小必要，兼顾上下左右）\r\n ctx.translate(safeOffset, canvas.height / 2); // 水平仅偏移安全间距，垂直居中\r\n\r\n // 旋转水印（保持原有配置，无过度偏移）\r\n ctx.rotate((Math.PI / 180) * -props.waterRotate);\r\n\r\n // 第五步：绘制文字（基于安全偏移，无过度靠右，保证右侧完整）\r\n if (Array.isArray(props.waterName)) {\r\n props.waterName.forEach((item, index) => {\r\n // 垂直间距：适配设备像素比，保持原有排版逻辑\r\n const verticalGap = fontSize + 6 * devicePixelRatio;\r\n // 绘制起点：(0, indexverticalGap)，无额外水平偏移，避免右侧溢出\r\n ctx.fillText(item, 0, index verticalGap);\r\n });\r\n } else {\r\n // 单文本直接绘制，起点(0,0)，基于已有的safeOffset保证左上角不截取\r\n ctx.fillText(props.waterName, 0, 0);\r\n }\r\n\r\n // 返回水印信息\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: baseCanvasSize,\r\n styleSize: baseCanvasSize / devicePixelRatio,\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, watch } 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: 100,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterTextAlign: {\r\n // 水印对齐方式\r\n type: String,\r\n default: \"left\",\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 base64 = ref(null); // base64\r\nconst styleSize = ref(null); // styleSize\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nbase64.value = bg.value.base64\r\nstyleSize.value = bg.value.styleSize\r\n\r\nwatch(props,(val)=> {\r\n const bg = useWatermarkBg(val); // 水印参数\r\n base64.value = bg.value.base64\r\n styleSize.value = bg.value.styleSize\r\n // 删除w-water-mask-bg class\r\n document.querySelectorAll('.w-water-mask-bg').forEach(item => {\r\n item.remove();\r\n })\r\n // 重新添加水印\r\n addDom();\r\n},{\r\n deep: true\r\n})\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.value})`;\r\n // 添加个class\r\n div.value.classList.add('w-water-mask-bg')\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.value}px ${styleSize.value}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","waterGap","waterName","textTotalWidth","textTotalHeight","baseCanvasSize","Math","max","sqrt","height","clearRect","fillStyle","waterFontColor","textAlign","waterTextAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","safeOffset","translate","rotate","PI","waterRotate","forEach","item","index","verticalGap","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","watch","val","querySelectorAll","remove","addDom","deep","onMounted","MutationObserver","records","record","dom","removedNodes","target","observe","childList","attributes","subtree","style","backgroundImage","classList","add","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","component"],"sourceRoot":""}