react 添加水印

最新推荐文章于 2024-07-25 17:14:51 发布

weixin_48648178

最新推荐文章于 2024-07-25 17:14:51 发布

阅读量632

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48648178/article/details/131917709

版权

//这个水印组件
import React, { memo, useMemo } from "react"
import styled from 'styled-components';
import { renderToString } from "react-dom/server";
const Index = (props: React.PropsWithChildren<{ text: string, fillColor?: string, fillOpacity?: number, fontSize?: number }>) => {
  const svgUrl = useMemo(() => {
    const svgRes = (<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="300px" height="180px" viewBox="0 0 300 180">
      <text x="-160" y="-30" fill={props.fillColor || '#fff'} transform="rotate(-35 220 -220)" fillOpacity={props.fillOpacity || '0.1'}
        fontSize={`${props.fontSize || '28'}px`}> {props.text}</text>
    </svg>)
    return URL.createObjectURL(new Blob([renderToString(svgRes)], {
      type: 'image/svg+xml',
    }))
  }, [props]);


  return (<WaterMaker
    style={{ backgroundImage: `url(${svgUrl})` }}
  >
  </WaterMaker>)

}

export default memo(Index)
const WaterMaker = styled.div`
 position: absolute;
 width: 100%;
 height: 100%;
 pointer-events: none;
 top: 0;
 left: 0;
 z-index: 999;
`

//使用  <Water text='水印水印'/>