总结一下前端实现水印的方式

前几天项目中要给页面添加水印,在这里总结下实现水印的方法

1:给图片增加水印(react版本的水印组件)

svg方式,无dom的插入操作

import React, { useEffect, useState } from 'react';

export default function WaterMark(props) {
  // 获取水印数据
  const { blogName, age } = {
    blogName: 'superTiger',
    age: 22,
  };
  const boxRef = React.createRef();
  const [waterMarkStyle, setWaterMarkStyle] = useState('180px 120px');
  const [isError, setIsError] = useState(false);
  const {
    src = '//hbimg.huabanimg.com/4148fde6995768d0370232e775a9b050c2b9c5ccdbe7-hfuvQn_fw658/format/webp',
    text = `${blogName}-${age}`,
  } = props;
  // 设置背景图和背景图样式
  const boxStyle = {
    backgroundSize: waterMarkStyle,
    backgroundImage: `url("data:image/svg+xml;utf8,")`,
  };
  const onLoad = (e) => {
    const dom = e.target;
    const { previousSibling, nextSibling, offsetLeft, offsetTop } = dom;
    // 获取图片宽高
    const { width, height } = getComputedStyle(dom);
    if (parseInt(width.replace('px', '')) < 180) {
      setWaterMarkStyle(`${width} ${height.replace('px', '') / 2}px`);
    }
    previousSibling.style.height = height;
    previousSibling.style.width = width;
    previousSibling.style.top = `${offsetTop}px`;
    previousSibling.style.left = `${offsetLeft}px`;
    // 加载 loading 隐藏
    // nextSibling.style.display = 'none';
  };
  const onError = (event) => {
    setIsError(true);
  };
  return (
    

      

      <>
        
      
      )
    
  );
}

使用:

import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import WaterMark from './WaterMark';
export default function Index() {
  const handleClick = (params) => {
    console.log(params, '--');
  };

  useEffect(() => {}, []);
  return (
    <>
      
      

        {data?.blogName}
      
      
        测试
      
    
  );
}

2:给页面增加水印

js版本,挂在window上,全局调用

/**

*** config 配置 全部非必填 ***
{
    content: 'ChiefClouds XHM', // 文本内容
    fontSize: '16px', // 字体大小
    opacity: 0.5, // 透明度
    rotate: '-10', // 偏转角度
    color: '#ADADAD', // 字体颜色
    modalId: 'J_waterMarkModalByXHMAndDHL' // 浮层DomId
}

*** 使用方式 ***
页面引入 waterMark.js 文件
执行 waterMark(特定配置参数) 方法

每次调用会生成新的 DOM 实例， 支持传入新配置， 动态创建新实例
*/

window.waterMark = function (config) {
  var defaultConfig = {
    content: '我是水印',
    fontSize: '16px',
    opacity: 0.5,
    rotate: '-10',
    color: '#ADADAD',
    modalId: 'J_waterMarkModalByXHMAndDHL',
  }

  config = Object.assign({}, defaultConfig, config)

  var existMarkModalDom = document.getElementById(config.modalId)
  if (existMarkModalDom) {
    // return;
    document.body.removeChild(existMarkModalDom)
  }

  var markModalDom = document.createElement('div')
  markModalDom.setAttribute('id', config.modalId)
  markModalDom.style['position'] = 'fixed'
  markModalDom.style['top'] = 0
  markModalDom.style['left'] = 0
  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'

  var 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'

  var 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'] = '50%'
  markContentTxtDom.style['transform'] =
    'translate(-50%, -50%) rotate(' + config.rotate + 'deg)'
  markContentTxtDom.style['font-size'] = config.fontSize
  markContentTxtDom.style['color'] = config.color

  markContentDom.appendChild(markContentTxtDom)

  // return

  var contentHtml = markContentDom.outerHTML
  var allContentHtml = ''
  for (var i = 0; i < 100; i++) {
    allContentHtml += contentHtml
  }

  markModalDom.innerHTML = allContentHtml

  document.body.appendChild(markModalDom)
}

使用:

import React, { useEffect } from 'react';
import { cloneDeep } from 'lodash';
import { Button } from 'antd';
// 引入
import './waterMark';
export default function Index() {
  const data = cloneDeep({
    blogName: 'superTiger',
    age: 22,
  });
  useEffect(() => {
   // 调用
    waterMark();
  }, []);
  return (
    <>
      

        {data?.blogName}
      
      测试
    
  );
}

效果: