UNPKG

tav-ui

Version:
1 lines 6.88 kB
{"version":3,"file":"useWatermark2.mjs","sources":["../../../../../../packages/hooks/web/useWatermark.ts"],"sourcesContent":["import { getCurrentInstance, onBeforeUnmount, ref, shallowRef, unref } from 'vue'\nimport { useRafThrottle } from '@tav-ui/utils/domUtils'\nimport { addResizeListener, removeResizeListener } from '@tav-ui/utils/event'\nimport { isDef } from '@tav-ui/utils/is'\nimport type { Ref } from 'vue'\n\nconst domSymbol = Symbol('watermark-dom')\nconst DEFAULT_FILL_STYLE = 'rgba(0, 0, 0, 0.1)'\nconst DEFAULT_WATER_MARKER_SIZE = {\n width: 300,\n height: 240,\n}\n\nexport function useWatermark({\n appendEl = ref(document.body) as Ref<HTMLElement | null>,\n color = DEFAULT_FILL_STYLE,\n size = DEFAULT_WATER_MARKER_SIZE,\n}) {\n const id = domSymbol.toString()\n const watermarkEl = shallowRef<HTMLElement>()\n\n const func = useRafThrottle(() => {\n const el = unref(appendEl)\n if (!el) return\n const { clientHeight: height, clientWidth: width } = el\n updateWatermark({ height, width })\n })\n\n const clear = () => {\n const domId = unref(watermarkEl)\n watermarkEl.value = undefined\n const el = unref(appendEl)\n if (!el) return\n domId && el.removeChild(domId)\n removeResizeListener(el, func)\n }\n\n function createBase64(str: string) {\n const can = document.createElement('canvas')\n // const height = 160;\n const { width, height } = size\n Object.assign(can, { width, height })\n\n const cans = can.getContext('2d')\n if (cans) {\n cans.rotate((-20 * Math.PI) / 120)\n cans.font = '15px Vedana'\n cans.fillStyle = color || 'rgba(0, 0, 0, 0.1)'\n cans.textAlign = 'left'\n cans.textBaseline = 'middle'\n cans.fillText(str, width / 20, height)\n }\n return can.toDataURL('image/png')\n }\n\n function updateWatermark(\n options: {\n width?: number\n height?: number\n str?: string\n } = {}\n ) {\n const el = unref(watermarkEl)\n if (!el) return\n if (isDef(options.width)) {\n // el.style.width = `${options.width}px`;\n el.style.width = `100%`\n }\n if (isDef(options.height)) {\n // el.style.height = `${options.height}px`;\n el.style.height = `100%`\n }\n if (isDef(options.str)) {\n el.style.background = `url(${createBase64(options.str)}) left top repeat`\n }\n }\n\n const createWatermark = (str: string) => {\n if (unref(watermarkEl)) {\n updateWatermark({ str })\n return id\n }\n const div = document.createElement('div')\n watermarkEl.value = div\n div.id = id\n div.style.pointerEvents = 'none'\n div.style.top = '0px'\n div.style.left = '0px'\n div.style.position = 'absolute'\n div.style.zIndex = '100000'\n // div.style.zIndex = \"10\";\n const el = unref(appendEl)\n if (!el) return id\n const { clientHeight: height, clientWidth: width } = el\n updateWatermark({ str, width, height })\n el.appendChild(div)\n return id\n }\n\n function setWatermark(str: string) {\n createWatermark(str)\n addResizeListener(document.documentElement, func)\n const instance = getCurrentInstance()\n if (instance) {\n onBeforeUnmount(() => {\n clear()\n })\n }\n }\n\n return { setWatermark, clear }\n}\n"],"names":[],"mappings":"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"}