Js和Canvas实现水印且控制台不可删除_js 水印div 如何防止删除-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44173943/article/details/127059178

本文介绍如何利用JavaScript和Canvas技术实现在网页上添加水印，并确保水印不可通过控制台删除。主要步骤包括：生成单个水印图片并作为背景，设置事件监听防止变动，重复生成多张水印覆盖整个页面，以及调整鼠标事件让其不影响水印显示。文章附带了实现效果和源码供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

水印
不可删除

原理

① 水印

生成单个canvas水印，生成base64图片，放到div背景图片中。

② 不可删除

MutationObserver实现监视 DOM 变动。

③ 生成整片多个水印

background-repeat实现重复。

④ 鼠标事件更改到水印下面

pointer-events: none

效果图

在这里插入图片描述

源码

/*
 * @Author: cbw
 * @Date: 2022-09-23 16:21:05
 * @LastEditors: cbw
 * @LastEditTime: 2022-09-26 11:22:07
 * @Description:
 */
class WaterMark {
   
  #canvasOptions; // canvas默认配置
  #canvasIndividualOptions; //canvas个性化配置
  #waterMarkStyle; // 水印默认配置
  #waterMarkIndividualStyle; // 水印个性化配置
  #wm; // 水印DOM
  #Uuid; // 唯一id
  #waterMarkStyleStr; // style字符串

  constructor(canvasOptions = {
    }, waterMarkStyle = {
    }) {
   
    // canvas默认配置
    this.#canvasOptions = {
   
      width: 400, // canvas宽
      height: 400, // canvas高
      font: "normal 16px 思源黑体_ Regular",
      fillStyle: "rgba(10, 100, 80, .2)", // 文本颜色
      textAlign: "center",
      fillTextArr: ["Boen", "3150987521986"], // 文本
      rotate: -20, // 旋转角度
      fillTextX: 100, // 文本横坐标
      fillTextY: 100, // 文本纵坐标
    };
    // 水印默认配置
    this.#waterMarkStyle = {
   
      position: "absolute",
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
      "z-index": "99999",
      "pointer-events": "none"