Shulou(Shulou.com)06/03 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.