\u76ee\u5f55<\/p>\n
\u7b2c\u4e00\u7ae0 \u524d\u8a00<\/p>\n
\u7b2c\u4e8c\u7ae0\u00a0\u7ec4\u4ef6\u6838\u5fc3\u6280\u672f\u6808\u62c6\u89e3<\/p>\n
2.1 \u57fa\u672c\u914d\u7f6e<\/p>\n
2.1.1 props<\/p>\n
2.1.2\u00a0\u751f\u547d\u5468\u671f\u7ba1\u7406\u4e0e\u65b9\u6cd5\u66b4\u9732<\/p>\n
2.2\u00a0Canvas \u7ed8\u56fe\u6280\u672f（\u751f\u6210\u6c34\u5370\u5e95\u56fe）<\/p>\n
2.2.1\u00a0\u6587\u5b57\u62c6\u5206（\u89e3\u51b3\u8fc7\u957f\u6587\u5b57\u6362\u884c\u95ee\u9898）<\/p>\n
2.2.2\u00a0Canvas \u7ed8\u5236\u591a\u5355\u5143\u6c34\u5370\u5e76\u8f6c\u6362\u4e3a base64<\/p>\n
2.3\u00a0MutationObserver DOM \u7be1\u6539\u76d1\u6d4b（\u9632\u7be1\u6539\u6838\u5fc3）<\/p>\n
2.3.1\u00a0MutationObserver API \u539f\u7406<\/p>\n
2.3.2 DOM \u7be1\u6539\u76d1\u6d4b\u4e0e\u81ea\u52a8\u6062\u590d<\/p>\n
2.4\u00a0\u9632\u6296（Debounce）\u6027\u80fd\u4f18\u5316<\/p>\n
2.4.1\u00a0\u9632\u6296\u51fd\u6570\u5b9e\u73b0<\/p>\n
2.4.2\u00a0\u9632\u6296\u51fd\u6570\u7684\u4f7f\u7528<\/p>\n
2.5\u00a0\u539f\u751f DOM \u64cd\u4f5c\u4e0e\u6837\u5f0f\u9002\u914d<\/p>\n
2.5.1\u00a0\u83b7\u53d6\u76ee\u6807\u5bb9\u5668（\u6c34\u5370\u7ed1\u5b9a\u53ef\u52a8\u6001\u914d\u7f6e）<\/p>\n
2.5.2\u00a0\u5bb9\u5668\u6837\u5f0f\u521d\u59cb\u5316\u4e0e\u8fd8\u539f<\/p>\n
\u7b2c\u4e09\u7ae0\u00a0\u7ec4\u4ef6\u5b9e\u73b0\u96be\u70b9\u4e0e\u89e3\u51b3\u65b9\u6848<\/p>\n
3.1\u00a0\u6c34\u5370 DOM \u6837\u5f0f\u9002\u914d<\/p>\n
3.2\u00a0\u591a\u884c\u6587\u5b57\u6c34\u5370\u7684\u5c45\u4e2d\u6392\u7248\u4e0e\u65cb\u8f6c\u9002\u914d<\/p>\n
3.3\u00a0\u9632\u7be1\u6539\u7684\u5168\u9762\u6027\u4e0e\u5b89\u5168\u6027\u4fdd\u969c<\/p>\n
3.4\u00a0\u6027\u80fd\u4e0e\u8d44\u6e90\u7ba1\u7406\u7684\u5e73\u8861<\/p>\n
\u7b2c\u56db\u7ae0\u00a0\u7ec4\u4ef6\u4f7f\u7528\u793a\u4f8b<\/p>\n
\u7b2c\u4e94\u7ae0\u00a0\u603b\u7ed3\u4e0e\u62d3\u5c55\u65b9\u5411<\/p>\n
\u7b2c\u516d\u7ae0 \u6e90\u7801（\u5f00\u7bb1\u5373\u7528）<\/p>\n
\u5728\u4f01\u4e1a\u7ea7\u5e94\u7528\u4e2d，\u6c34\u5370\u662f\u4fdd\u62a4\u654f\u611f\u6570\u636e\u3001\u9632\u6b62\u6587\u6863\u5916\u6cc4\u7684\u91cd\u8981\u624b\u6bb5\u3002\u666e\u901a\u6c34\u5370\u5f80\u5f80\u5b58\u5728\u6613\u88ab\u7be1\u6539\u3001\u6392\u7248\u9519\u4f4d\u3001\u6027\u80fd\u4e0d\u4f73\u7b49\u95ee\u9898，\u7ecf\u8fc7\u5c0f\u7f16\u5b9e\u8df5，\u672c\u6587\u5c31\u662f\u8981\u5b9e\u73b0\u8fd9\u4e48\u4e00\u4e2a\u6c34\u5370\u7ec4\u4ef6，\u4e0d\u4ec5\u5b9e\u73b0\u4e86\u76f8\u5bf9\u5b89\u5168\u6027\u9632\u7be1\u6539，\u8fd8\u5177\u5907\u826f\u597d\u7684\u53ef\u914d\u7f6e\u6027\u548c\u6027\u80fd\u8868\u73b0\u3002\u63a5\u4e0b\u6765，\u5c0f\u7f16\u5c06\u4ece\u6838\u5fc3\u6280\u672f\u3001\u5b9e\u73b0\u96be\u70b9\u3001\u8bbe\u8ba1\u4eae\u70b9\u4e09\u4e2a\u7ef4\u5ea6，\u7ed3\u5408\u5177\u4f53\u4ee3\u7801\u7247\u6bb5\u62c6\u89e3，\u8ba9\u6bcf\u4e00\u4e2a\u6280\u672f\u70b9\u90fd\u6e05\u6670\u53ef\u843d\u5730\u3002<\/p>\n
const props = defineProps({
\n text: { type: String, default: '\u5185\u90e8\u6587\u6863 \u00b7 \u7981\u6b62\u5916\u4f20' },
\n fontSize: { type: [Number, String], default: 14 },
\n fontFamily: { type: String, default: 'Microsoft Yahei, sans-serif' },
\n color: { type: String, default: 'rgba(180, 180, 180, 0.3)' },
\n rotate: { type: [Number, String], default: -15 },
\n spacing: { type: [Number, String], default: 50 },
\n zIndex: { type: [Number, String], default: 999999 },
\n debounceTime: { type: [Number, String], default: 300 },
\n container: { type: [String, Object], default: 'body' },
\n lineHeight: { type: [Number, String], default: 1.5 },
\n \/\/ \u65b0\u589e：\u6c34\u5370\u5355\u5143\u91cd\u590d\u6570\u91cf（\u63a7\u5236\u80cc\u666f\u56fe\u5305\u542b\u7684\u6c34\u5370\u5355\u5143\u6570）
\n repeatCount: { type: [Number, String], default: 2 }
\n }) <\/p>\n
\/\/ \u66b4\u9732\u65b9\u6cd5\u7ed9\u7236\u7ec4\u4ef6\u8c03\u7528
\ndefineExpose({ renderWatermark, resetWatermark, destroyWatermark })<\/p>\n
\/\/ \u7ec4\u4ef6\u6302\u8f7d\u540e\u6e32\u67d3\u6c34\u5370
\nonMounted(() => renderWatermark())
\n\/\/ \u7ec4\u4ef6\u5378\u8f7d\u540e\u9500\u6bc1\u6c34\u5370，\u91ca\u653e\u8d44\u6e90
\nonUnmounted(() => destroyWatermark()) <\/p>\n
HTML5 <canvas> \u53c2\u8003\u624b\u518c<\/p>\n
HTML5 Canvas<\/p>\n
\/**
\n * \u62c6\u5206\u8fc7\u957f\u6587\u5b57\u4e3a\u591a\u884c
\n *\/
\nconst _splitTextToLines = (ctx, text, maxWidth) => {
\n if (!text) return []
\n const lines = []
\n let currentLine = ''
\n const chars = text.split('')
\n for (const char of chars) {
\n const testLine = currentLine + char
\n const testWidth = ctx.measureText(testLine).width \/\/ \u6d4b\u91cf\u6587\u5b57\u5bbd\u5ea6
\n if (testWidth > maxWidth && currentLine) {
\n lines.push(currentLine)
\n currentLine = char
\n } else {
\n currentLine = testLine
\n }
\n }
\n if (currentLine) lines.push(currentLine)
\n return lines
\n} <\/p>\n
\/**
\n * \u751f\u6210\u591a\u5355\u5143\u6c34\u5370\u80cc\u666f\u56fe（\u6838\u5fc3\u4f18\u5316）
\n *\/
\nconst _createCanvasBase64 = () => {
\n const { text, fontSize, fontFamily, color, rotate, spacing, lineHeight, repeatCount } = props
\n const fontSizeNum = Number(fontSize)
\n const lineHeightNum = Number(lineHeight) || 1.5
\n const spacingNum = Number(spacing)
\n const repeatCountNum = Number(repeatCount) || 2<\/p>\n
\/\/ \u5355\u4e2a\u6c34\u5370\u5355\u5143\u7684\u5c3a\u5bf8
\n const singleWidth = spacingNum * 2
\n const singleMaxTextWidth = singleWidth * 0.8
\n const canvas = document.createElement('canvas') \/\/ \u521b\u5efa\u79bb\u7ebfCanvas
\n const ctx = canvas.getContext('2d') \/\/ \u83b7\u53d62D\u7ed8\u56fe\u4e0a\u4e0b\u6587<\/p>\n
\/\/ \u521d\u59cb\u5316\u753b\u5e03\u4e0a\u4e0b\u6587\u914d\u7f6e
\n ctx.fillStyle = color
\n ctx.font = `${fontSizeNum}px ${fontFamily}`
\n ctx.textAlign = 'center'
\n ctx.textBaseline = 'middle'<\/p>\n
\/\/ \u62c6\u5206\u6587\u5b57\u5e76\u8ba1\u7b97\u5355\u4e2a\u5355\u5143\u9ad8\u5ea6
\n const textLines = _splitTextToLines(ctx, text, singleMaxTextWidth)
\n const singleHeight = Math.max(spacingNum * 2, textLines.length * fontSizeNum * lineHeightNum)<\/p>\n
\/\/ \u751f\u6210\u5305\u542b\u591a\u4e2a\u5355\u5143\u7684\u80cc\u666f\u56fe（\u59822×2）
\n const canvasWidth = singleWidth * repeatCountNum
\n const canvasHeight = singleHeight * repeatCountNum
\n canvas.width = canvasWidth
\n canvas.height = canvasHeight
\n ctx.clearRect(0, 0, canvasWidth, canvasHeight)<\/p>\n
\/\/ \u7ed8\u5236\u591a\u5355\u5143\u6c34\u5370（\u53cc\u91cd\u5faa\u73af\u5b9e\u73b0\u7f51\u683c\u5e03\u5c40）
\n for (let x = 0; x < repeatCountNum; x++) {
\n for (let y = 0; y < repeatCountNum; y++) {
\n const unitX = singleWidth * x + singleWidth \/ 2
\n const unitY = singleHeight * y + singleHeight \/ 2<\/p>\n
\/\/ \u4fdd\u5b58\/\u6062\u590d\u4e0a\u4e0b\u6587\u72b6\u6001，\u907f\u514d\u5355\u5143\u95f4\u7ed8\u5236\u76f8\u4e92\u5e72\u6270
\n ctx.save()
\n ctx.translate(unitX, unitY) \/\/ \u5e73\u79fb\u5230\u5f53\u524d\u5355\u5143\u4e2d\u5fc3
\n ctx.rotate((Number(rotate) * Math.PI) \/ 180) \/\/ \u89d2\u5ea6\u8f6c\u5f27\u5ea6\u5b9e\u73b0\u65cb\u8f6c<\/p>\n
\/\/ \u7ed8\u5236\u591a\u884c\u6587\u5b57，\u5b9e\u73b0\u5782\u76f4\u5c45\u4e2d
\n const totalTextHeight = (textLines.length – 1) * fontSizeNum * lineHeightNum
\n textLines.forEach((line, index) => {
\n const yOffset = (index – (textLines.length – 1) \/ 2) * fontSizeNum * lineHeightNum
\n ctx.fillText(line, 0, yOffset)
\n })<\/p>\n
ctx.restore()
\n }
\n }<\/p>\n
return canvas.toDataURL('image\/png') \/\/ \u8f6c\u6362\u4e3abase64\u683c\u5f0f\u56fe\u7247
\n} <\/p>\n
MutationObserver – Web API | MDN<\/p>\n
const observerOptions = {
\n childList: true, \/\/ \u76d1\u542c\u5b50\u8282\u70b9\u7684\u589e\u3001\u5220\u64cd\u4f5c
\n attributes: true, \/\/ \u76d1\u542c\u5143\u7d20\u5c5e\u6027\u7684\u4fee\u6539（\u5982style\u3001class\u3001dataset）
\n subtree: true, \/\/ \u76d1\u542c\u76ee\u6807\u8282\u70b9\u7684\u6240\u6709\u5b50\u6811（\u540e\u4ee3\u8282\u70b9）\u7684\u53d8\u5316
\n attributeFilter: ['style', 'class', 'dataset'] \/\/ \u4ec5\u76d1\u542c\u6307\u5b9a\u5c5e\u6027\u7684\u4fee\u6539，\u8fdb\u4e00\u6b65\u7f29\u5c0f\u8303\u56f4
\n} <\/p>\n
\/\/ \u5b9e\u4f8b\u5316：\u56de\u8c03\u51fd\u6570\u63a5\u6536\u4e24\u4e2a\u53c2\u6570\u2014\u2014\u53d8\u5316\u8bb0\u5f55\u6570\u7ec4\u3001\u76d1\u542c\u5668\u5b9e\u4f8b
\nconst observer = new MutationObserver((mutations, observerInstance) => {
\n \/\/ mutations：\u6279\u91cf\u6536\u96c6\u7684 MutationRecord \u53d8\u5316\u8bb0\u5f55\u6570\u7ec4
\n \/\/ observerInstance：\u5f53\u524d MutationObserver \u5b9e\u4f8b（\u53ef\u7528\u4e8e\u65ad\u5f00\u76d1\u542c\u7b49\u64cd\u4f5c）
\n mutations.forEach(mutation => {
\n \/\/ \u5904\u7406\u5355\u4e2a DOM \u53d8\u5316\u8bb0\u5f55
\n })
\n})<\/p>\n
\/\/ \u76ee\u6807\u8282\u70b9（\u6c34\u5370\u7ec4\u4ef6\u4e2d\u7684\u76ee\u6807\u5bb9\u5668）
\nconst targetContainer = document.querySelector('#container')<\/p>\n
\/\/ \u542f\u52a8\u76d1\u542c
\nobserver.observe(targetContainer, observerOptions) <\/p>\n
\/**
\n * \u521d\u59cb\u5316DOM\u7be1\u6539\u76d1\u6d4b
\n *\/
\nconst _initMutationObserver = () => {
\n if (observer.value) observer.value.disconnect() \/\/ \u65ad\u5f00\u5df2\u6709\u76d1\u542c，\u907f\u514d\u91cd\u590d\u76d1\u542c
\n const observerOptions = {
\n childList: true, \/\/ \u76d1\u542c\u5b50\u8282\u70b9\u7684\u589e\u5220\u64cd\u4f5c
\n attributes: true, \/\/ \u76d1\u542c\u5143\u7d20\u5c5e\u6027\u7684\u4fee\u6539
\n subtree: true, \/\/ \u76d1\u542c\u5b50\u6811（\u540e\u4ee3\u8282\u70b9）\u7684\u53d8\u5316
\n attributeFilter: ['style', 'class', 'dataset'] \/\/ \u53ea\u76d1\u542c\u6307\u5b9a\u5c5e\u6027，\u63d0\u5347\u6027\u80fd
\n }<\/p>\n
\/\/ \u5b9e\u4f8b\u5316MutationObserver，\u4f20\u5165\u7be1\u6539\u56de\u8c03\u51fd\u6570
\n observer.value = new MutationObserver((mutations) => {
\n let needReRender = false
\n mutations.forEach((mutation) => {
\n \/\/ \u573a\u666f1：\u6c34\u5370DOM\u88ab\u5220\u9664
\n if (mutation.type === 'childList' && mutation.removedNodes.length) {
\n const isWatermarkRemoved = Array.from(mutation.removedNodes).some(
\n (node) => node.dataset?.watermarkId === watermarkId.value
\n )
\n if (isWatermarkRemoved) needReRender = true
\n }<\/p>\n
\/\/ \u573a\u666f2：\u6c34\u5370DOM\u7684\u6837\u5f0f\/\u7c7b\u540d\/\u5c5e\u6027\u88ab\u4fee\u6539
\n if (
\n mutation.type === 'attributes' &&
\n mutation.target.dataset?.watermarkId === watermarkId.value
\n ) {
\n needReRender = true
\n }
\n })<\/p>\n
\/\/ \u4e00\u65e6\u68c0\u6d4b\u5230\u7be1\u6539，\u81ea\u52a8\u91cd\u7f6e\u6c34\u5370
\n if (needReRender) resetWatermark()
\n })<\/p>\n
\/\/ \u5f00\u59cb\u76d1\u542c\u76ee\u6807\u5bb9\u5668\u7684DOM\u53d8\u5316
\n observer.value.observe(targetContainer.value, observerOptions)
\n} <\/p>\n
\/**
\n * \u9632\u6296\u51fd\u6570：\u6307\u5b9a\u65f6\u95f4\u5185\u591a\u6b21\u89e6\u53d1，\u4ec5\u6267\u884c\u6700\u540e\u4e00\u6b21
\n *\/
\nconst _debounce = (fn, delay) => {
\n let timer = null \/\/ \u5b9a\u65f6\u5668\u7f13\u5b58
\n return function () {
\n clearTimeout(timer) \/\/ \u6e05\u9664\u4e0a\u4e00\u6b21\u672a\u6267\u884c\u7684\u5b9a\u65f6\u5668
\n timer = setTimeout(() => fn.apply(this, arguments), delay) \/\/ \u91cd\u65b0\u8bbe\u7f6e\u5b9a\u65f6\u5668，\u5ef6\u8fdf\u6267\u884c
\n }
\n} <\/p>\n
\u5f88\u7ecf\u5178\u7684\u4e86，\u4e0d\u6e05\u695a\u53ef\u4ee5\u770b\u5c0f\u7f16\u4e0b\u9762\u7684\u6587\u7ae0：<\/p>\n
\u524d\u7aef\u5e38\u7528\u7b97\u6cd5（\u4e00）：\u9632\u6296+\u8282\u6d41<\/p>\n
\/**
\n * \u76d1\u542c\u7528\u6237\u64cd\u4f5c
\n *\/
\nconst _initUserOperationListener = () => {
\n const { debounceTime } = props
\n \/\/ \u7ed9\u6c34\u5370\u91cd\u7f6e\u65b9\u6cd5\u6dfb\u52a0\u9632\u6296\u5305\u88c5
\n operationHandler.value = _debounce(() => resetWatermark(), Number(debounceTime))
\n const userEvents = ['click', 'input', 'scroll', 'dragend', 'keydown', 'mouseup', 'touchend']<\/p>\n
\/\/ \u7ed1\u5b9a\u591a\u4e2a\u7528\u6237\u4e8b\u4ef6，\u9632\u6296\u89e6\u53d1\u6c34\u5370\u91cd\u7f6e
\n userEvents.forEach((event) => {
\n targetContainer.value.addEventListener(event, operationHandler.value, { passive: true })
\n })
\n} <\/p>\n
\/**
\n * \u83b7\u53d6\u76ee\u6807\u5bb9\u5668\u5b9e\u4f8b
\n *\/
\nconst _getTargetContainer = () => {
\n let container = null
\n if (typeof props.container === 'string') {
\n \/\/ \u5b57\u7b26\u4e32\u9009\u62e9\u5668：\u901a\u8fc7querySelector\u83b7\u53d6DOM
\n container = document.querySelector(props.container)
\n } else if (props.container instanceof HTMLElement) {
\n \/\/ \u76f4\u63a5\u4f20\u5165HTMLElement\u5b9e\u4f8b，\u76f4\u63a5\u4f7f\u7528
\n container = props.container
\n }<\/p>\n
\/\/ \u5bb9\u9519\u5904\u7406：\u5bb9\u5668\u4e0d\u5b58\u5728\u65f6，\u9ed8\u8ba4\u4f7f\u7528body
\n if (!container || !(container instanceof HTMLElement)) {
\n console.warn('\u6c34\u5370\u76ee\u6807\u5bb9\u5668\u4e0d\u5b58\u5728，\u9ed8\u8ba4\u4f7f\u7528body')
\n container = document.body
\n }
\n return container
\n} <\/p>\n
\/**
\n * \u521d\u59cb\u5316\u5bb9\u5668\u6837\u5f0f（\u6dfb\u52a0\u6ea2\u51fa\u9690\u85cf\u548c\u5b9a\u4f4d）
\n *\/
\nconst _initContainerStyle = () => {
\n const container = targetContainer.value
\n if (container !== document.body) {
\n const computedStyle = window.getComputedStyle(container)
\n \/\/ \u4fdd\u5b58\u5bb9\u5668\u539f\u6709\u6837\u5f0f，\u7528\u4e8e\u540e\u7eed\u8fd8\u539f
\n originContainerStyle.value = {
\n position: computedStyle.position,
\n overflow: computedStyle.overflow
\n }<\/p>\n
\/\/ \u786e\u4fdd\u5bb9\u5668\u6709\u5b9a\u4f4d，\u8ba9\u6c34\u5370\u7684absolute\u5b9a\u4f4d\u751f\u6548
\n if (
\n !['relative', 'absolute', 'fixed', 'sticky'].includes(originContainerStyle.value.position)
\n ) {
\n container.style.position = 'relative !important'
\n }
\n \/\/ \u786e\u4fdd\u5bb9\u5668\u6ea2\u51fa\u9690\u85cf，\u907f\u514d\u6c34\u5370\u8d85\u51fa\u5bb9\u5668\u8303\u56f4
\n container.style.overflow = 'hidden !important'
\n }
\n}<\/p>\n
\/\/ \u9500\u6bc1\u6c34\u5370\u65f6\u8fd8\u539f\u5bb9\u5668\u6837\u5f0f（\u5bf9\u5e94destroyWatermark\u65b9\u6cd5\u7247\u6bb5）
\nif (targetContainer.value && targetContainer.value !== document.body) {
\n targetContainer.value.style.position = originContainerStyle.value.position
\n targetContainer.value.style.overflow = originContainerStyle.value.overflow
\n originContainerStyle.value = { position: '', overflow: '' }
\n} <\/p>\n
\/**
\n * \u521b\u5efa\u6c34\u5370DOM\u5143\u7d20（\u9002\u914d\u5b8c\u6574\u5e73\u94fa）
\n *\/
\nconst _createWatermarkDom = () => {
\n const { zIndex, spacing, repeatCount } = props
\n const base64Url = _createCanvasBase64()
\n const container = targetContainer.value
\n const spacingNum = Number(spacing)
\n const repeatCountNum = Number(repeatCount) || 2
\n const singleWidth = spacingNum * 2
\n const singleHeight = spacingNum * 2<\/p>\n
\/\/ \u533a\u5206\u5bb9\u5668\u7c7b\u578b，\u914d\u7f6e\u4e0d\u540c\u7684\u5bbd\u9ad8\u548c\u5b9a\u4f4d\u65b9\u5f0f
\n const containerWidth = container === document.body ? '100vw' : `${container.offsetWidth}px`
\n const containerHeight = container === document.body ? '100vh' : `${container.offsetHeight}px`
\n const positionType = container === document.body ? 'fixed' : 'absolute'<\/p>\n
\/\/ \u80cc\u666f\u56fe\u5c3a\u5bf8（\u591a\u5355\u5143\u6574\u4f53\u5c3a\u5bf8），\u786e\u4fdd\u5e73\u94fa\u65e0\u9519\u4f4d
\n const bgSize = `${singleWidth * repeatCountNum}px ${singleHeight * repeatCountNum}px`
\n const bgPosition = `0 0`<\/p>\n
const watermark = document.createElement('div')
\n \/\/ \u7528!important\u9501\u5b9a\u6838\u5fc3\u6837\u5f0f，\u9632\u6b62\u88ab\u9875\u9762\u5176\u4ed6\u6837\u5f0f\u8986\u76d6
\n watermark.style.cssText = `
\n position: ${positionType} !important;
\n top: 0 !important;
\n left: 0 !important;
\n width: ${containerWidth} !important;
\n height: ${containerHeight} !important;
\n z-index: ${zIndex} !important;
\n pointer-events: none !important; \/* \u7a7f\u900f\u6c34\u5370，\u4e0d\u5f71\u54cd\u4e0b\u65b9\u5143\u7d20\u4ea4\u4e92 *\/
\n background-image: url(${base64Url}) !important;
\n background-repeat: repeat !important; \/* \u80cc\u666f\u56fe\u5e73\u94fa，\u5b9e\u73b0\u5168\u5c4f\/\u5168\u5bb9\u5668\u8986\u76d6 *\/
\n background-position: ${bgPosition} !important;
\n background-size: ${bgSize} !important;
\n user-select: none !important; \/* \u7981\u6b62\u9009\u4e2d\u6c34\u5370，\u63d0\u5347\u9632\u7be1\u6539\u80fd\u529b *\/
\n `
\n watermarkId.value = 'unique-watermark-' + Date.now() \/\/ \u751f\u6210\u552f\u4e00\u6c34\u5370ID
\n watermark.dataset.watermarkId = watermarkId.value \/\/ \u7ed1\u5b9a\u5230dataset，\u7528\u4e8e\u7be1\u6539\u8bc6\u522b<\/p>\n
return watermark
\n} <\/p>\n
\/\/ 1. \u62c6\u5206\u6587\u5b57（\u5df2\u5728\u6838\u5fc3\u6280\u672f\u90e8\u5206\u5c55\u793a，\u6b64\u5904\u805a\u7126\u7ed8\u5236\u903b\u8f91）
\nconst textLines = _splitTextToLines(ctx, text, singleMaxTextWidth)<\/p>\n
\/\/ 2. \u8ba1\u7b97\u591a\u884c\u6587\u5b57\u603b\u9ad8\u5ea6\u4e0e\u5355\u4e2a\u6c34\u5370\u5355\u5143\u9ad8\u5ea6
\nconst totalTextHeight = (textLines.length – 1) * fontSizeNum * lineHeightNum
\nconst singleHeight = Math.max(spacingNum * 2, textLines.length * fontSizeNum * lineHeightNum)<\/p>\n
\/\/ 3. \u5e73\u79fb\u5230\u5355\u5143\u4e2d\u5fc3，\u51c6\u5907\u65cb\u8f6c
\nctx.translate(unitX, unitY)
\nctx.rotate((Number(rotate) * Math.PI) \/ 180)<\/p>\n
\/\/ 4. \u7ed8\u5236\u591a\u884c\u6587\u5b57，\u5b9e\u73b0\u5782\u76f4\u5c45\u4e2d
\ntextLines.forEach((line, index) => {
\n \/\/ \u8ba1\u7b97\u6bcf\u884c\u6587\u5b57\u7684\u5782\u76f4\u504f\u79fb\u91cf，\u786e\u4fdd\u6574\u4f53\u5c45\u4e2d
\n const yOffset = (index – (textLines.length – 1) \/ 2) * fontSizeNum * lineHeightNum
\n ctx.fillText(line, 0, yOffset)
\n}) <\/p>\n
\/\/ \u673a\u52361：\u9ad8\u4f18\u5148\u7ea7\u6837\u5f0f\u9501，\u9632\u6b62\u666e\u901a\u6837\u5f0f\u8986\u76d6
\nwatermark.style.cssText = `
\n position: ${positionType} !important;
\n background-image: url(${base64Url}) !important;
\n z-index: ${zIndex} !important;
\n`<\/p>\n
\/\/ \u673a\u52362：MutationObserver\u7cbe\u51c6\u76d1\u6d4b\u7be1\u6539\u884c\u4e3a（\u5df2\u5728\u6838\u5fc3\u6280\u672f\u90e8\u5206\u5c55\u793a）
\nconst isWatermarkRemoved = Array.from(mutation.removedNodes).some(
\n (node) => node.dataset?.watermarkId === watermarkId.value
\n)<\/p>\n
\/\/ \u673a\u52363：\u7be1\u6539\u540e\u81ea\u52a8\u91cd\u7f6e\u6c34\u5370，\u8ba9\u7be1\u6539\u65e0\u6548
\nif (needReRender) resetWatermark()<\/p>\n
\/\/ \u673a\u52364：\u7528\u6237\u64cd\u4f5c\u515c\u5e95，\u9632\u6296\u76d1\u542c\u9ad8\u9891\u64cd\u4f5c，\u5f02\u5e38\u65f6\u91cd\u7f6e\u6c34\u5370
\noperationHandler.value = _debounce(() => resetWatermark(), Number(debounceTime)) <\/p>\n
\/**
\n * \u9500\u6bc1\u6c34\u5370（\u8fd8\u539f\u5bb9\u5668\u6837\u5f0f，\u91ca\u653e\u6240\u6709\u8d44\u6e90）
\n *\/
\nconst destroyWatermark = (isClearOperationListener = true) => {
\n \/\/ 1. \u79fb\u9664\u6c34\u5370DOM
\n if (watermarkDom.value && watermarkDom.value.parentNode) {
\n watermarkDom.value.parentNode.removeChild(watermarkDom.value)
\n watermarkDom.value = null
\n }<\/p>\n
\/\/ 2. \u65ad\u5f00MutationObserver\u76d1\u542c，\u91ca\u653e\u6d4f\u89c8\u5668\u8d44\u6e90
\n if (observer.value) {
\n observer.value.disconnect()
\n observer.value = null
\n }<\/p>\n
\/\/ 3. \u79fb\u9664\u7528\u6237\u4e8b\u4ef6\u76d1\u542c，\u907f\u514d\u5185\u5b58\u6cc4\u6f0f
\n if (isClearOperationListener && operationHandler.value) {
\n const userEvents = ['click', 'input', 'scroll', 'dragend', 'keydown', 'mouseup', 'touchend']
\n userEvents.forEach((event) => {
\n targetContainer.value.removeEventListener(event, operationHandler.value)
\n })
\n operationHandler.value = null
\n }<\/p>\n
\/\/ 4. \u8fd8\u539f\u5bb9\u5668\u539f\u6709\u6837\u5f0f，\u4e0d\u5f71\u54cd\u9875\u9762\u5e03\u5c40
\n if (targetContainer.value && targetContainer.value !== document.body) {
\n targetContainer.value.style.position = originContainerStyle.value.position
\n targetContainer.value.style.overflow = originContainerStyle.value.overflow
\n originContainerStyle.value = { position: '', overflow: '' }
\n }
\n} <\/p>\n
<GeneralWatermark
\n ref="watermarkRef"
\n :text="'\u5185\u90e8\u6587\u6863 \u00b7 \u7981\u6b62\u5916\u4f20'"
\n color="rgba(90, 153, 212, 0.2)"
\n rotate="-15"
\n spacing="120"
\n repeatCount="2"
\n\/> <\/p>\n
\u8fd9\u4efd Vue3 \u9632\u7be1\u6539\u6c34\u5370\u7ec4\u4ef6，\u662f\u524d\u7aef\u6280\u672f\u5728\u5b9e\u9645\u4e1a\u52a1\u573a\u666f\u4e2d\u7684\u4f18\u79c0\u843d\u5730\u5b9e\u8df5，\u6bcf\u4e2a\u6280\u672f\u70b9\u90fd\u6709\u6e05\u6670\u7684\u4ee3\u7801\u652f\u6491，\u89e3\u51b3\u4e86\u6c34\u5370\u5e73\u94fa\u3001\u591a\u884c\u6392\u7248\u3001\u9632\u7be1\u6539\u3001\u6027\u80fd\u4f18\u5316\u7b49\u6838\u5fc3\u95ee\u9898，\u5177\u5907\u9ad8\u5b89\u5168\u6027\u3001\u9ad8\u53ef\u914d\u7f6e\u6027\u548c\u826f\u597d\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n
— \u6269\u5c55\u7a7a\u95f4：<\/p>\n
watch(props, () => {
\n resetWatermark()
\n}, { deep: true }) <\/p>\n
<template>
\n <!– \u65e0\u9700\u663e\u6027 DOM \u8282\u70b9，\u6c34\u5370\u901a\u8fc7 JS \u52a8\u6001\u521b\u5efa\u6302\u8f7d\u5230\u76ee\u6807\u5bb9\u5668 –>
\n<\/template><\/p>\n
<script setup>
\n import { onMounted, onUnmounted, ref } from 'vue'<\/p>\n
const props = defineProps({
\n text: { type: String, default: '\u5185\u90e8\u6587\u6863 \u00b7 \u7981\u6b62\u5916\u4f20' },
\n fontSize: { type: [Number, String], default: 14 },
\n fontFamily: { type: String, default: 'Microsoft Yahei, sans-serif' },
\n color: { type: String, default: 'rgba(180, 180, 180, 0.3)' },
\n rotate: { type: [Number, String], default: -15 },
\n spacing: { type: [Number, String], default: 50 },
\n zIndex: { type: [Number, String], default: 999999 },
\n debounceTime: { type: [Number, String], default: 300 },
\n container: { type: [String, Object], default: 'body' },
\n lineHeight: { type: [Number, String], default: 1.5 },
\n \/\/ \u65b0\u589e：\u6c34\u5370\u5355\u5143\u91cd\u590d\u6570\u91cf（\u63a7\u5236\u80cc\u666f\u56fe\u5305\u542b\u7684\u6c34\u5370\u5355\u5143\u6570）
\n repeatCount: { type: [Number, String], default: 2 }
\n })<\/p>\n
\/\/ \u4fdd\u5b58\u6838\u5fc3\u5b9e\u4f8b\u5f15\u7528
\n const watermarkDom = ref(null)
\n const observer = ref(null)
\n const operationHandler = ref(null)
\n const watermarkId = ref('')
\n const targetContainer = ref(null)
\n const originContainerStyle = ref({ position: '', overflow: '' })<\/p>\n
\/**
\n * \u83b7\u53d6\u76ee\u6807\u5bb9\u5668\u5b9e\u4f8b
\n *\/
\n const _getTargetContainer = () => {
\n let container = null
\n if (typeof props.container === 'string') {
\n container = document.querySelector(props.container)
\n } else if (props.container instanceof HTMLElement) {
\n container = props.container
\n }
\n if (!container || !(container instanceof HTMLElement)) {
\n console.warn('\u6c34\u5370\u76ee\u6807\u5bb9\u5668\u4e0d\u5b58\u5728，\u9ed8\u8ba4\u4f7f\u7528body')
\n container = document.body
\n }
\n return container
\n }<\/p>\n
\/**
\n * \u62c6\u5206\u8fc7\u957f\u6587\u5b57\u4e3a\u591a\u884c
\n *\/
\n const _splitTextToLines = (ctx, text, maxWidth) => {
\n if (!text) return []
\n const lines = []
\n let currentLine = ''
\n const chars = text.split('')
\n for (const char of chars) {
\n const testLine = currentLine + char
\n const testWidth = ctx.measureText(testLine).width
\n if (testWidth > maxWidth && currentLine) {
\n lines.push(currentLine)
\n currentLine = char
\n } else {
\n currentLine = testLine
\n }
\n }
\n if (currentLine) lines.push(currentLine)
\n return lines
\n }<\/p>\n
\/**
\n * \u751f\u6210\u591a\u5355\u5143\u6c34\u5370\u80cc\u666f\u56fe（\u6838\u5fc3\u4f18\u5316）
\n *\/
\n const _createCanvasBase64 = () => {
\n const { text, fontSize, fontFamily, color, rotate, spacing, lineHeight, repeatCount } = props
\n const fontSizeNum = Number(fontSize)
\n const lineHeightNum = Number(lineHeight) || 1.5
\n const spacingNum = Number(spacing)
\n const repeatCountNum = Number(repeatCount) || 2<\/p>\n
\/\/ \u5355\u4e2a\u6c34\u5370\u5355\u5143\u7684\u5c3a\u5bf8
\n const singleWidth = spacingNum * 2
\n const singleMaxTextWidth = singleWidth * 0.8
\n const canvas = document.createElement('canvas')
\n const ctx = canvas.getContext('2d')<\/p>\n
\/\/ \u521d\u59cb\u5316\u753b\u5e03\u4e0a\u4e0b\u6587
\n ctx.fillStyle = color
\n ctx.font = `${fontSizeNum}px ${fontFamily}`
\n ctx.textAlign = 'center'
\n ctx.textBaseline = 'middle'<\/p>\n
\/\/ \u62c6\u5206\u6587\u5b57\u5e76\u8ba1\u7b97\u5355\u4e2a\u5355\u5143\u9ad8\u5ea6
\n const textLines = _splitTextToLines(ctx, text, singleMaxTextWidth)
\n const singleHeight = Math.max(spacingNum * 2, textLines.length * fontSizeNum * lineHeightNum)<\/p>\n
\/\/ \u751f\u6210\u5305\u542b\u591a\u4e2a\u5355\u5143\u7684\u80cc\u666f\u56fe（\u59822×2）
\n const canvasWidth = singleWidth * repeatCountNum
\n const canvasHeight = singleHeight * repeatCountNum
\n canvas.width = canvasWidth
\n canvas.height = canvasHeight
\n ctx.clearRect(0, 0, canvasWidth, canvasHeight)<\/p>\n
\/\/ \u7ed8\u5236\u591a\u5355\u5143\u6c34\u5370
\n for (let x = 0; x < repeatCountNum; x++) {
\n for (let y = 0; y < repeatCountNum; y++) {
\n const unitX = singleWidth * x + singleWidth \/ 2
\n const unitY = singleHeight * y + singleHeight \/ 2<\/p>\n
\/\/ \u4fdd\u5b58\u5f53\u524d\u4e0a\u4e0b\u6587\u72b6\u6001
\n ctx.save()
\n \/\/ \u5e73\u79fb\u5230\u5f53\u524d\u5355\u5143\u4e2d\u5fc3
\n ctx.translate(unitX, unitY)
\n \/\/ \u65cb\u8f6c
\n ctx.rotate((Number(rotate) * Math.PI) \/ 180)<\/p>\n
\/\/ \u7ed8\u5236\u591a\u884c\u6587\u5b57
\n const totalTextHeight = (textLines.length – 1) * fontSizeNum * lineHeightNum
\n textLines.forEach((line, index) => {
\n const yOffset = (index – (textLines.length – 1) \/ 2) * fontSizeNum * lineHeightNum
\n ctx.fillText(line, 0, yOffset)
\n })<\/p>\n
\/\/ \u6062\u590d\u4e0a\u4e0b\u6587\u72b6\u6001
\n ctx.restore()
\n }
\n }<\/p>\n
return canvas.toDataURL('image\/png')
\n }<\/p>\n
\/**
\n * \u521b\u5efa\u6c34\u5370DOM\u5143\u7d20（\u9002\u914d\u5b8c\u6574\u5e73\u94fa）
\n *\/
\n const _createWatermarkDom = () => {
\n const { zIndex, spacing, repeatCount } = props
\n const base64Url = _createCanvasBase64()
\n const container = targetContainer.value
\n const spacingNum = Number(spacing)
\n const repeatCountNum = Number(repeatCount) || 2
\n const singleWidth = spacingNum * 2
\n const singleHeight = spacingNum * 2<\/p>\n
\/\/ \u5bb9\u5668\u5c3a\u5bf8\u548c\u5b9a\u4f4d\u65b9\u5f0f
\n const containerWidth = container === document.body ? '100vw' : `${container.offsetWidth}px`
\n const containerHeight = container === document.body ? '100vh' : `${container.offsetHeight}px`
\n const positionType = container === document.body ? 'fixed' : 'absolute'<\/p>\n
\/\/ \u80cc\u666f\u56fe\u5c3a\u5bf8（\u591a\u5355\u5143\u6574\u4f53\u5c3a\u5bf8）
\n const bgSize = `${singleWidth * repeatCountNum}px ${singleHeight * repeatCountNum}px`
\n \/\/ \u80cc\u666f\u56fe\u5b9a\u4f4d（\u786e\u4fdd\u5de6\u4e0a\u89d2\u5bf9\u9f50）
\n const bgPosition = `0 0`<\/p>\n
const watermark = document.createElement('div')
\n watermark.style.cssText = `
\n position: ${positionType} !important;
\n top: 0 !important;
\n left: 0 !important;
\n width: ${containerWidth} !important;
\n height: ${containerHeight} !important;
\n z-index: ${zIndex} !important;
\n pointer-events: none !important;
\n background-image: url(${base64Url}) !important;
\n background-repeat: repeat !important;
\n background-position: ${bgPosition} !important;
\n background-size: ${bgSize} !important;
\n user-select: none !important;
\n border: none !important;
\n margin: 0 !important;
\n padding: 0 !important;
\n opacity: 1 !important;
\n display: block !important;
\n `
\n watermarkId.value = 'unique-watermark-' + Date.now()
\n watermark.dataset.watermarkId = watermarkId.value<\/p>\n
return watermark
\n }<\/p>\n
\/**
\n * \u521d\u59cb\u5316\u5bb9\u5668\u6837\u5f0f（\u6dfb\u52a0\u6ea2\u51fa\u9690\u85cf）
\n *\/
\n const _initContainerStyle = () => {
\n const container = targetContainer.value
\n if (container !== document.body) {
\n const computedStyle = window.getComputedStyle(container)
\n originContainerStyle.value = {
\n position: computedStyle.position,
\n overflow: computedStyle.overflow
\n }<\/p>\n
\/\/ \u786e\u4fdd\u5bb9\u5668\u6709\u5b9a\u4f4d\u4e14\u6ea2\u51fa\u9690\u85cf
\n if (
\n !['relative', 'absolute', 'fixed', 'sticky'].includes(originContainerStyle.value.position)
\n ) {
\n container.style.position = 'relative !important'
\n }
\n container.style.overflow = 'hidden !important'
\n }
\n }<\/p>\n
\/**
\n * \u521d\u59cb\u5316DOM\u7be1\u6539\u76d1\u6d4b
\n *\/
\n const _initMutationObserver = () => {
\n if (observer.value) observer.value.disconnect()
\n const observerOptions = {
\n childList: true,
\n attributes: true,
\n subtree: true,
\n attributeFilter: ['style', 'class', 'dataset']
\n }
\n observer.value = new MutationObserver((mutations) => {
\n console.log('mutations', mutations)
\n let needReRender = false
\n mutations.forEach((mutation) => {
\n if (mutation.type === 'childList' && mutation.removedNodes.length) {
\n const isWatermarkRemoved = Array.from(mutation.removedNodes).some(
\n (node) => node.dataset?.watermarkId === watermarkId.value
\n )
\n if (isWatermarkRemoved) needReRender = true
\n }
\n if (
\n mutation.type === 'attributes' &&
\n mutation.target.dataset?.watermarkId === watermarkId.value
\n ) {
\n needReRender = true
\n }
\n })
\n if (needReRender) resetWatermark()
\n })
\n observer.value.observe(targetContainer.value, observerOptions)
\n }<\/p>\n
\/**
\n * \u9632\u6296\u51fd\u6570
\n *\/
\n const _debounce = (fn, delay) => {
\n let timer = null
\n return function () {
\n clearTimeout(timer)
\n timer = setTimeout(() => fn.apply(this, arguments), delay)
\n }
\n }<\/p>\n
\/**
\n * \u76d1\u542c\u7528\u6237\u64cd\u4f5c
\n *\/
\n const _initUserOperationListener = () => {
\n const { debounceTime } = props
\n operationHandler.value = _debounce(() => resetWatermark(), Number(debounceTime))
\n const userEvents = ['click', 'input', 'scroll', 'dragend', 'keydown', 'mouseup', 'touchend']
\n userEvents.forEach((event) => {
\n targetContainer.value.addEventListener(event, operationHandler.value, { passive: true })
\n })
\n }<\/p>\n
\/**
\n * \u6e32\u67d3\u6c34\u5370
\n *\/
\n const renderWatermark = () => {
\n destroyWatermark(false)
\n targetContainer.value = _getTargetContainer()
\n _initContainerStyle()
\n watermarkDom.value = _createWatermarkDom()
\n targetContainer.value.appendChild(watermarkDom.value)
\n _initMutationObserver()
\n _initUserOperationListener()
\n }<\/p>\n
\/**
\n * \u91cd\u7f6e\u6c34\u5370
\n *\/
\n const resetWatermark = () => {
\n destroyWatermark(false)
\n watermarkDom.value = _createWatermarkDom()
\n targetContainer.value.appendChild(watermarkDom.value)
\n _initMutationObserver()
\n }<\/p>\n
\/**
\n * \u9500\u6bc1\u6c34\u5370（\u8fd8\u539f\u5bb9\u5668\u6837\u5f0f）
\n *\/
\n const destroyWatermark = (isClearOperationListener = true) => {
\n if (watermarkDom.value && watermarkDom.value.parentNode) {
\n watermarkDom.value.parentNode.removeChild(watermarkDom.value)
\n watermarkDom.value = null
\n }
\n if (observer.value) {
\n observer.value.disconnect()
\n observer.value = null
\n }
\n if (isClearOperationListener && operationHandler.value) {
\n const userEvents = ['click', 'input', 'scroll', 'dragend', 'keydown', 'mouseup', 'touchend']
\n userEvents.forEach((event) => {
\n targetContainer.value.removeEventListener(event, operationHandler.value)
\n })
\n operationHandler.value = null
\n }
\n \/\/ \u8fd8\u539f\u5bb9\u5668\u539f\u6709\u6837\u5f0f
\n if (targetContainer.value && targetContainer.value !== document.body) {
\n targetContainer.value.style.position = originContainerStyle.value.position
\n targetContainer.value.style.overflow = originContainerStyle.value.overflow
\n originContainerStyle.value = { position: '', overflow: '' }
\n }
\n }<\/p>\n
\/\/ \u66b4\u9732\u65b9\u6cd5
\n defineExpose({ renderWatermark, resetWatermark, destroyWatermark })<\/p>\n
\/\/ \u751f\u547d\u5468\u671f
\n onMounted(() => renderWatermark())
\n onUnmounted(() => destroyWatermark())
\n<\/script><\/p>\n
<style scoped>
\n \/* \u65e0\u989d\u5916\u6837\u5f0f *\/
\n<\/style><\/p>\n","protected":false},"excerpt":{"rendered":"
\u76ee\u5f55
\n\u7b2c\u4e00\u7ae0 \u524d\u8a00
\n\u7b2c\u4e8c\u7ae0\u00a0\u7ec4\u4ef6\u6838\u5fc3\u6280\u672f\u6808\u62c6\u89e3
\n2.1 \u57fa\u672c\u914d\u7f6e
\n2.1.1 props
\n2.1.2\u00a0\u751f\u547d\u5468\u671f\u7ba1\u7406\u4e0e\u65b9\u6cd5\u66b4\u9732
\n2.2\u00a0Canvas \u7ed8\u56fe\u6280\u672f（\u751f\u6210\u6c34\u5370\u5e95\u56fe）
\n2.2.1\u00a0\u6587\u5b57\u62c6\u5206（\u89e3\u51b3\u8fc7\u957f\u6587\u5b57\u6362\u884c\u95ee\u9898）
\n2.2.2\u00a0Canvas \u7ed8\u5236\u591a\u5355\u5143\u6c34\u5370\u5e76\u8f6c\u6362\u4e3a base64
\n2.3\u00a0MutationObserver DOM \u7be1\u6539\u76d1\u6d4b（\u9632\u7be1\u6539\u6838\u5fc3）
\n2.3.1\u00a0Mut<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6543,6544,187,458,87,575],"topic":[],"class_list":["post-61733","post","type-post","status-publish","format-standard","hentry","category-server","tag-6543","tag-6544","tag-javascript","tag-vue","tag-87","tag-575"],"yoast_head":"\n