城乡建设查询网站,建国际网站需要多少钱,永顺县建设局网站,网站建设a云世家网络一般的话水印分为明水印和暗水印两种
明水印的话就是在视频canvas上面蒙上一个div#xff08;如我上篇文章#xff09; #xff0c;暗水印的话就是把文字通过技术嵌入到图像里。
具体实现的话可以使用MutationObserver API 来监视 DOM 的变化#xff0c;特别是针对目标节…一般的话水印分为明水印和暗水印两种
明水印的话就是在视频canvas上面蒙上一个div如我上篇文章 暗水印的话就是把文字通过技术嵌入到图像里。
具体实现的话可以使用MutationObserver API 来监视 DOM 的变化特别是针对目标节点这里是document.body的子节点是否被删除。如果检测到有子节点被删除它计划但示例中未完全实现重新插入一个水印元素。 目标节点定义: const targetNode document.body; 这行代码将document.body即网页的主体部分赋值给targetNode变量表示MutationObserver将观察这个节点的变化。 创建MutationObserver实例: const observer new MutationObserver((mutationsList) {
for (let mutation of mutationsList) {
if (mutation.removedNodes.length 0) {
// 在此处判断是否有水印被删除
// 如果水印被删除则重新插入水印的 DOM 元素到目标节点
// 例如targetNode.appendChild(watermarkElement);
}
}
}); 这里创建了一个MutationObserver实例它接受一个回调函数作为参数。当监测到DOM变化时会调用这个回调函数并传入一个mutationsList一个包含所有变化的MutationRecord对象的数组。对于列表中的每个变化mutation如果它包含了被删除的节点removedNodes.length 0则计划执行某些操作在注释中提到的重新插入水印元素。但请注意示例中并没有定义watermarkElement变量所以实际执行时需要先定义并准备好这个元素。 配置MutationObserver: const config { childList: true, subtree: true }; 设置MutationObserver的配置对象。childList: true表示观察目标节点的子节点的增减subtree: true表示不仅观察目标节点的直接子节点还观察其所有后代节点的变化。 开始观察目标节点: observer.observe(targetNode, config); 通过调用observe方法将MutationObserver实例与targetNodedocument.body关联起来并使用config对象作为参数来指定观察哪些类型的DOM变化。 在实际应用中需要在回调函数内部定义或获取watermarkElement水印元素然后才能将其重新插入到DOM中。MutationObserver的回调函数可能会在DOM变化后立即执行这意味着如果DOM变化非常频繁可能会导致性能问题。因此在设计时需要注意这一点可能需要引入防抖debounce或节流throttle机制。没有展示如何定义watermarkElement或如何具体地将其添加到DOM中这些都是在实际应用中需要完成的步骤。 如果⽔印被删除后⽴即加回去你可以在检测到⽔印被删除时⽴即执⾏插⼊⽔印的代码以 确保⽔印能够迅速地重新出现在页⾯上
