国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React組件封裝 - 實現水印功能

社區管理員 / 1149人閱讀

背景：在開發移動端內部應用的時候，涉及安全問題，我們經常在企業微信或者圖片上看到水印，防止信息被泄露，針對這次開發做個復盤，記錄下。

效果圖如下： image.png

一、實現原理

  • 1、首先用canvas繪制水印

  • 2、創建蒙層div，可以覆蓋在頁面上，并設置pointer-events:none屬性

  • 3、將canvas繪制的水印作為背景圖重復渲染在第二步創建的div上

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

二、組件封裝

1、新建移動端項目,具體見構建方法

2、定義組件接收的參數，包括水印覆蓋的樣式和文本內容

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

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

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

4、canvas繪制水印

這里設置水印大小，文字樣式，旋轉角度等，最終返回一個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 } 復制代碼

5、創建蒙層將上一步繪制的水印放在上面

設置蒙層div通過絕對定位放在文本表面，將canvas轉化成base64,作為背景圖重復渲染在蒙層上。 這樣設置會導致，頁面服務點擊操作，這時候要設置 pointer-events: none; 讓蒙層鼠標事件失效。這樣不影響實際內容的操作。

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 } 復制代碼

6、渲染水印

生成了蒙層，并且渲染了水印，調用生成水印函數，獲取要渲染水印的容器，并給其中插入水印div, 這里要排除下節點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));       }     });   }; 復制代碼

7、調用

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

三、demo示例

yarn安裝

yarn add ucloud-ui 復制代碼

npm安裝

npm install -S ucloud-ui 復制代碼

使用

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">                     本協議將對用戶使用本產品的行為產生法律約束力，您已承諾和保證有權利和能力訂立本協議。用戶開始使用本產品將視為已經接受本協議，請認真閱讀并理解本協議中各種條款，包括免除和限制我們的免責條款和對用戶的權利限制（未成年人審閱時應由法定監護人陪同），如果您不能接受本協議中的全部條款，請勿開始使用本產品。                 </header>                 <div>                     <h4>一、使用賬戶</h4>                     <p className="text-indent-2">                         您必須承諾和保證： 1. 您使用本產品的行為必須合法                         本產品將會依據本協議“修改和終止”的規定保留或終止您的賬戶。您必須承諾對您的登錄信息保密、不被其他人獲取與使用，并且對您在本賬戶下的所有行為負責。您必須將任何有可能觸犯法律的、未授權使用或懷疑為未授權使用的行為在第一時間通知本產品。本產品不對您因未能遵守上述要求而造成的損失承擔法律責任。                     </p>                 </div>             </div>         </WaterMark>     ); } export default Demo;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/127949.html

相關文章

  • React組件封裝 - 實現水印功能

    背景：在開發移動端內部應用的時候，涉及安全問題，我們經常在企業微信或者圖片上看到水印，防止信息被泄露，針對這次開發做個復盤，記錄下。效果圖如下： 一、實現原理1、首先用canvas繪制水印2、創建蒙層div，可以覆蓋在頁面上，并設置pointer-events:none屬性3、將canvas繪制的水印作為背景圖重復渲染在第二步創建的div上4、將第三步水印div插入容器中二、組件封裝1、新建移動端...

    社區管理員 評論0 收藏0

  • 多功能React影像組件(拖拽、水印、縮放、切換、旋轉)

    摘要：移動的過程中可以通過拿到元素的坐標，記為。向上滾動放大，向下滾動縮小這里要注意控制最小縮放值。還要注意的是圖片在邊界的縮放，不然圖片可能會移動在屏幕外。代碼實現控制滾輪縮放計算縮放后的大小每一次滾輪限制最小不讓由于縮小消失在視野中 cxj-react-image 用法如下： yarn add cxj-react-image // npm i cxj-react-image import...

    soasme 評論0 收藏0

  • 如何用vue封裝一個防用戶刪除的平鋪頁面的水印組件

    摘要：需求為了防止截圖等安全問題，在項目頁面中生成一個平鋪全屏的水印要求水印內容為用戶名，水印節點用戶不能通過開發者工具等刪除效果如上圖在節點下插入水印節點，水印節點覆蓋在頁面最上層但不影響頁面正常操作在通過或者用戶通過開發者工具刪除或修改水印節 需求 showImg(https://segmentfault.com/img/remote/1460000017297879?w=1448&h=...

    yagami 評論0 收藏0

  • SpreadJS 純前端表格控件 V12.2 發布更新

    摘要：用不到行代碼，在前端實現的全部功能千萬前端開發者翹首企盼，終發布更新六大功能特性，帶來更多便利，用不到行代碼，在前端實現的全部功能是一款基于的純前端電子表格控件，以高速低耗高度類似可無限擴展為產品特色，提供移動跨平臺和瀏覽器支持，同時滿足等 用不到100行代碼，在前端實現Excel的全部功能 千萬前端開發者翹首企盼，SpreadJS V12.2 終發布更新：六大功能特性，帶來更多便利，...

    FrozenMap 評論0 收藏0

發表評論

0條評論

社區管理員

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<