<script lang="ts" setup>
import { ref, onMounted } from 'vue';
const waterPrintContainer = ref<HTMLDivElement>()
* vue实现水印
* 核心:canvas必须操作dom
* 步骤1:创建一个存放水印的元素
* 步骤2:通过canvas创建图片，以背景图的形式实现水印
* 步骤3:防修改 MutationObserver()类的使用
// 封装getWater方法，组件挂载后执行,封装为了复用，后续我们回用到它
const createWaterPrint = () => {
// 获取canvas画布元素，
// TS中强制类型推断方式1:
const canvas = <HTMLCanvasElement>document.getElementById('canvas')
// 方式2：as 推断,react中只支持as推断
// const canvas = document.getElementById('canvas') as HTMLCanvasElement
// 设置宽高，它不需要element.style.width只需要canvas.width
canvas.width = 100;
canvas.height = 100;
// 隐藏画布本身
canvas.style.display = 'none';
// 获取画笔
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
// 设置文字大小
ctx.font = '100px'
// 文字颜色
ctx.fillStyle = 'rgba(0,0,0,.9)'
// 文字旋转
ctx.rotate(-0.4)
// 设置显示文字内容
ctx.fillText('这是水印', canvas.width / 2, canvas.height / 2)
// 将canvas转换为图片,返回一个url，是base64组成的图片的源数据
// 可以直接赋值给图片的url的src属性
const img = canvas.toDataURL('image/png')
// 定义样式
const style = `background-image:url(${img})`
// 给water元素设置样式:
const waterContainer = document.getElementById('water') as HTMLDivElement
// 给要添加水印的元素设置样式:
// water.setAttribute('style', style)或者如下:
waterContainer.style.backgroundImage = `url(${img})`
* 但是这有个问题：
* 内行人可以去控制台找到水印的背景图取消勾选就没有水印
* 我们得想办法不让他们改，这里要使用MutationObserver类
// 设置一个回调函数，当用户操作了元素的属性我就重新绘制canvas并设置为背景图
const callback = () => getWater()
onMounted(() => {
// 获取water元素
waterPrintContainer.value = <HTMLDivElement>document.getElementById('water')
// 挂载完毕后我就绘制并设为背景图
getWater()
// 创建观察者，需要传入发生变化后执行的函数
const observer = new MutationObserver(callback)
// 获取观察的节点
const targetNode = waterPrintContainer.value
console.log(waterPrintContainer.value);//元素
// 观察的属性，attributes属性,childList子节点有没有添加删除，后代节点
const config = { attributes: true, childList: false, subtree: false }
// 观察者实例观察目标元素和观察的方面，只要观发生变化就执行callback
observer.observe(targetNode, config)
// 这样水印就无法去除了
</script>
* MutationObserver是一个类
* 基本使用方法：1选择需要观察变动的节点(dom元素)
* const targetNode = document.getElementById('box')
* 2.观察器配置(需要观察什么活动)
* const config = {attributes:true,childList:true,subtree:true};
* 3.当观察到变动时执行的操作回调函数
* const callback = () => console.log('触发回调')
* 4.创建一个观察器实例并传入回调函数
* const observer = new MutationObserver(callback)
* 5.开始观察目标节点
* observer.observe(targetNode,config)
* 6.必要时停止观察
* observer.disconnect()
* 观察器的配置参数含义：
* childList:true 表示观察目标子节点的变化，是否有添加或者删除
* attributes:true,表示观察属性变动
* subtree:true观察后代节点默认为false
复制代码
-
862
-
web_vivi
Vue.js
JavaScript
