react如何实现页面水印效果

这篇文章将为大家详细讲解有关react如何实现页面水印效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

1.使用示例

import React from 'react'import ReactDOM from 'react-dom'import './index.css'import WaterMarkContent from './components/WaterMarkContent'import App from './App'ReactDOM.render(                  ,  document.getElementById('root'))

2.实现过程

• 构造一个水印图
  

• 将水印图铺满整个容器

• 水印组件：支持子组件内容插槽

构造一个svg 的水印图

  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = props  const res = `      `

由上面的代码，我们可以得到一个svg xml 的字符串，接下来我们将它变成url 资源

 const blob = new Blob([res], {    type: 'image/svg+xml',  }) const url = URL.createObjectURL(blob)

由此，我们就得到了一个svg 的资源地址，现在我们将它用于div 的背景图当中

至此，我们很轻松的得到了一个铺满水印的div，下面我们将代码整合，并封装成组件。

3.组件代码

import React from 'react'import { ReactNode, useMemo } from 'react'type svgPropsType = {  text?: string  fontSize?: number  fillOpacity?: number  fillColor?: string}const SvgTextBg = (props: svgPropsType) => {  const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = props  const res = `      `  const blob = new Blob([res], {    type: 'image/svg+xml',  })  const url = URL.createObjectURL(blob)  return (    
  )}type propsType = {  children?: ReactNode} & Partialconst WaterMarkContent = (props: propsType) => {  const { text, fontSize, fillOpacity, fillColor } = props  const memoInfo = useMemo(    () => ({      text,      fontSize,      fillOpacity,      fillColor,    }),    [text, fontSize, fillOpacity, fillColor]  )  return (    
      {props.children}          
  )}export default WaterMarkContent

关于"react如何实现页面水印效果"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。