w-vue3-watermark 1.0.4 → 1.0.5

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "w-vue3-watermark",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "",
5
5
  "main": "watermark.common.js",
6
6
  "scripts": {
@@ -110,7 +110,7 @@ function useWatermarkBg(props) {
110
110
 
111
111
 
112
112
  const __default__ = {
113
- name: 'water-mark'
113
+ name: 'watermark'
114
114
  };
115
115
  /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
116
116
  props: {
@@ -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\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'water-mark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
1
+ {"version":3,"file":"watermark.common.js","mappings":"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","sources":["webpack://vue3-watermark/webpack/bootstrap","webpack://vue3-watermark/webpack/runtime/define property getters","webpack://vue3-watermark/webpack/runtime/hasOwnProperty shorthand","webpack://vue3-watermark/webpack/runtime/make namespace object","webpack://vue3-watermark/webpack/runtime/publicPath","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://vue3-watermark/external commonjs2 {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://vue3-watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://vue3-watermark/./src/packages/water-mark/index.vue","webpack://vue3-watermark/./src/packages/water-mark/index.vue?e80c","webpack://vue3-watermark/./src/packages/water-mark/index.vue?ba69","webpack://vue3-watermark/./src/packages/index.js","webpack://vue3-watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"vue\");","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
package/watermark.umd.js CHANGED
@@ -154,7 +154,7 @@ function useWatermarkBg(props) {
154
154
 
155
155
 
156
156
  const __default__ = {
157
- name: 'water-mark'
157
+ name: 'watermark'
158
158
  };
159
159
  /* harmony default export */ var water_markvue_type_script_setup_true_lang_js = (/*#__PURE__*/Object.assign(__default__, {
160
160
  props: {
@@ -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\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'water-mark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
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;AAChB,SAASC,cAAcA,CAAEC,KAAK,EAAE;EAC7C,OAAOF,0DAAQ,CAAC,MAAM;IACpB;IACA,MAAMG,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;IAC/C,MAAMC,gBAAgB,GAAGC,MAAM,CAACD,gBAAgB,IAAI,CAAC;IACrD;IACA,MAAME,QAAQ,GAAGN,KAAK,CAACO,aAAa,GAAGH,gBAAgB;IACvD,MAAMI,IAAI,GAAGR,KAAK,CAACS,eAAe,GAAG,GAAG,GAAGH,QAAQ,GAAG,KAAK,GAAGN,KAAK,CAACU,eAAe;IACnF,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IACnC;IACAD,GAAG,CAACH,IAAI,GAAGA,IAAI;IACf,MAAM;MAAEK;IAAM,CAAC,GAAGF,GAAG,CAACG,WAAW,CAACd,KAAK,CAACe,SAAS,CAAC;IAClD,MAAMC,UAAU,GAAGC,IAAI,CAACC,GAAG,CAAC,GAAG,EAAEL,KAAK,CAAC,GAAGb,KAAK,CAACmB,QAAQ,GAAGf,gBAAgB;IAC3EH,MAAM,CAACY,KAAK,GAAGG,UAAU;IACzBf,MAAM,CAACmB,MAAM,GAAGJ,UAAU;IAC1BL,GAAG,CAACU,SAAS,CAACpB,MAAM,CAACY,KAAK,GAAG,CAAC,EAAEZ,MAAM,CAACmB,MAAM,GAAG,CAAC,CAAC;IAClD;IACAT,GAAG,CAACW,MAAM,CAAEL,IAAI,CAACM,EAAE,GAAG,GAAG,GAAI,CAAEvB,KAAK,CAACwB,WAAW,CAAC;IACjDb,GAAG,CAACc,SAAS,GAAGzB,KAAK,CAAC0B,cAAc;IACpCf,GAAG,CAACH,IAAI,GAAGA,IAAI;IACfG,GAAG,CAACgB,SAAS,GAAG,QAAQ;IACxBhB,GAAG,CAACiB,YAAY,GAAG,QAAQ;IAC3BjB,GAAG,CAACkB,WAAW,GAAG7B,KAAK,CAAC6B,WAAW,CAAC,CAAC;IACrClB,GAAG,CAACmB,aAAa,GAAG9B,KAAK,CAAC8B,aAAa,CAAC,CAAC;IACzCnB,GAAG,CAACoB,aAAa,GAAG/B,KAAK,CAAC+B,aAAa,CAAC,CAAC;IACzCpB,GAAG,CAACqB,UAAU,GAAGhC,KAAK,CAACgC,UAAU,CAAC,CAAC;IACnC;IACArB,GAAG,CAACsB,QAAQ,CAACjC,KAAK,CAACe,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;IACnC,OAAO;MACLmB,MAAM,EAAEjC,MAAM,CAACkC,SAAS,CAAC,CAAC;MAC1BC,IAAI,EAAEpB,UAAU;MAChBqB,SAAS,EAAErB,UAAU,GAAGZ;IAC1B,CAAC;EACH,CAAC,CAAC;AACJ;;;ACvBkD;AACD;AAPjD,MAAAoC,WAAA,GAAe;EACbC,IAAI,EAAE;AACR,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAMD,MAAMzC,KAAK,GAAG0C,OAyDZ;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,GAAG/C,cAAc,CAACC,KAAK,CAAC,CAAC,CAAC;IAClC,MAAM;MAAEkC,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,GAAG7C,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;MACzCyC,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;;;;;;;;;;;ACnHqQ;;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,CAACG,OAAO,CAAE5B,CAAC,IAAK;IACtB2B,GAAG,CAACE,SAAS,CAAC7B,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\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","export { default } from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"; export * from \"-!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!../../../node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./index.vue?vue&type=script&setup=true&lang=js\"","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["computed","useWatermarkBg","props","canvas","document","createElement","devicePixelRatio","window","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","onMounted","ref","__default__","name","__props","watermarkContainer","div","k","bg","value","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","watermark","components","install","Vue","forEach","component"],"sourceRoot":""}
@@ -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 o(e){var a=r[e];if(void 0!==a)return a.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,o),n.exports}!function(){o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){o.p=""}();var a={};return function(){if(o.r(a),o.d(a,{default:function(){return p}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(o.p=t[1])}var r=o(274);function n(e){return(0,r.computed)((()=>{const t=document.createElement("canvas"),r=window.devicePixelRatio||1,o=e.waterFontSize*r,a=e.waterFontWeight+" "+o+"px "+e.waterFontFamily,n=t.getContext("2d");n.font=a;const{width:u}=n.measureText(e.waterName),l=Math.max(100,u)+e.waterGap*r;return t.width=l,t.height=l,n.translate(t.width/2,t.height/2),n.rotate(Math.PI/180*-e.waterRotate),n.fillStyle=e.waterFontColor,n.font=a,n.textAlign="center",n.textBaseline="middle",n.shadowColor=e.shadowColor,n.shadowOffsetX=e.shadowOffsetX,n.shadowOffsetY=e.shadowOffsetY,n.shadowBlur=e.shadowBlur,n.fillText(e.waterName,0,0),{base64:t.toDataURL(),size:l,styleSize:l/r}}))}const u={name:"water-mark"};var l=Object.assign(u,{props:{waterName:{type:String,required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:20},waterRotate:{type:Number,default:45},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterFontColor:{type:String,default:"rgba(255, 255, 255, 1)"},shadowColor:{type:String,default:"rgba(61, 61, 61, 0.12)"},shadowOffsetX:{type:Number,default:5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(e){const t=e,o=(0,r.ref)(null),a=(0,r.ref)(null),u=(0,r.ref)(null),l=n(t),{base64:i,styleSize:f}=l.value;(0,r.onMounted)((()=>{s(),u.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===a.value)return a.value.remove(),void s();if(t.target===a.value)return a.value.remove(),void s()}})),u.value.observe(o.value,{childList:!0,attributes:!0,subtree:!0})}));const s=()=>{a.value=document.createElement("div"),a.value.style.backgroundImage=`url(${i})`,a.value.style.inset=0,a.value.style.zIndex=9999,a.value.style.position="absolute",a.value.style.backgroundRepeat="repeat",a.value.style.backgroundSize=`${f}px ${f}px`,a.value.style.pointerEvents="none",o.value.appendChild(a.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:o},[(0,r.renderSlot)(e.$slots,"default")],512))}});const i=l;var f=i;const s=[f],d=function(e){s.forEach((t=>{e.component(t.name,t)}))};var c=d,p=c}(),a}()}));
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 o(e){var a=r[e];if(void 0!==a)return a.exports;var n=r[e]={exports:{}};return t[e](n,n.exports,o),n.exports}!function(){o.d=function(e,t){for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}}(),function(){o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)}}(),function(){o.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}}(),function(){o.p=""}();var a={};return function(){if(o.r(a),o.d(a,{default:function(){return p}}),"undefined"!==typeof window){var e=window.document.currentScript,t=e&&e.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);t&&(o.p=t[1])}var r=o(274);function n(e){return(0,r.computed)((()=>{const t=document.createElement("canvas"),r=window.devicePixelRatio||1,o=e.waterFontSize*r,a=e.waterFontWeight+" "+o+"px "+e.waterFontFamily,n=t.getContext("2d");n.font=a;const{width:u}=n.measureText(e.waterName),l=Math.max(100,u)+e.waterGap*r;return t.width=l,t.height=l,n.translate(t.width/2,t.height/2),n.rotate(Math.PI/180*-e.waterRotate),n.fillStyle=e.waterFontColor,n.font=a,n.textAlign="center",n.textBaseline="middle",n.shadowColor=e.shadowColor,n.shadowOffsetX=e.shadowOffsetX,n.shadowOffsetY=e.shadowOffsetY,n.shadowBlur=e.shadowBlur,n.fillText(e.waterName,0,0),{base64:t.toDataURL(),size:l,styleSize:l/r}}))}const u={name:"watermark"};var l=Object.assign(u,{props:{waterName:{type:String,required:!0,default:"watermark"},waterFontSize:{type:Number,default:20},waterFontWeight:{type:Number,default:700},waterGap:{type:Number,default:20},waterRotate:{type:Number,default:45},waterFontFamily:{type:String,default:"Microsoft Yahei"},waterFontColor:{type:String,default:"rgba(255, 255, 255, 1)"},shadowColor:{type:String,default:"rgba(61, 61, 61, 0.12)"},shadowOffsetX:{type:Number,default:5},shadowOffsetY:{type:Number,default:1.5},shadowBlur:{type:Number,default:0}},setup(e){const t=e,o=(0,r.ref)(null),a=(0,r.ref)(null),u=(0,r.ref)(null),l=n(t),{base64:i,styleSize:f}=l.value;(0,r.onMounted)((()=>{s(),u.value=new MutationObserver((e=>{for(const t of e){for(const e of t.removedNodes)if(e===a.value)return a.value.remove(),void s();if(t.target===a.value)return a.value.remove(),void s()}})),u.value.observe(o.value,{childList:!0,attributes:!0,subtree:!0})}));const s=()=>{a.value=document.createElement("div"),a.value.style.backgroundImage=`url(${i})`,a.value.style.inset=0,a.value.style.zIndex=9999,a.value.style.position="absolute",a.value.style.backgroundRepeat="repeat",a.value.style.backgroundSize=`${f}px ${f}px`,a.value.style.pointerEvents="none",o.value.appendChild(a.value)};return(e,t)=>((0,r.openBlock)(),(0,r.createElementBlock)("div",{class:"watermark-container",ref_key:"watermarkContainer",ref:o},[(0,r.renderSlot)(e.$slots,"default")],512))}});const i=l;var f=i;const s=[f],d=function(e){s.forEach((t=>{e.component(t.name,t)}))};var c=d,p=c}(),a}()}));
2
2
  //# sourceMappingURL=watermark.umd.min.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"watermark.umd.min.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,kBAAZC,SAA0C,kBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,QACR,oBAAXC,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIJ,GACe,kBAAZC,QACdA,QAAQ,aAAeD,EAAQG,QAAQ,QAEvCJ,EAAK,aAAeC,EAAQD,EAAK,OAClC,EATD,CASoB,qBAATO,KAAuBA,KAAOC,MAAO,SAASC,GACzD,O,+CCVAN,EAAOD,QAAUO,C,GCCbC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaX,QAGrB,IAAIC,EAASO,EAAyBE,GAAY,CAGjDV,QAAS,CAAC,GAOX,OAHAa,EAAoBH,GAAUT,EAAQA,EAAOD,QAASS,GAG/CR,EAAOD,OACf,E,WCrBAS,EAAoBK,EAAI,SAASd,EAASe,GACzC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEjB,EAASgB,IAC5EE,OAAOC,eAAenB,EAASgB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAG3E,C,eCPAP,EAAoBQ,EAAI,SAASK,EAAKC,GAAQ,OAAOL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,EAAO,C,eCCtGd,EAAoBkB,EAAI,SAAS3B,GACX,qBAAX4B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAenB,EAAS4B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAenB,EAAS,aAAc,CAAE8B,OAAO,GACvD,C,eCNArB,EAAoBsB,EAAI,E,+BCGxB,G,6CAAsB,qBAAXC,OAAwB,CACjC,IAAIC,EAAgBD,OAAOE,SAASD,cAWhCE,EAAMF,GAAiBA,EAAcE,IAAIC,MAAM,2BAC/CD,IACF,IAA0BA,EAAI,GAElC,CAGA,I,SCrBe,SAASE,EAAgBC,GACtC,OAAOC,EAAAA,EAAAA,WAAS,KAEd,MAAMC,EAASN,SAASO,cAAc,UAChCC,EAAmBV,OAAOU,kBAAoB,EAE9CC,EAAWL,EAAMM,cAAgBF,EACjCG,EAAOP,EAAMQ,gBAAkB,IAAMH,EAAW,MAAQL,EAAMS,gBAC9DC,EAAMR,EAAOS,WAAW,MAE9BD,EAAIH,KAAOA,EACX,MAAM,MAAEK,GAAUF,EAAIG,YAAYb,EAAMc,WAClCC,EAAaC,KAAKC,IAAI,IAAKL,GAASZ,EAAMkB,SAAWd,EAgB3D,OAfAF,EAAOU,MAAQG,EACfb,EAAOiB,OAASJ,EAChBL,EAAIU,UAAUlB,EAAOU,MAAQ,EAAGV,EAAOiB,OAAS,GAEhDT,EAAIW,OAAQL,KAAKM,GAAK,KAAStB,EAAMuB,aACrCb,EAAIc,UAAYxB,EAAMyB,eACtBf,EAAIH,KAAOA,EACXG,EAAIgB,UAAY,SAChBhB,EAAIiB,aAAe,SACnBjB,EAAIkB,YAAc5B,EAAM4B,YACxBlB,EAAImB,cAAgB7B,EAAM6B,cAC1BnB,EAAIoB,cAAgB9B,EAAM8B,cAC1BpB,EAAIqB,WAAa/B,EAAM+B,WAEvBrB,EAAIsB,SAAShC,EAAMc,UAAW,EAAG,GAC1B,CACLmB,OAAQ/B,EAAOgC,YACfC,KAAMpB,EACNqB,UAAWrB,EAAaX,EACzB,GAEL,CC7BA,MAAAiC,EAAe,CACbC,KAAM,c,0hBAOR,MAAMtC,EAAQuC,EA2DRC,GAAqBC,EAAAA,EAAAA,KAAI,MACzBC,GAAMD,EAAAA,EAAAA,KAAI,MACVE,GAAIF,EAAAA,EAAAA,KAAI,MACRG,EAAK7C,EAAeC,IACpB,OAAEiC,EAAM,UAAEG,GAAcQ,EAAGpD,OAEjCqD,EAAAA,EAAAA,YAAU,KACRC,IAGAH,EAAEnD,MAAQ,IAAIuD,kBAAkBC,IAC9B,IAAK,MAAMC,KAAUD,EAAS,CAC5B,IAAK,MAAME,KAAOD,EAAOE,aACvB,GAAID,IAAQR,EAAIlD,MAGd,OAFAkD,EAAIlD,MAAM4D,cACVN,IAIJ,GAAIG,EAAOI,SAAWX,EAAIlD,MAGxB,OAFAkD,EAAIlD,MAAM4D,cACVN,GAGJ,KAEFH,EAAEnD,MAAM8D,QAAQd,EAAmBhD,MAAO,CACxC+D,WAAW,EACXC,YAAY,EACZC,SAAS,GACT,IAEJ,MAAMX,EAASA,KACbJ,EAAIlD,MAAQI,SAASO,cAAc,OACnCuC,EAAIlD,MAAMkE,MAAMC,gBAAmB,OAAM1B,KACzCS,EAAIlD,MAAMkE,MAAME,MAAQ,EACxBlB,EAAIlD,MAAMkE,MAAMG,OAAS,KACzBnB,EAAIlD,MAAMkE,MAAMI,SAAW,WAC3BpB,EAAIlD,MAAMkE,MAAMK,iBAAmB,SACnCrB,EAAIlD,MAAMkE,MAAMM,eAAkB,GAAE5B,OAAeA,MACnDM,EAAIlD,MAAMkE,MAAMO,cAAgB,OAChCzB,EAAmBhD,MAAM0E,YAAYxB,EAAIlD,MAAM,E,gLC/GjD,MAAM2E,EAAc,EAEpB,QCHA,MAAMC,EAAa,CAAEC,GAGfC,EAAU,SAAUC,GACtBH,EAAWI,SAAS7B,IAChB4B,EAAIE,UAAU9B,EAAEL,KAAMK,EAAE,GAEhC,EAEA,QCTA,G","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'water-mark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","onMounted","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","forEach","component"],"sourceRoot":""}
1
+ {"version":3,"file":"watermark.umd.min.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,kBAAZC,SAA0C,kBAAXC,OACxCA,OAAOD,QAAUD,EAAQG,QAAQ,QACR,oBAAXC,QAAyBA,OAAOC,IAC9CD,OAAO,GAAIJ,GACe,kBAAZC,QACdA,QAAQ,aAAeD,EAAQG,QAAQ,QAEvCJ,EAAK,aAAeC,EAAQD,EAAK,OAClC,EATD,CASoB,qBAATO,KAAuBA,KAAOC,MAAO,SAASC,GACzD,O,+CCVAN,EAAOD,QAAUO,C,GCCbC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaX,QAGrB,IAAIC,EAASO,EAAyBE,GAAY,CAGjDV,QAAS,CAAC,GAOX,OAHAa,EAAoBH,GAAUT,EAAQA,EAAOD,QAASS,GAG/CR,EAAOD,OACf,E,WCrBAS,EAAoBK,EAAI,SAASd,EAASe,GACzC,IAAI,IAAIC,KAAOD,EACXN,EAAoBQ,EAAEF,EAAYC,KAASP,EAAoBQ,EAAEjB,EAASgB,IAC5EE,OAAOC,eAAenB,EAASgB,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAG3E,C,eCPAP,EAAoBQ,EAAI,SAASK,EAAKC,GAAQ,OAAOL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,EAAO,C,eCCtGd,EAAoBkB,EAAI,SAAS3B,GACX,qBAAX4B,QAA0BA,OAAOC,aAC1CX,OAAOC,eAAenB,EAAS4B,OAAOC,YAAa,CAAEC,MAAO,WAE7DZ,OAAOC,eAAenB,EAAS,aAAc,CAAE8B,OAAO,GACvD,C,eCNArB,EAAoBsB,EAAI,E,+BCGxB,G,6CAAsB,qBAAXC,OAAwB,CACjC,IAAIC,EAAgBD,OAAOE,SAASD,cAWhCE,EAAMF,GAAiBA,EAAcE,IAAIC,MAAM,2BAC/CD,IACF,IAA0BA,EAAI,GAElC,CAGA,I,SCrBe,SAASE,EAAgBC,GACtC,OAAOC,EAAAA,EAAAA,WAAS,KAEd,MAAMC,EAASN,SAASO,cAAc,UAChCC,EAAmBV,OAAOU,kBAAoB,EAE9CC,EAAWL,EAAMM,cAAgBF,EACjCG,EAAOP,EAAMQ,gBAAkB,IAAMH,EAAW,MAAQL,EAAMS,gBAC9DC,EAAMR,EAAOS,WAAW,MAE9BD,EAAIH,KAAOA,EACX,MAAM,MAAEK,GAAUF,EAAIG,YAAYb,EAAMc,WAClCC,EAAaC,KAAKC,IAAI,IAAKL,GAASZ,EAAMkB,SAAWd,EAgB3D,OAfAF,EAAOU,MAAQG,EACfb,EAAOiB,OAASJ,EAChBL,EAAIU,UAAUlB,EAAOU,MAAQ,EAAGV,EAAOiB,OAAS,GAEhDT,EAAIW,OAAQL,KAAKM,GAAK,KAAStB,EAAMuB,aACrCb,EAAIc,UAAYxB,EAAMyB,eACtBf,EAAIH,KAAOA,EACXG,EAAIgB,UAAY,SAChBhB,EAAIiB,aAAe,SACnBjB,EAAIkB,YAAc5B,EAAM4B,YACxBlB,EAAImB,cAAgB7B,EAAM6B,cAC1BnB,EAAIoB,cAAgB9B,EAAM8B,cAC1BpB,EAAIqB,WAAa/B,EAAM+B,WAEvBrB,EAAIsB,SAAShC,EAAMc,UAAW,EAAG,GAC1B,CACLmB,OAAQ/B,EAAOgC,YACfC,KAAMpB,EACNqB,UAAWrB,EAAaX,EACzB,GAEL,CC7BA,MAAAiC,EAAe,CACbC,KAAM,a,0hBAOR,MAAMtC,EAAQuC,EA2DRC,GAAqBC,EAAAA,EAAAA,KAAI,MACzBC,GAAMD,EAAAA,EAAAA,KAAI,MACVE,GAAIF,EAAAA,EAAAA,KAAI,MACRG,EAAK7C,EAAeC,IACpB,OAAEiC,EAAM,UAAEG,GAAcQ,EAAGpD,OAEjCqD,EAAAA,EAAAA,YAAU,KACRC,IAGAH,EAAEnD,MAAQ,IAAIuD,kBAAkBC,IAC9B,IAAK,MAAMC,KAAUD,EAAS,CAC5B,IAAK,MAAME,KAAOD,EAAOE,aACvB,GAAID,IAAQR,EAAIlD,MAGd,OAFAkD,EAAIlD,MAAM4D,cACVN,IAIJ,GAAIG,EAAOI,SAAWX,EAAIlD,MAGxB,OAFAkD,EAAIlD,MAAM4D,cACVN,GAGJ,KAEFH,EAAEnD,MAAM8D,QAAQd,EAAmBhD,MAAO,CACxC+D,WAAW,EACXC,YAAY,EACZC,SAAS,GACT,IAEJ,MAAMX,EAASA,KACbJ,EAAIlD,MAAQI,SAASO,cAAc,OACnCuC,EAAIlD,MAAMkE,MAAMC,gBAAmB,OAAM1B,KACzCS,EAAIlD,MAAMkE,MAAME,MAAQ,EACxBlB,EAAIlD,MAAMkE,MAAMG,OAAS,KACzBnB,EAAIlD,MAAMkE,MAAMI,SAAW,WAC3BpB,EAAIlD,MAAMkE,MAAMK,iBAAmB,SACnCrB,EAAIlD,MAAMkE,MAAMM,eAAkB,GAAE5B,OAAeA,MACnDM,EAAIlD,MAAMkE,MAAMO,cAAgB,OAChCzB,EAAmBhD,MAAM0E,YAAYxB,EAAIlD,MAAM,E,gLC/GjD,MAAM2E,EAAc,EAEpB,QCHA,MAAMC,EAAa,CAAEC,GAGfC,EAAU,SAAUC,GACtBH,EAAWI,SAAS7B,IAChB4B,EAAIE,UAAU9B,EAAEL,KAAMK,EAAE,GAEhC,EAEA,QCTA,G","sources":["webpack://watermark/webpack/universalModuleDefinition","webpack://watermark/external umd {\"commonjs\":\"vue\",\"commonjs2\":\"vue\",\"root\":\"Vue\"}","webpack://watermark/webpack/bootstrap","webpack://watermark/webpack/runtime/define property getters","webpack://watermark/webpack/runtime/hasOwnProperty shorthand","webpack://watermark/webpack/runtime/make namespace object","webpack://watermark/webpack/runtime/publicPath","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js","webpack://watermark/./src/packages/water-mark/useWatermarkBg.js","webpack://watermark/./src/packages/water-mark/index.vue","webpack://watermark/./src/packages/water-mark/index.vue?ba69","webpack://watermark/./src/packages/index.js","webpack://watermark/./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"vue\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"watermark\"] = factory(require(\"vue\"));\n\telse\n\t\troot[\"watermark\"] = factory(root[\"Vue\"]);\n})((typeof self !== 'undefined' ? self : this), function(__WEBPACK_EXTERNAL_MODULE__274__) {\nreturn ","module.exports = __WEBPACK_EXTERNAL_MODULE__274__;","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","__webpack_require__.p = \"\";","/* eslint-disable no-var */\n// This file is imported into lib/wc client bundles.\n\nif (typeof window !== 'undefined') {\n var currentScript = window.document.currentScript\n if (process.env.NEED_CURRENTSCRIPT_POLYFILL) {\n var getCurrentScript = require('@soda/get-current-script')\n currentScript = getCurrentScript()\n\n // for backward compatibility, because previously we directly included the polyfill\n if (!('currentScript' in document)) {\n Object.defineProperty(document, 'currentScript', { get: getCurrentScript })\n }\n }\n\n var src = currentScript && currentScript.src.match(/(.+\\/)[^/]+\\.js(\\?.*)?$/)\n if (src) {\n __webpack_public_path__ = src[1] // eslint-disable-line\n }\n}\n\n// Indicate to webpack that this file can be concatenated\nexport default null\n","import { computed } from 'vue';\r\nexport default function useWatermarkBg (props) {\r\n return computed(() => {\r\n // 创建一个 canvas\r\n const canvas = document.createElement('canvas');\r\n const devicePixelRatio = window.devicePixelRatio || 1;\r\n // 设置字体大小\r\n const fontSize = props.waterFontSize * devicePixelRatio;\r\n const font = props.waterFontWeight + ' ' + fontSize + 'px ' + props.waterFontFamily;\r\n const ctx = canvas.getContext('2d');\r\n // 获取文字宽度\r\n ctx.font = font;\r\n const { width } = ctx.measureText(props.waterName);\r\n const canvasSize = Math.max(100, width) + props.waterGap * devicePixelRatio;\r\n canvas.width = canvasSize;\r\n canvas.height = canvasSize;\r\n ctx.translate(canvas.width / 2, canvas.height / 2);\r\n // 旋转 45 度让文字变倾斜\r\n ctx.rotate((Math.PI / 180) * - props.waterRotate);\r\n ctx.fillStyle = props.waterFontColor;\r\n ctx.font = font;\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.shadowColor = props.shadowColor; // 阴影颜色:半透明深灰色(推荐RGBA)\r\n ctx.shadowOffsetX = props.shadowOffsetX; // 水平向右偏移 4px\r\n ctx.shadowOffsetY = props.shadowOffsetY; // 垂直向下偏移 4px\r\n ctx.shadowBlur = props.shadowBlur; // 阴影模糊半径 8px(边缘柔和)\r\n // 将文字画出来\r\n ctx.fillText(props.waterName, 0, 0);\r\n return {\r\n base64: canvas.toDataURL(),\r\n size: canvasSize,\r\n styleSize: canvasSize / devicePixelRatio,\r\n };\r\n });\r\n}\r\n","<template>\r\n <div class=\"watermark-container\" ref=\"watermarkContainer\">\r\n <slot></slot>\r\n </div>\r\n</template>\r\n<script>\r\nexport default {\r\n name: 'watermark',\r\n}\r\n</script>\r\n\r\n<script setup>\r\nimport { defineProps, onMounted, ref } from \"vue\";\r\nimport useWatermarkBg from \"./useWatermarkBg.js\";\r\nconst props = defineProps({\r\n waterName: {\r\n // 传入水印的文本\r\n type: String,\r\n required: true,\r\n default: \"watermark\",\r\n },\r\n waterFontSize: {\r\n // 字体的大小\r\n type: Number,\r\n default: 20,\r\n },\r\n waterFontWeight: {\r\n // 字体的粗细\r\n type: Number,\r\n default: 700,\r\n },\r\n waterGap: {\r\n // 水印重复的间隔\r\n type: Number,\r\n default: 20,\r\n },\r\n waterRotate: {\r\n // 水印倾斜\r\n type: Number,\r\n default: 45,\r\n },\r\n waterFontFamily: {\r\n // 水印字体\r\n type: String,\r\n default: \"Microsoft Yahei\",\r\n },\r\n waterFontColor: {\r\n // 水印字体颜色\r\n type: String,\r\n default: \"rgba(255, 255, 255, 1)\", // rgba(255, 255, 255, 0.2)\r\n },\r\n shadowColor: {\r\n // 阴影颜色\r\n type: String,\r\n default: \"rgba(61, 61, 61, 0.12)\",\r\n },\r\n shadowOffsetX: {\r\n // 阴影水平偏移\r\n type: Number,\r\n default: 5,\r\n },\r\n shadowOffsetY: {\r\n // 阴影垂直偏移\r\n type: Number,\r\n default: 1.5,\r\n },\r\n shadowBlur: {\r\n // 阴影模糊半径\r\n type: Number,\r\n default: 0,\r\n },\r\n});\r\n\r\nconst watermarkContainer = ref(null); // 挂载的dom节点\r\nconst div = ref(null); // 水印节点\r\nconst k = ref(null); // 监听器\r\nconst bg = useWatermarkBg(props); // 水印参数\r\nconst { base64, styleSize } = bg.value;\r\n\r\nonMounted(() => {\r\n addDom();\r\n\r\n // 添加dom监控器\r\n k.value = new MutationObserver((records) => {\r\n for (const record of records) {\r\n for (const dom of record.removedNodes) {\r\n if (dom === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n if (record.target === div.value) {\r\n div.value.remove();\r\n addDom();\r\n return;\r\n }\r\n }\r\n });\r\n k.value.observe(watermarkContainer.value, {\r\n childList: true,\r\n attributes: true,\r\n subtree: true,\r\n });\r\n});\r\nconst addDom = () => {\r\n div.value = document.createElement(\"div\");\r\n div.value.style.backgroundImage = `url(${base64})`;\r\n div.value.style.inset = 0;\r\n div.value.style.zIndex = 9999;\r\n div.value.style.position = \"absolute\";\r\n div.value.style.backgroundRepeat = \"repeat\";\r\n div.value.style.backgroundSize = `${styleSize}px ${styleSize}px`;\r\n div.value.style.pointerEvents = \"none\";\r\n watermarkContainer.value.appendChild(div.value);\r\n};\r\n</script>\r\n","import script from \"./index.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./index.vue?vue&type=script&setup=true&lang=js\"\n\nconst __exports__ = script;\n\nexport default __exports__","import watermark from './water-mark/index.vue';\r\n\r\nconst components = [ watermark ]\r\n\r\n// 注册组件\r\nconst install = function (Vue) {\r\n components.forEach((k) => {\r\n Vue.component(k.name, k)\r\n })\r\n}\r\n\r\nexport default install;","import './setPublicPath'\nimport mod from '~entry'\nexport default mod\nexport * from '~entry'\n"],"names":["root","factory","exports","module","require","define","amd","self","this","__WEBPACK_EXTERNAL_MODULE__274__","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","d","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","r","Symbol","toStringTag","value","p","window","currentScript","document","src","match","useWatermarkBg","props","computed","canvas","createElement","devicePixelRatio","fontSize","waterFontSize","font","waterFontWeight","waterFontFamily","ctx","getContext","width","measureText","waterName","canvasSize","Math","max","waterGap","height","translate","rotate","PI","waterRotate","fillStyle","waterFontColor","textAlign","textBaseline","shadowColor","shadowOffsetX","shadowOffsetY","shadowBlur","fillText","base64","toDataURL","size","styleSize","__default__","name","__props","watermarkContainer","ref","div","k","bg","onMounted","addDom","MutationObserver","records","record","dom","removedNodes","remove","target","observe","childList","attributes","subtree","style","backgroundImage","inset","zIndex","position","backgroundRepeat","backgroundSize","pointerEvents","appendChild","__exports__","components","watermark","install","Vue","forEach","component"],"sourceRoot":""}