给后台管理系统加水印(react)

最新推荐文章于 2024-04-19 15:58:03 发布

Why_so_serious_Y

最新推荐文章于 2024-04-19 15:58:03 发布

阅读量663

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/Wy_so_serious/article/details/126865496

版权

本文介绍了如何使用JavaScript创建一个可定制的水印功能，包括设置水印文字内容、行高、宽度、旋转角度、颜色、字体大小和透明度。通过封装成公用方法，可以方便地在需要时开启或关闭水印，并能灵活调整其在页面上的显示效果。

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

// 封装成公用方法

const TpWatermark = (CON, H, W, R, C, S, O) => {
  // 判断水印是否存在，如果存在，那么不执行
  if (document.getElementById('tp-watermark') != null) {
    return;
  }
  var TpLine = parseInt(document.body.clientWidth / W) * 2; // 一行显示几列
  var StrLine = '';
  for (var i = 0; i < TpLine; i++) {
    StrLine +=
      '<span style="display: inline-block; line-height:' +
      H +
      'px; width:' +
      W +
      'px; text-align: center; transform:rotate(' +
      R +
      'deg); color:' +
      C +
      '; font-size:' +
      S +
      'px; opacity:' +
      O +
      ';">' +
      CON +
      '</span>';
  }
  var DivLine = document.createElement('div');
  DivLine.innerHTML = StrLine;

  var TpColumn = parseInt(document.body.clientHeight / H) * 2; // 一列显示几行
  var StrColumn = '';
  for (var i = 0; i < TpColumn; i++) {
    StrColumn +=
      '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
  }
  var DivLayer = document.createElement('div');
  DivLayer.innerHTML = StrColumn;
  DivLayer.id = 'tp-watermark'; // 给水印盒子添加类名
  DivLayer.style.position = 'fixed';
  DivLayer.style.top = '0px'; // 整体水印距离顶部距离
  DivLayer.style.left = '-100px'; // 改变整体水印的left值
  DivLayer.style.zIndex = '99999'; // 水印页面层级
  DivLayer.style.pointerEvents = 'none';

  document.body.appendChild(DivLayer); // 到页面中
};

// CON => 水印文字内容

// H => 水印行高

// W => 水印宽度

// R => 旋转度数（可为负值）

// C => 水印字体颜色

// S => 水印字体的大小

// O => 水印透明度（0~1之间取值）

// 开启水印
const StateTpWatermark = () => {
   TpWatermark('机密','170','400','-20','red','50','.5')
}

export default StateTpWatermark

需要使用时:

import StateTpWatermark from '../../watermark'

function Home(props) {

  StateTpWatermark();

  return (
   <>
      ......
   </>
  )

}

export default Home

关闭水印的方法:

const RemoveTpWatermark = () => {
  // 判断水印是否存在，如果存在，那么执行
  if (document.getElementById('tp-watermark') == null) {
    return;
  }
  document.body.removeChild(document.getElementById('tp-watermark'));
};