#WorkBuddy# #WorkBuddy开发者分享季 JSP管理后台动态水印实战：从零到模块化，带防篡改机制

帮我在JSP管理页面加动态水印，要求：
1. 显示当前登录用户名+部门+时间戳
2. 文字倾斜约22度，半透明，铺满整个页面
3. 不能被控制台轻易删除（加MutationObserver防篡改）
4. 独立JS模块，各页面直接引用即可
5. 不影响页面正常点击操作
6. 支持多行文字

var Watermark = (function() {
  // ... 内部实现 ...

  return {
    init: init,      // 初始化水印
    update: update,  // 动态更新文字
    destroy: destroy // 销毁水印
  };
})();

function createCanvasWatermark(settings) {
  var canvas = document.createElement('canvas');
  var dpr = window.devicePixelRatio || 1;    // ① 高清屏适配
  canvas.width = settings.width * dpr;
  canvas.height = settings.height * dpr;

  var ctx = canvas.getContext('2d');
  ctx.scale(dpr, dpr);                        // ② 缩放画布
  ctx.font = settings.fontSize + 'px ' + settings.fontFamily;
  ctx.fillStyle = settings.color;
  ctx.globalAlpha = settings.opacity;          // ③ 全局透明度
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  var lines = settings.text.split('\n');      // ④ 支持多行文字

  ctx.save();
  ctx.translate(cx, cy);
  ctx.rotate((settings.rotate * Math.PI) / 180); // ⑤ 旋转文字
  lines.forEach(function(line, idx) {
    ctx.fillText(line, 0, startY + idx * lineHeight);
  });
  ctx.restore();

  return canvas.toDataURL('image/png');       // ⑥ 导出为base64背景图
}

function startObserver(settings) {
  var overlay = document.getElementById('__wm_overlay__');
  var parentNode = overlay.parentNode;

  observer = new MutationObserver(function(mutations) {
    var needRestore = false;
    mutations.forEach(function(mut) {
      // 检测水印节点被删除
      if (mut.type === 'childList') {
        var removed = Array.from(mut.removedNodes);
        if (removed.some(function(n) { return n.id === '__wm_overlay__'; })) {
          needRestore = true;
        }
      }
      // 检测水印属性被篡改
      if (mut.type === 'attributes' && mut.target.id === '__wm_overlay__') {
        needRestore = true;
      }
    });
    if (needRestore) {
      observer.disconnect();
      restoreWatermark(settings);   // 自动恢复
      startObserver(settings);      // 重新监听
    }
  });

  observer.observe(parentNode, { childList: true, attributes: true, ... });
}

if (typeof window !== 'undefined' && window.WATERMARK_CONFIG) {
  document.addEventListener('DOMContentLoaded', function() {
    Watermark.init(window.WATERMARK_CONFIG);
  });
}

<!-- ========== 1. 引入核心模块 ========== -->
<script src="/js/watermark-core.js"></script>

<!-- ========== 2. 配置水印参数 ========== -->
<script>
window.WATERMARK_CONFIG = {
  text: '<%= userName %> | <%= userDept %>\n<%= nowStr %>',
  fontSize: 14,
  opacity: 0.07,
  rotate: -22
};
</script>

项目结构：
/webapp
  /js
    watermark-core.js        ← 水印引擎（通用）
  /WEB-INF
    /views
      merchant-list.jsp      ← 商户列表（引入水印）
      order-list.jsp         ← 订单列表（引入水印）
      report.jsp             ← 报表页（引入水印）

JSP Session → 取用户信息 → 拼装水印文字 → 注入 window.WATERMARK_CONFIG
                                                    ↓
                                          watermark-core.js 读取配置
                                                    ↓
                                          Canvas 渲染 → base64 背景图
                                                    ↓
                                          MutationObserver 防篡改