全局加水印（水印设置-例子涉及通过接口获取一些水印的配置）

// Watermark.js
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState
} from 'react';
import { getCookie, getLocalStorage } from '@/utils/auth';
import { getConfigByKey } from '@/services';
import './index.less';

const Watermark = () => {
  // 获取水印开关
  const [watermarkShow, setWatermarkShow] = useState<any>('');
  // 获取水印大小
  const [watermarkSize, setWatermarkSize] = useState<any>('');
  // 获取水印透明度
  const [watermarkTrans, setWatermarkTrans] = useState<any>('');
  // 水印内容
  const [watermarkContent, setWatermarkContent] = useState<any>('');
  // 定义多个水印的内容、位置等信息
  const watermarks = [
    { text: watermarkContent, x: 10, y: 10, angle: 30 },
    { text: watermarkContent, x: 40, y: 10, angle: 30 },
    { text: watermarkContent, x: 70, y: 10, angle: 30 },
    { text: watermarkContent, x: 10, y: 40, angle: 30 },
    { text: watermarkContent, x: 40, y: 40, angle: 30 },
    { text: watermarkContent, x: 70, y: 40, angle: 30 },
    { text: watermarkContent, x: 10, y: 70, angle: 30 },
    { text: watermarkContent, x: 40, y: 70, angle: 30 },
    { text: watermarkContent, x: 70, y: 70, angle: 30 }

    // { text: watermarkContent, x: 90, y: 10, angle: 30 },
    // { text: watermarkContent, x: 15, y: 20, angle: 30 },

    // 可以继续添加更多水印对象
  ];
  useEffect(() => {
    if (getCookie('web__token')) {
      _getwatermarkShow();
      // _getIP();
    }
  }, [getCookie('web__token')]);

  /**
 * @method 获取水印透明度
 */
  const _getWatermarkTrans = useCallback(async () => {
    const result = await getConfigByKey({ key:'watermark_transparency' });
    if (result && result.code === 0) {
      setWatermarkTrans(result.data.value || {});
    }
  }, []);

  /**
 * @method 获取水印大小
 */
  const _getwatermarkSize = useCallback(async () => {
    const result = await getConfigByKey({ key:'watermark_size' });
    if (result && result.code === 0) {
      setWatermarkSize(result.data.value || {});
    }
  }, []);

  /**
 * @method 获取水印开关
 */
  const _getwatermarkShow = useCallback(async () => {
    const result = await getConfigByKey({ key:'watermark_switch' });
    if (result && result.code === 0) {
      setWatermarkShow(result.data.value || {});
      if (result.data.value === '1') {
        setWatermarkContent(JSON.parse(getLocalStorage('__userInfo') || '').username + JSON.parse(getLocalStorage('__userInfo' || '')).name);
        _getWatermarkTrans();
        _getwatermarkSize();
      }
    }
  }, []);

  return (
    <>
      {watermarkShow === '1' && watermarkSize && watermarkTrans && watermarks.map((wm, index) => (
        <div
          key={index}
          className="watermark"
          style={{
            left: `${wm.x}%`,
            top: `${wm.y}%`,
            transform: `rotate(${wm.angle}deg)`,
            opacity: `${watermarkTrans}`,
            fontSize: `${watermarkSize}px`
          }}
        >
          <span>{wm.text}</span>
        </div>
      ))}
    </>
  );
};

export default Watermark;


// window.waterMark = function (config) {
//   const defaultConfig = {
//     content: '我是水印',
//     fontSize: '16px',
//     opacity: 0.3,
//     rotate: '-15',
//     color: '#ADADAD',
//     modalId: 'J_waterMarkModalByXHMAndDHL'
//   };
//   config = Object.assign({}, defaultConfig, config);
//   const existMarkModalDom = document.getElementById(config.modalId);
//   if (existMarkModalDom) {
//     document.body.removeChild(existMarkModalDom);
//   }
//   const markModalDom = document.createElement('div');
//   markModalDom.setAttribute('id', config.modalId);
//   markModalDom.style['position'] = 'fixed';
//   markModalDom.style['top'] = '60px';
//   markModalDom.style['left'] = '20px';
//   markModalDom.style['bottom'] = '0';
//   markModalDom.style['right'] = '0';
//   markModalDom.style['background-color'] = 'transparent';
//   markModalDom.style['pointer-events'] = 'none';
//   markModalDom.style['z-index'] = 9999;
//   markModalDom.style['overflow'] = 'hidden';
//   const markContentDom = document.createElement('span');
//   markContentDom.style['position'] = 'relative';
//   markContentDom.style['display'] = 'inline-block';
//   markContentDom.style['max-width'] = '33%';
//   markContentDom.style['min-width'] = '400px';
//   markContentDom.style['padding'] = '80px 0';
//   markContentDom.style['height'] = '100px';
//   markContentDom.style['text-align'] = 'center';
//   markContentDom.style['opacity'] = config.opacity;
//   markContentDom.style['pointer-events'] = 'none';
//   const markContentTxtDom = document.createElement('span');
//   markContentTxtDom.innerHTML = config.content;
//   markContentTxtDom.style['position'] = 'absolute';
//   markContentTxtDom.style['display'] = 'inline-block';
//   markContentTxtDom.style['pointer-events'] = 'none';
//   markContentTxtDom.style['top'] = '50%';
//   markContentTxtDom.style['left'] = '80%';
//   markContentTxtDom.style['transform'] =
//     'translate(-50%, -50%) rotate(' + config.rotate + 'deg)';
//   markContentTxtDom.style['font-size'] = config.fontSize;
//   markContentTxtDom.style['color'] = config.color;
//   markContentDom.appendChild(markContentTxtDom);
//   const contentHtml = markContentDom.outerHTML;
//   let allContentHtml = '';
//   for (let i = 0; i < 100; i++) {
//     allContentHtml += contentHtml;
//   }
//   markModalDom.innerHTML = allContentHtml;
//   document.body.appendChild(markModalDom);
// };