watermark-dom 水印不显示

最新推荐文章于 2024-05-14 09:52:46 发布
最新推荐文章于 2024-05-14 09:52:46 发布
阅读量294 收藏
点赞数
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samll_redhat/article/details/135109592
版权

引入watermark-dom 之后，代码也按照文档写好了，也有水印的元素了，但是就是不显示水印

查看元素，发现shadow-root 里面啥也没有

查看源代码发现  shadowRoot 添加水印的这行代码根本没执行

接着往上查，发现没有进入这个循环，打印了 defaultSettings.watermark_cols  发现是-0

找到  defaultSettings.watermark_cols  赋值的地方继续查找

终于，找见是因为page_height 值是0  也就是 document.body 的高度是0

于是在index.html中 给body 设置上高度   显示成功！

 

small_redhat
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实用有效！React项目中使用watermark.js添加水印效果
TiAmo ????的博客
05-10 2999
React项目中使用watermark.js添加水印效果 第一步： 下载依赖包： npm install watermark-dom package.json中会添加一个依赖如下： "watermark-dom": "^2.3.0" 第二步： 引入水印模块 import watermark from 'watermark-dom' 第三步： 页面DOM加载完毕之后使用 watermark.load({ watermark_txt: "水印test", // 水印的内容 watermark_co
watermark-dom:watermark.js是基于DOM对象实现的BS系统的水印，确保系统保密性，安全性，降低数据泄密风险，简单轻量，支持多属性配置，动态计算水印，水印防被删（监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加）。1、支持2种方式导入使用，2、水印插件-testTool（测试工具），3、内置3种全局API方法，等等。欢迎访问：
05-04
watermark.js是基于DOM对象实现的BS系统的水印，确保系统保密性，安全性，降低数据泄密风险，简单轻量，支持多属性配置，动态计算水印，水印防被删（监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加）。 特性： 多属性配置，简单易上手 动态计算水印 水印防被删(监听水印组件元素删除并重新添加，监听改变水印的属性并重新添加) 支持2种导入使用：本地引用，npm引用 水印测试工具：testTool工具 内置3种全局API方法：init()，load(), remove()。 原理：pointer-events事件穿透属性，Shadow DOM(影子DOM)，opacity等 注意：基于本项目源码从事科研、论文、系统开发，"最好"在文中或系统中表明来自于本项目的内容和创意，否则所有贡献者可能会鄙视你和你的项目。 使用本项目源码请尊重程序员职业和劳动 1、版本及功能 版本v 2.
推荐使用：watermark-dom - 强大的Web端DOM水印解决方案
最新发布
gitblog_00076的博客
05-14 591
推荐使用：watermark-dom - 强大的Web端DOM水印解决方案 项目地址:https://gitcode.com/saucxs/watermark-dom 在网络安全日益重要的今天，保护信息的安全性和隐私成为了每个开发者的重要任务。为此，我们向您推荐一款名为watermark-dom的开源项目，它是一个基于DOM实现的网页水印库，能够帮助您的BS系统轻松实现保密性和安全性的提升。 1、...
vue添加水印踩坑
weixin_43656393的博客
05-31 3613
vue添加水印
Vue 2.0中使用watermark-dom 添加水印
越陌度阡
12-10 6076
Watermark-dom是一个可以给网页添水印、移除水印的插件，并可以对水印的样式进行许多丰富的设置。 以下是在Vue中使用该插件的方式： <template> <!-- App.vue 文件--> <div id="app"> <router-view /> </div> </template> <script> // 安装文件,如果安装报错，可以用cnpm // npm
jquery.watermark.js 在网页中添加水印，打印时水印背景不见了，办法来了
qq_34720531的博客
11-09 5554
如果不加下面的重点内容，打印预览的就没有水印，水印会被压在底下，当然可以手动选择背景，但是这样水印就没有意义了。 ** 重点来了 /* 谷歌浏览器 / -webkit-print-color-adjust: exact; print-color-adjust: exact; / 火狐浏览器 */ color-adjust: exact; ** 页面css @charset "utf-8"; /* html { background: #fcfcfc; } */ .data-table { prin.
简单水印（watermark-dom）和算法水印（频域方式图片合并）实现
weixin_33720956的博客
04-17 2708
一、简单水印（watermark-dom） 阿里巴巴内网的不可见水印用的是什么算法？ 据说月饼事件截图的那位员工也被开除了？ 下面的只是简单的加一个很浅的水印，实现起来很容易。 1、看看水印的效果 随便找一个网站，比如就找掘金的个人首页， （1）F12检查模式， （2）在console里粘贴下面的代码， (function(watermark){window.watermarkdivs=[];va...
WaterMark
liangoo7的专栏
05-02 813
.hint { color: gray; } var hintClassName="hint"; var domainNamesHint = "this is a line for water mark"; YAHOO.util.Event.onDOMReady(function () { // initial water mark showWaterMark(Get(formName+
vant watermark HTML 水印 无法加载数据
weixin_39765793的博客
10-20 268
解决vue3 vant4 水印数据无法加载
超实用！3步教你使用watermark.js在项目中添加水印效果
weixin_43847799的博客
07-21 3475
项目（vue项目）涉及很多数据，为保障安全，需要对数据项目做一个前端防护——加水印！ 使用的插件为 watermark-dom ,接下来分三步走，实现水印保护。 第一步：引入依赖包 下载依赖包： npm install watermark-dom 引入使用： import watermark from 'watermark-dom' 或 var watermarkDom = require("watermark-dom") 第二步：配置水印参数 水印参数配置表（并非全部必须）： watermark.
watermark.js
09-13
该插件支持vue单独区域绘制用户自定义的水印，可以直接在项目中使用。
水印工具WaterMarker
01-04
水印工具，详情请关注博客：http://blog.csdn.net/ghostbear
watermark.rar
07-25
总的来说，JS实现的Watermark技术是一种灵活且实用的方法，它结合了JavaScript的动态性和DOM操作的灵活性，能够为网页提供自定义的水印效果。通过理解这一技术，开发者不仅可以保护网页内容，还可以提升用户体验，使...
前端Vue添加水印功能
11-17
在实际开发中，你可能需要根据项目需求对水印进行更精细的定制，例如动态生成水印、根据用户权限显示/隐藏水印等。可以通过监听数据变化或者结合Vue的生命周期钩子来实现这些功能。 总的来说，Vue.js提供了一种灵活...
基于jquery的页面水印插件可以使用多个水印文字并且行之间错开
08-12
在描述中提到的功能是这个插件的一个扩展，允许添加多个水印文字，并且能够在页面上错开显示，提供更加灵活的视觉效果。 要实现这个功能，我们需要做以下几步： 1. **引入jQuery库**：首先确保在HTML文件中包含了...
【vue】页面添加水印
loyd3的博客
01-12 500
通过js代码添加水印，注意一些设置的参数 function watermark(settings) { debugger; //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:20,//水印行数 watermark_
watermark-dom水印控制水印大小自适应
limmt2020的博客
09-14 1115
watermark-dom水印控制水印大小自适应。
使一个dom不可见的几种方法——隐藏元素
wuxian_wj的博客
01-20 3621
隐藏元素的方法有很多，这里我们就来整理具体有哪几种方法，它们谁是真正的隐藏，谁只是视觉不可见，以及效果上都有什么区别，在开发过程中大家斟酌使用。 隐藏元素的方法 display: none visibility: hidden opacity: 0 <div hidden></div> position: absolute; top: -9999px; left: -9999px; clip-path: polygon(0 0, 0 0, 0 0, 0 0) width: 0; h
npm install watermark-dom
05-12
watermark-dom是一个在HTML页面中为图片或者文本添加水印的工具库。它可以轻松地为你的网站添加自定义的水印，用于保护你的数据和知识产权。使用watermark-dom，你可以在浏览器端通过JavaScript代码在文本或者图片上添加水印。安装watermark-dom可以使用npm包管理器，在命令行中输入“npm install watermark-dom”即可安装。安装完成后，你可以在你的项目中引入该库并开始使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值