react实现页面水印效果的全过程
前言
1.为什么选用svg 而不是cavans?
因为cavans 在高分辨率屏幕下,需要根据 devicePixelRatio做宽高的适配,不然就会很模糊,而svg是矢量图,原生支持各种分辨率,不会产生模糊的情况。
1.使用示例
import React from 'react' import ReactDOM from 'react-dom' import './index.css' import WaterMarkContent from './components/WaterMarkContent' import App from './App' ReactDOM.render( <React.StrictMode> <WaterMarkContent> <App /> </WaterMarkContent> </React.StrictMode>, document.getElementById('root') )
2.实现过程
- 构造一个水印图
- 将水印图铺满整个容器
- 水印组件:支持子组件内容插槽
构造一个svg 的水印图
const { text = 'waterMark', fontSize = 16, fillOpacity = '0.2', fillColor = '#000' } = props const res = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="180px" viewBox="0 0 180 180"> <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text> </svg>`
由上面的代码,我们可以得到一个svg xml 的字符串,接下来我们将它变成url 资源
const blob = new Blob([res], { type: 'image/svg+xml', }) const url = URL.createObjectURL(blob)
由此,我们就得到了一个svg 的资源地址,现在我们将它用于div 的背景图当中
<div style={{ position: 'absolute', width: '100%', height: '100%', backgroundImage: `url(${url})`, top: 0, left: 0, zIndex: 999, pointerEvents: 'none', //点击穿透 }} ></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 = ` <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180px" height="180px" viewBox="0 0 180 180"> <text x="-100" y="-30" fill='${fillColor}' transform = "rotate(-35 220 -220)" fill-opacity='${fillOpacity}' font-size='${fontSize}'> ${text}</text> </svg>` const blob = new Blob([res], { type: 'image/svg+xml', }) const url = URL.createObjectURL(blob) return ( <div style={{ position: 'absolute', width: '100%', height: '100%', backgroundImage: `url(${url})`, top: 0, left: 0, zIndex: 999, pointerEvents: 'none', //点击穿透 }} ></div> ) } type propsType = { children?: ReactNode } & Partial<svgPropsType> const WaterMarkContent = (props: propsType) => { const { text, fontSize, fillOpacity, fillColor } = props const memoInfo = useMemo( () => ({ text, fontSize, fillOpacity, fillColor, }), [text, fontSize, fillOpacity, fillColor] ) return ( <div style={{ position: 'relative', width: '100%', height: ' 100%' }}> {props.children} <SvgTextBg {...memoInfo} /> </div> ) } export default WaterMarkContent
总结
到此这篇关于react实现页面水印效果的文章就介绍到这了,更多相关react实现页面水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
react-router-dom入门使用教程(前端路由原理)
这篇文章主要介绍了react-router-dom入门使用教程,主要包括react路由相关理解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08react中关于函数调用()与bind this的原因及分析
这篇文章主要介绍了react中关于函数调用()与bind this的原因及分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-02-02ReactQuery系列React Query 实践示例详解
这篇文章主要为大家介绍了ReactQuery系列React Query 实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-11-11
最新评论