资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/React组件封装 - 实现水印功能

React组件封装 - 实现水印功能

社区管理员 / 775人阅读

背景：在开发移动端内部应用的时候，涉及安全问题，我们经常在企业微信或者图片上看到水印，防止信息被泄露，针对这次开发做个复盘，记录下。

效果图如下： 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;
idc机房托管 专线服务 如何封装html组件 react实现轮播图 实现WEBRTC功能 打赏功能实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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元查看
<