实用有效!React项目中使用watermark.js添加水印效果
为了避免公司的内部文档被截图外泄,有必要在系统页面上面增加水印。
第一步:
下载依赖包:
npm install watermark-dom
package.json中会添加一个依赖如下:
"watermark-dom": "^2.3.0"
第二步:
引入水印模块
import watermark from 'watermark-dom'
第三步:
在页面DOM加载完毕之后调用watermark.js的load方法(手动加载):
watermark.load({ watermark_txt: "测试水印" })
页面上水印成功展示
watermark提供内置方法:
- 初始化水印,添加load和resize事件
<script>watermark.init({ watermark_txt: "测试水印测试水印" })</script>
- 手动加载水印
<script>watermark.load({ watermark_txt: "测试水印测试水印" })</script>
- 移除水印
<script>watermark.remove({ watermark_txt: "测试水印测试水印" })</script>
- 根据使用场景,可配置水印参数
watermark_id: 'wm_div_id', //水印总体的id
watermark_prefix: 'mask_div_id', //小水印的id前缀
watermark_txt:"测试水印", //水印的内容
watermark_x:20, //水印起始位置x轴坐标
watermark_y:20, //水印起始位置Y轴坐标
watermark_rows:0, //水印行数
watermark_cols:0, //水印列数
watermark_x_space:100, //水印x轴间隔
watermark_y_space:50, //水印y轴间隔
watermark_font:'微软雅黑', //水印字体
watermark_color:'black', //水印字体颜色
watermark_fontsize:'18px', //水印字体大小
watermark_alpha:0.15, //水印透明度,要求设置在大于等于0.005
watermark_width:100, //水印宽度
watermark_height:100, //水印长度
watermark_angle:15, //水印倾斜度数
watermark_parent_width:0, //水印的总体宽度(默认值:body的scrollWidth和clientWidth的较大值)
watermark_parent_height:0, //水印的总体高度(默认值:body的scrollHeight和clientHeight的较大值)
watermark_parent_node:null //水印插件挂载的父元素element,不输入则默认挂在body上
示例地址(参数调试地址):https://www.mwcxs.top/static/testTool/index.html
实用有效!React项目中使用watermark.js添加水印效果相关推荐
- react项目中使用three.js(解决纹理贴图路径问题)
一,本文解决如下问题 1. 在react脚手架的项目中使用three.js 2. three.js在react中使用动态的纹理贴图遇到的路径问题 3. this.指向的丢失问题 二,在项目中使用thr ...
- 中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
- 了解CSS in JS(JSS)以及在React项目中配置并使用JSS
目录 认识JSS 什么是JSS JSS 的常见实现 JSS 的好处与坏处 好处 坏处 使用模块化CSS实现JSS 安装插件 在React项目中的tsconfig.json中添加配置 vscode项目中 ...
- react项目中使用mocha结合chai断言库进行单元测试
react项目中使用mocha结合chai断言库进行单元测试 git地址:https://github.com/yancekang/... 如果对你有所帮助,感谢start 项目搭建 create-r ...
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线 在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
- react前端显示图片_如何在react项目中引用图片?
如何在react项目中引用图片?本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法,希望对需要的小伙伴提供一些参考. 在react项目中插入图片以及背景图片的方法共有2种: 1.im ...
- React项目中请求跨域解决方法
React项目中请求跨域解决方法 今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
最新文章
- npm全局环境变量配置,全局配置cnpm
- java web手动部署_tomcat手动部署web项目的方法
- 2017面试分享(js面试题记录)
- CF838C-Future Failure【dp,子集卷积】
- java 缓存 30秒后失效_如何处理缓存失效、缓存穿透、缓存并发等问题
- mysql获取当月数据_Python + MySQL如何获取股票数据(历史数据)
- Spring -- spring 和 hibernate 整合
- JAVA多线程----用--取钱问题1
- 关于sizeof(struct student)的问题
- 新闻平台聚合之新浪新闻爬虫发布
- C# winform中 选择文件和保存文件
- 【通信原理】第四章 -- 信道
- h5支付不能打开支付宝 ios_iOS解决H5支付跳转到支付App及返回原App问题
- GTD时间管理阅读笔记
- 计算机网络机房安置要点,机房平面布置图
- 关于直播类app中的推流、拉流技术
- 目标检测:python实现多种图像数据增强的方法(光照,对比度,遮挡,模糊)
- 微信小程序--瀑布流加载
- 数据挖掘的分析软件和展示工具
- 赚的钱不花掉就不算自己的钱?
热门文章
- 计算机专业大学排名(全168所学校)
- 一定要时常清理QQ的七个文件夹(时间长占内存超大!)
- ddos流量攻击有多少G_攻击流量超过300G,遭遇DDoS时我们能做些什么?
- leeCode350_两个数组的交集
- python123第五周随机密码生成_利用Python生成随机密码
- APC型光纤活动连接器有何特点?适合使用在什么场景?
- Spark的conf目录下没有slaves文件,spark3.1.2解压以后conf目录下没有slaves,spark找不到slaves怎么办,解决slaves问题
- jvm优化_在JVM中记录世界停顿
- 威廉.布莱克 和 他的诗歌
- Python 解决execjs._exceptions.ProgramError: ReferenceError: document is not defined报错问题