給整個頁面新增水印
阿新 • • 發佈:2022-04-11
/* * EXAMPLE * text 水印文字 * parentId 父級DOM節點ID 相對定位 可選 預設當前父級元素 * density 密度 上下 左右 預設 50 30 * styleObj 水印樣式 * <Watermark parentId='#candidate_wrapper' density='50px 30px' styleObj={}/> * */ // Watermark.js import React, { useEffect, useRef } from "react"; import html2canvas from "html2canvas"; const default_style = { position: "absolute", left: "-100%", top: "-100%", transform: "rotate(-15deg)", color: "rgba(0,0,0,.06)", fontSize: "14px", }; const observerOption = { childList: true, attributes: true, subtree: true, attributeFilter: ["style"], attributeOldValue: true, }; const watermarkCanvas = { current: null }; /** * @return {boolean} */ function Watermark(props) { const { styleObj = default_style, text = "我是水印", parentId, density = "50px 30px", } = props; const nodeRef = useRef(); const parentNodeRef = useRef(); useEffect(() => { parentNodeRef.current = parentId ? document.querySelector(`#${parentId}`) : nodeRef.current.parentNode; parentNodeRef.current.style.backgroundAttachment = `fixed`; parentNodeRef.current.style.backgroundPosition = `top center`; if (watermarkCanvas.current) { loadMark(); } else { html2canvas(nodeRef.current, { scale: 1 }).then((canvas) => { watermarkCanvas.current = canvas.toDataURL("image/png"); loadMark(); }); } const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; const watermarkDom = new MutationObserver(observerCallback); watermarkDom.observe(parentNodeRef.current, observerOption); }, []); const loadMark = () => { if (watermarkCanvas.current) { parentNodeRef.current.style.backgroundImage = `url(${watermarkCanvas.current})`; } }; const observerCallback = () => { loadMark(); }; return watermarkCanvas.current ? ( <div ref={(watermarkText) => (nodeRef.current = watermarkText)} /> ) : ( <div style={{ ...styleObj, padding: density }} ref={(watermarkText) => (nodeRef.current = watermarkText)} > {text} </div> ); } export default Watermark;
import React from "react"; import Watermark from "@/components/public/Watermark/Watermark"; interface IUserInfo { name: string; englishName: string; originId: number; } export interface IProps { userInfo: IUserInfo; } const Index: React.FC<IProps> = props => { const { userInfo } = props; return ( <div> <div>我是內容</div> {userInfo.name && ( <Watermark text={`${userInfo.name} ${userInfo.englishName} - ${userInfo.originId}`} /> )} </div> ); }; export default Index;