How to realize the effect of page watermarking with react
This article will explain in detail how to achieve the effect of page watermarking with react. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
1. Use the example 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'))
two。 Realization process
Construct a watermark
Spread the watermark all over the container
Watermark component: support sub-component content slot
Construct a watermark graph of svg
Const {text = 'waterMark', fontSize = 16, fillOpacity =' 0.2, fillColor ='# 000'} = props const res = `$ {text} `
From the above code, we can get a string of svg xml, and then we turn it into a url resource
Const blob = new Blob ([res], {type: 'image/svg+xml',}) const url = URL.createObjectURL (blob)
As a result, we have a resource address for svg, and now we use it in the background map of div
At this point, we can easily get a div covered with watermarks. Let's integrate the code and package it into components.
3. Component code 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 = `$ {text} `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's article on "how react achieves page watermarking" ends here. Hope that the above content can be helpful to you, so that you can learn more knowledge, if you think the article is good, please share it for more people to see.
