背景：在開發(fā)移動(dòng)端內(nèi)部應(yīng)用的時(shí)候，涉及安全問題，我們經(jīng)常在企業(yè)微信或者圖片上看到水印，防止信息被泄露，針對(duì)這次開發(fā)做個(gè)復(fù)盤，記錄下。

效果圖如下：

一、實(shí)現(xiàn)原理

• 1、首先用canvas繪制水印

• 2、創(chuàng)建蒙層div，可以覆蓋在頁面上，并設(shè)置pointer-events:none屬性

• 3、將canvas繪制的水印作為背景圖重復(fù)渲染在第二步創(chuàng)建的div上

• 4、將第三步水印div插入容器中

二、組件封裝

1、新建移動(dòng)端項(xiàng)目,具體見構(gòu)建方法

2、定義組件接收的參數(shù)，包括水印覆蓋的樣式和文本內(nèi)容

import PropTypes from 'prop-types' WaterMark.propTypes = {   className: PropTypes.string,   txt: PropTypes.string,   restProps: PropTypes.object } WaterMark.defaultProps = {   txt: "watermark" } 復(fù)制代碼

3、創(chuàng)建容器，將需要打水印的頁面包含其中

<div       className={`watermark_wrapper ${className ? `${className}` : ""}`}       style={{ position: "relative" }}       {...restProps}     >       {children} </div> 復(fù)制代碼

4、canvas繪制水印

這里設(shè)置水印大小，文字樣式，旋轉(zhuǎn)角度等，最終返回一個(gè)canvas。

const generateWaterLog = (content) => {     const canvas = document.createElement("canvas");     canvas.setAttribute("width", "100px");     canvas.setAttribute("height", "100px");     const ctx = canvas.getContext("2d");     ctx.textAlign = "center";     ctx.textBaseline = "middle";     ctx.fontSize = 24;     ctx.fillStyle = "rgba(184, 184, 184, 0.8)";     ctx.rotate(-(Math.PI / 180) * 30);     ctx.fillText(content, 100 / 2, 100 / 2);     return canvas } 復(fù)制代碼

5、創(chuàng)建蒙層將上一步繪制的水印放在上面

設(shè)置蒙層div通過絕對(duì)定位放在文本表面，將canvas轉(zhuǎn)化成base64,作為背景圖重復(fù)渲染在蒙層上。 這樣設(shè)置會(huì)導(dǎo)致，頁面服務(wù)點(diǎn)擊操作，這時(shí)候要設(shè)置 pointer-events: none; 讓蒙層鼠標(biāo)事件失效。這樣不影響實(shí)際內(nèi)容的操作。

const generateWaterMark = (canvas) => {     const bg_url = canvas.toDataURL()     const waterMarkDiv = document.createElement("div");     const style = `       position: absolute;       top: 0;       left: 0;       width: 100%;       height: 100%;       z-index: 1000;       pointer-events: none;       background-repeat: repeat;       background-image: url('${bg_url}')     `;     waterMarkDiv.setAttribute("style", style);     waterMarkDiv.setAttribute("class", "watermark-bg");     return waterMarkDiv } 復(fù)制代碼

6、渲染水印

生成了蒙層，并且渲染了水印，調(diào)用生成水印函數(shù)，獲取要渲染水印的容器，并給其中插入水印div, 這里要排除下節(jié)點(diǎn)className為水印蒙層的div

generateTextWatermark(txt, document.body.querySelectAll(".watermark_wrapper")) const generateTextWatermark = (content, container) => {     const canvas = generateWaterLog(content)     const waterMarkDiv = generateWaterMark(canvas)     Array.from(container).forEach((node) => {       if (!node.getElementsByClassName("watermark-bg").length) {         node.appendChild(waterMarkDiv.cloneNode(true));       }     });   }; 復(fù)制代碼

7、調(diào)用

import { WaterMark } from "../../components" <WaterMark>     <div>需要添加水印的文本</div> </WaterMark> 復(fù)制代碼

三、demo示例

yarn安裝

yarn add ucloud-ui 復(fù)制代碼

npm安裝

npm install -S ucloud-ui 復(fù)制代碼

使用

import React from "react"; import { WaterMark } from 'ucloud-ui' function Demo() {     return (         <WaterMark>             <div className="padding10 font-size-14 demo">                 <h2 className="text-center font-size-16">水印DEMO</h2>                 <header className="text-indent-2">                     本協(xié)議將對(duì)用戶使用本產(chǎn)品的行為產(chǎn)生法律約束力，您已承諾和保證有權(quán)利和能力訂立本協(xié)議。用戶開始使用本產(chǎn)品將視為已經(jīng)接受本協(xié)議，請(qǐng)認(rèn)真閱讀并理解本協(xié)議中各種條款，包括免除和限制我們的免責(zé)條款和對(duì)用戶的權(quán)利限制（未成年人審閱時(shí)應(yīng)由法定監(jiān)護(hù)人陪同），如果您不能接受本協(xié)議中的全部條款，請(qǐng)勿開始使用本產(chǎn)品。                 </header>                 <div>                     <h4>一、使用賬戶</h4>                     <p className="text-indent-2">                         您必須承諾和保證： 1. 您使用本產(chǎn)品的行為必須合法                         本產(chǎn)品將會(huì)依據(jù)本協(xié)議“修改和終止”的規(guī)定保留或終止您的賬戶。您必須承諾對(duì)您的登錄信息保密、不被其他人獲取與使用，并且對(duì)您在本賬戶下的所有行為負(fù)責(zé)。您必須將任何有可能觸犯法律的、未授權(quán)使用或懷疑為未授權(quán)使用的行為在第一時(shí)間通知本產(chǎn)品。本產(chǎn)品不對(duì)您因未能遵守上述要求而造成的損失承擔(dān)法律責(zé)任。                     </p>                 </div>             </div>         </WaterMark>     ); } export default Demo;