js/vue 悬浮全屏水印

肖彤宇

已于 2024-08-26 18:38:08 修改

阅读量207

点赞数 1

文章标签： javascript vue.js 前端

于 2024-08-26 10:24:57 首次发布

本文链接：https://blog.csdn.net/XTY__/article/details/141557448

版权

为网页添加全屏水信息水印，效果图：

可自行调整密度，大小，字体，文字

      // 创建一个覆盖整个页面的 div
      const watermarkDiv = document.createElement('div');
      watermarkDiv.style.position = 'fixed';
      watermarkDiv.style.top = '0';
      watermarkDiv.style.left = '0';
      watermarkDiv.style.width = '100%';
      watermarkDiv.style.height = '100%';
      watermarkDiv.style.pointerEvents = 'none'; // 让水印元素不影响页面的交互
      watermarkDiv.style.zIndex = '9999'; // 确保水印位于页面最上层

      // 创建 canvas 元素
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      canvas.width = 250;
      canvas.height = 200;
      const waterMarkText = '用户名'+'172***';  // 设置水印文本

      // 设置文本样式
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.globalAlpha = 0.07;
      ctx.font = '14px Microsoft Yahei';
      ctx.translate(50, 50);
      ctx.rotate(-Math.PI / 10);
      ctx.fillText(waterMarkText, 0, 0);
      // 将 canvas 转换为 data URL 并作为背景图片
      const dataUrl = canvas.toDataURL();
      watermarkDiv.style.backgroundImage = `url(${dataUrl})`;
      // 设置水印重复铺满整个页面
      watermarkDiv.style.backgroundRepeat = 'repeat';
      watermarkDiv.style.backgroundPosition = 'center';
      // 将水印元素添加到 body
      document.body.appendChild(watermarkDiv);