w-vue3-watermark 1.0.15 → 1.0.16

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
  1. package/package.json +1 -1
  2. package/watermark.common.js +23 -6
  3. package/watermark.common.js.map +1 -1
  4. package/watermark.umd.js +23 -6
  5. package/watermark.umd.js.map +1 -1
  6. package/watermark.umd.min.js +1 -1
  7. package/watermark.umd.min.js.map +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "w-vue3-watermark",
3
- "version": "1.0.15",
3
+ "version": "1.0.16",
4
4
  "description": "vue3 水印组件",
5
5
  "main": "watermark.common.js",
6
6
  "scripts": {
package/watermark.common.js CHANGED
@@ -69,6 +69,8 @@ var external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject = require("vue"
69
69
  ;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
70
70
 
71
71
  function useWatermarkBg(props) {
72
+ console.log('props-----', props);
73
+
72
74
  // 获取数组中宽度最长的文本和对应的最大宽度
73
75
  function getLongestTextByWidth(textArr, ctx) {
74
76
  // 边界处理：空数组直接返回空结果
@@ -245,11 +247,24 @@ const __default__ = {
245
247
  const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 挂载的dom节点
246
248
  const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 水印节点
247
249
  const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // 监听器
250
+ const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // base64
251
+ const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(null); // styleSize
248
252
  const bg = useWatermarkBg(props); // 水印参数
249
- const {
250
- base64,
251
- styleSize
252
- } = bg.value;
253
+ base64.value = bg.value.base64;
254
+ styleSize.value = bg.value.styleSize;
255
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(props, val => {
256
+ const bg = useWatermarkBg(val); // 水印参数
257
+ base64.value = bg.value.base64;
258
+ styleSize.value = bg.value.styleSize;
259
+ // 删除w-water-mask-bg class
260
+ document.querySelectorAll('.w-water-mask-bg').forEach(item => {
261
+ item.remove();
262
+ });
263
+ // 重新添加水印
264
+ addDom();
265
+ }, {
266
+ deep: true
267
+ });
253
268
  (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onMounted)(() => {
254
269
  addDom();
255
270
 
@@ -278,12 +293,14 @@ const __default__ = {
278
293
  });
279
294
  const addDom = () => {
280
295
  div.value = document.createElement("div");
281
- div.value.style.backgroundImage = `url(${base64})`;
296
+ div.value.style.backgroundImage = `url(${base64.value})`;
297
+ // 添加个class
298
+ div.value.classList.add('w-water-mask-bg');
282
299
  div.value.style.inset = 0;
283
300
  div.value.style.zIndex = 9999;
284
301
  div.value.style.position = "absolute";
285
302
  div.value.style.backgroundRepeat = "repeat";
286
- div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
303
+ div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
287
304
  div.value.style.pointerEvents = "none";
288
305
  watermarkContainer.value.appendChild(div.value);
289
306
  };
package/watermark.common.js.map CHANGED
@@ -1 +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\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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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 console.log('props-----', props);\r\n \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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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","console","log","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
@@ -113,6 +113,8 @@ var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__(274);
113
113
  ;// CONCATENATED MODULE: ./src/packages/water-mark/useWatermarkBg.js
114
114
 
115
115
  function useWatermarkBg(props) {
116
+ console.log('props-----', props);
117
+
116
118
  // 获取数组中宽度最长的文本和对应的最大宽度
117
119
  function getLongestTextByWidth(textArr, ctx) {
118
120
  // 边界处理：空数组直接返回空结果
@@ -289,11 +291,24 @@ const __default__ = {
289
291
  const watermarkContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 挂载的dom节点
290
292
  const div = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 水印节点
291
293
  const k = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // 监听器
294
+ const base64 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // base64
295
+ const styleSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(null); // styleSize
292
296
  const bg = useWatermarkBg(props); // 水印参数
293
- const {
294
- base64,
295
- styleSize
296
- } = bg.value;
297
+ base64.value = bg.value.base64;
298
+ styleSize.value = bg.value.styleSize;
299
+ (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(props, val => {
300
+ const bg = useWatermarkBg(val); // 水印参数
301
+ base64.value = bg.value.base64;
302
+ styleSize.value = bg.value.styleSize;
303
+ // 删除w-water-mask-bg class
304
+ document.querySelectorAll('.w-water-mask-bg').forEach(item => {
305
+ item.remove();
306
+ });
307
+ // 重新添加水印
308
+ addDom();
309
+ }, {
310
+ deep: true
311
+ });
297
312
  (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
298
313
  addDom();
299
314
 
@@ -322,12 +337,14 @@ const __default__ = {
322
337
  });
323
338
  const addDom = () => {
324
339
  div.value = document.createElement("div");
325
- div.value.style.backgroundImage = `url(${base64})`;
340
+ div.value.style.backgroundImage = `url(${base64.value})`;
341
+ // 添加个class
342
+ div.value.classList.add('w-water-mask-bg');
326
343
  div.value.style.inset = 0;
327
344
  div.value.style.zIndex = 9999;
328
345
  div.value.style.position = "absolute";
329
346
  div.value.style.backgroundRepeat = "repeat";
330
- div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;
347
+ div.value.style.backgroundSize = `${styleSize.value}px ${styleSize.value}px`;
331
348
  div.value.style.pointerEvents = "none";
332
349
  watermarkContainer.value.appendChild(div.value);
333
350
  };
package/watermark.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"watermark.umd.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AACD,O;;;;;;;ACVA;;;;;;UCAA;UACA;;UAEA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;UACA;;UAEA;UACA;;UAEA;UACA;UACA;;;;;WCtBA;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;;;;;ACtBY;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,0DAAQ,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,qDAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACtC,MAAMK,GAAG,GAAGL,qDAAG,CAAC,IAAI,CAAC,CAAC,CAAC;IACvB,MAAMM,CAAC,GAAGN,qDAAG,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,2DAAS,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://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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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 console.log('props-----', props);\r\n \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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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","console","log","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
@@ -1,2 +1,2 @@
1
- (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}()}));
1
+ (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],l=t.measureText(n).width;l>a&&(a=l,r=n)}return{longestText:r,maxWidth:a}}return console.log("props-----",e),(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,p=c}(),o}()}));
2
2
  //# sourceMappingURL=watermark.umd.min.js.map
package/watermark.umd.min.js.map CHANGED
@@ -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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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 console.log('props-----', props);\r\n \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, index*verticalGap)，无额外水平偏移，避免右侧溢出\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","console","log","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":""}