vue+watermark-dom实现页面水印效果

前言

页面水印大家应该都不陌生,它可以用于验证数字媒体的来源和完整性,还可以用于版权保护和信息识别,这些信息可以在不影响媒体质量的情况下嵌入,‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库,教大家实现简单而有效的页面水印效果。


watermark-dom

watermark.js 是基于 DOM 对象实现的 BS 系统的水印,确保系统保密性,安全性,降低数据泄密风险,简单轻量,支持多属性配置,动态计算水印,水印防被删(监听水印组件元素删除并重新添加,监听改变水印的属性并重新添加)。


特性

  • 多属性配置,简单易上手;
  • 动态计算水印;
  • 水印防被删(监听水印组件元素删除并重新添加,监听改变水印的属性并重新添加);
  • 支持 2 种导入使用:本地引用,npm 引用;
  • 水印测试工具:testTool 工具;
  • 内置 3 种全局 API 方法:init()load(), remove()
  • 原理:pointer-events 事件穿透属性,Shadow DOM(影子 DOM),opacity 等。

一、安装

npm install watermark-dom

二、引入

import watermark from 'watermark-dom'

三、内置方法

1. watermark.init(setting)

这个方法用于初始化水印,可以设置水印的样式、内容和位置等参数。

栗子

watermark.init({watermark_txt: '测试水印',watermark_color: 'gray',watermark_fontsize: '24px',
})

2. watermark.load(setting)

用于手动加载水印。

栗子

const options = {watermark_txt: '测试水印',watermark_color: 'gray',watermark_fontsize: '24px',
}
watermark.load(options)

3. watermark.remove()

这个方法用于移除已加载的水印。

栗子

watermark.remove();

四、常用的属性和配置

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上

五、实例代码

<template><div style="height:100vh"></div>
</template><script>
import watermark from 'watermark-dom'
export default {mounted() {const watermarkText = '测试水印内容'const options = {watermark_txt: watermarkText,watermark_color: 'gray',watermark_fontsize: '14px',watermark_alpha: 0.5,watermark_angle: 15,watermark_width: 100,watermark_height: 20,}watermark.load(options)},
}
</script>

实现效果

在这里插入图片描述


六、非全屏展示

watermark_parent_node 属性用于指定水印的父节点,即确定水印应该显示在哪个 DOM 元素的内部。通过设置 watermark_parent_node 属性,可以控制水印的显示位置和范围。例如,如果你想要将水印显示在特定的 div 元素内部,可以将该 div 元素作为 watermark_parent_node。这样,水印将被限制在该 div 元素的范围内显示。

<template><div class="box"><div class="topBox"></div><div id="watermarkId" class="cenBox"></div><div class="bomBox"></div></div>
</template><script>
import watermark from 'watermark-dom'
export default {mounted() {const watermarkText = '测试水印内容'const options = {watermark_txt: watermarkText,watermark_color: 'gray',watermark_fontsize: '14px',watermark_alpha: 0.5,watermark_angle: 15,watermark_width: 100,watermark_height: 20,watermark_parent_node: 'watermarkId',}watermark.load(options)},
}
</script>
<style scoped>
.box {width: 100%;height: 100vh;
}
.topBox {height: 30vh;background: cadetblue;
}
.cenBox {height: 50vh;
}
.bomBox {height: 20vh;background: cornflowerblue;
}
</style>

实现效果
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/48601.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV 像素操作—证件照换底色详细原理 C++纯手写实现

文章目录 总体步骤1.RGB转HSV2.找出要换的底色3.取反&#xff0c;黑白颠倒4.将原图像的非背景部分复制到新背景上 完整代码1.C纯手写版2.官方API版本 总体步骤 1.RGB转HSV 为什么一定要转为HSV 颜色空间&#xff1f; 将图像从BGR颜色空间转换为HSV颜色空间是因为HSV颜色空间更…

redis+spring面试题

redis使用场景 缓存热点数据分布式锁存储token存储短信验证码计数器全局唯一数排行榜限流购物车关注粉丝 缓存失效 缓存穿透 缓存空结果布龙过滤器 缓存击穿 全局锁设置永不过期 缓存雪崩 设置高可用集群设置不同的过期时间本地二级缓存&#xff0c;限流加降级 数据一致性…

nginx基本原理

进程模型 当nginx启动之后&#xff0c;会有一个master进程和多个worker进程。默认是一个worker进程。 master进程的作用&#xff1a;接收来自外界信号&#xff0c;向各worker进程发送信号&#xff0c;监控worker进程的运行状态&#xff0c;当worker进程在异常情况下退出后&am…

C#实现数据采集系统-实现功能介绍

系统介绍 我们这里主要使用C#( .Net 6)来实现一个数据采集系统&#xff0c;从0到1搭建数据采集系统&#xff0c;从系统分析&#xff0c;功能拆解&#xff0c;到一一实现 数据采集 数据采集是企业信息化和数字化转型过程中的关键环节&#xff0c;它涉及到从生产设备、传感器…

jupyter_contrib_nbextensions安装失败问题

目录 1.文件路径长度问题 2.jupyter不出现Nbextensions选项 1.文件路径长度问题 问题&#xff1a; could not create build\bdist.win-amd64\wheel\.\jupyter_contrib_nbextensions\nbextensions\contrib_nbextensions_help_item\contrib_nbextensions_help_item.yaml: No su…

【艺术向】【素描创作记录】《如何为你的红颜知己创作一幅画像(之二)》

写在前面 之前分析过类似的创作过程&#xff0c;见博客【艺术向】【素描创作记录】《如何为你的红颜知己创作一幅画像》 本人业余时间修习素描多年&#xff0c;在此撰文记录《如何为你的红颜知己创作一幅画像&#xff08;之二&#xff09;》&#xff0c;博得对方好感&#xff…

Tracy 小笔记:微信小程序 mpx 雷达图的实现

使用文档&#xff1a; https://www.kancloud.cn/xchhhh/wx-chart/399337 https://github.com/xiaolin3303/wx-charts https://gitee.com/mirrors/wx-charts/#wx-charts 参数说明&#xff1a; https://github.com/xiaolin3303/wx-charts/issues/56 下载 dist 里的 wx-charts-…

替代JSON

确实存在多种数据存储格式&#xff0c;每种格式都有其特定的优势和适用场景。如果你正在寻找一种更易于人类阅读和编辑的数据格式&#xff0c;以下是一些替代 JSON 的选项&#xff1a; YAML (YAML Aint Markup Language): YAML 是一种直观的数据序列化格式&#xff0c;旨在使人…

C++常见问题

一、C入门基础 1.1、函数重载 函数重载允许在同一作用域内定义多个同名函数&#xff0c;只要这个函数的参数列表&#xff08;即参数的数量&#xff0c;类型或者顺序不同&#xff09; 如何支持&#xff1a;程序经过编译后&#xff0c;编译器会对程序中的函数按一定规则进行重…

设计模式-Git-其他

目录 设计模式&#xff1f; 创建型模式 单例模式&#xff1f; 啥情况需要单例模式 实现单例模式的关键点&#xff1f; 常见的单例模式实现&#xff1f; 01、饿汉式如何实现单例&#xff1f; 02、懒汉式如何实现单例&#xff1f; 03、双重检查锁定如何实现单例&#xff…

封装MAVSDK为JAR包并导出给其它Android工程用完整示例

效果: 未解锁状态 已执行解锁指令 已执行起飞指令 飞行中 已执行降落指令 已执行返航指令 实现步骤: 1.准备PX4容器并启动:

ip地址是电脑还是网线决定的

在数字化时代的浪潮中&#xff0c;网络已经成为了我们日常生活和工作不可或缺的一部分。当我们谈论网络时&#xff0c;IP地址无疑是一个核心的概念。然而&#xff0c;关于IP地址的分配和决定因素&#xff0c;很多人可能存在误解。有些人认为IP地址是由电脑决定的&#xff0c;而…

JMeter数据库连接操作及断言

一、数据库操作 应用场景&#xff1a; 接口自动化数据校验&#xff1a;用于验证接口返回的数据与数据库中的数据是否一致。特殊业务&#xff1a;处理一些与数据库相关的特殊业务逻辑。性能测试&#xff1a;测试数据库的性能&#xff0c;如查询、更新等操作的响应时间。 连接数…

springboot nacos的各种注解、手动操作监听配置变化(监听指定DataId/监听任何变化)

文章目录 springboot nacos监听配置变化&#xff08;监听指定DataId/监听任何变化&#xff09;监听任何配置变化Nacos注解NacosConfigurationPropertiesNacosValueNacosConfigListenerNacosInjectedNacosConfigServiceNacosNamingService springboot nacos监听配置变化&#xf…

QT--事件(丰富操作,高级功能)

一、事件 1.事件与信号的区别 事件来自外部&#xff0c;是随机发生的。信号来自内部&#xff0c;是主动发生的。有点像外中断和内中断的区别。事件&#xff1a;适用于处理系统级别的输入和状态变化&#xff0c;种类繁多&#xff0c;能够应对复杂的交互需求。信号/槽&#xff…

二分查找 | 绝对差值和

题目&#xff1a;1818. 绝对差值和 给你两个正整数数组 nums1 和 nums2 &#xff0c;数组的长度都是 n 。 数组 nums1 和 nums2 的 绝对差值和 定义为所有 |nums1[i] - nums2[i]|&#xff08;0 < i < n&#xff09;的 总和&#xff08;下标从 0 开始&#xff09;。 你…

中国 X86 CPU 技术源自何方

注&#xff1a; 原文发布于 2017 年&#xff0c;两篇合二为一。未与作者沟通&#xff0c;侵权&#xff0c;立删。 导语&#xff1a; Intel 对 X86 的授权有着极为严格的限制&#xff0c;那么上海兆芯的 X86 芯片技术到底从何而来&#xff1f;ZX-C 目前的短板在哪里&#xff1f;…

pytorch 46 将ASpanFormer模型导出onnx运行

ASpanFormer是一个2022年8月份发布的算法,其主要步骤与LoFTR模型类似,因此无法导出为onnx模型。根据ASpanFormer论文中的数据与效果图,可以确定AsPanFormer是可以作为一个比SP+SG更为有效的方案,其在标准数据集上的效果优于SP+SG,在速度上远超SP+SG,与LoFTR接近;在预测点…

k8s安装powerjob

k8s安装powerjob k8s安装powerjob 1、mysql mkdir -p ~/powerjob-ymlkubectl create ns powerjobcat > ~/powerjob-yml/powerjob-mysql.yml << EOF apiVersion: v1 kind: ConfigMap metadata:name: powerjob-mysql-confignamespace: powerjob data:my.cnf: |[mysql…

【深度学习入门项目】多层感知器(MLP)实现手写数字识别

多层感知器&#xff08;MLP&#xff09;实现手写数字识别 导入必要的包获得软件包的版本信息 下载并可视化数据查看一个batch的数据查看图片细节信息设置随机种子 定义模型架构Build model_1Build model_2 Train the Network (30 marks)Train model_1Train model_1Visualize th…