防止攥改之水印功能组件

效果图

逻辑代码

<template><div class="containerBox" ref="parentRef" style="height: 300px;background-color: red;"><slot></slot></div>
</template><script setup lang="ts">
// import useWatermarkBg from './useWatermarkBg.js';
import { onMounted, ref, onUnmounted } from 'vue';
const parentRef: any = ref(null)
const props = defineProps({text: {type: String,required: true,default: 'watermark'},fontSize: {type: Number,default: 40},gap: {type: Number,default: 20},textColor:{type: String,required: false,default: 'rgba(0,0,0,0.3)'}
})
let div: any
// canvas画出水印
function useWatermarkBg() {const canvas = document.createElement('canvas')const devicePixelRatio = window.devicePixelRatio || 1const fontSize = props.fontSize * devicePixelRatio;const font = fontSize + 'px serif';const ctx: any = canvas.getContext('2d')// 获取文字高度ctx.font = font;const { width } = ctx.measureText(props.text)const canvasSize = Math.max(100, width) + props.gap * devicePixelRatiocanvas.width = canvasSizecanvas.height = canvasSizectx.translate(canvas.width / 2, canvas.height / 2)ctx.rotate((Math.PI / 180) * -45)ctx.fillStyle = props.textColorctx.font = fontctx.textAlign = 'center'ctx.textBaseline = 'middle'ctx.fillText(props.text, 0, 0)return {base64: canvas.toDataURL(),size: canvasSize / devicePixelRatio}
}
function resetWatermark() {if (!parentRef.value) {return}if (div) {div.remove()}const { base64, size } = useWatermarkBg()div = document.createElement('div')div.style.position = 'absolute'div.style.backgroundImage = `url(${base64})`div.style.backgroundSize = `${size}px ${size}px`div.style.backgroundRepeat = 'repeat'div.style.zIndex = '9999'div.style.inset = '0'parentRef.value.appendChild(div)
}
onMounted(resetWatermark)
// 监听元素变化
const ob = new MutationObserver(entries => {console.log(entries);for(const entry of entries){// removeNodes删除的元素，如果删除的元素是水印元素，则重新画一个for (const dom of entry.removedNodes) {if(dom ==div){resetWatermark()return}}if(entry.target == div){resetWatermark()return}}
})
onMounted(() => {ob.observe(parentRef.value, {childList: true, // 子节点subtree: true,  //子树attributes: true // 属性})
})
//组件卸载之后取消
onUnmounted(() => {ob.disconnect()
})
</script><style scoped lang="scss"></style>