如何给web页面添加一个水印

微信搜一搜 “胖蔡话前端” 前端公众号，关注更多前端咨询。欢迎访问个人博客[EnjoyToday.cn)(http://www.enjoytoday.cn)

水印原理

我们经常看到很多网站图片上有水印信息，那么如何也在我们自己的网站上添加水印呢？其实原理很简单，接下来我们来简单了解下实现水印的思路：

canvas绘制水印文字
创建一个顶层div，并将canvas放在上面
js插入水印层div
实现水印
这里就不做过多的解释和铺垫了，咱直接上代码：

1、添加水印实现

// 页面添加水印效果
const setWatermark = (str) => {const id = '1.99654.234';if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));const can = document.createElement('canvas');can.width = 200;can.height = 130;const cans = can.getContext('2d');cans.rotate((-20 * Math.PI) / 180);cans.font = '12px Vedana';cans.fillStyle = 'rgba(200, 200, 200, 0.30)';cans.textBaseline = 'Middle';cans.fillText(str, can.width / 10, can.height / 2);const div = document.createElement('div');div.id = id;div.style.pointerEvents = 'none';div.style.top = '15px';div.style.left = '0px';div.style.position = 'fixed';div.style.zIndex = '10000000';div.style.width = `${document.documentElement.clientWidth}px`;div.style.height = `${document.documentElement.clientHeight}px`;div.style.background = `url(${can.toDataURL('image/png')}) left top repeat`;document.body.appendChild(div);return id;
};

2、水印添加和删除

/*** 页面添加水印效果* @method set 设置水印* @method del 删除水印*/
const watermark = {// 设置水印set: (str) => {let id = setWatermark(str);if (document.getElementById(id) === null) id = setWatermark(str);},// 删除水印del: () => {let id = '1.99654.234';if (document.getElementById(id) !== null) document.body.removeChild(document.getElementById(id));},
};

3、水印使用

// 开启水印
watermark.set('Enjoytoday.cn')// 关闭水印
watermark.del()

4、效果

如何给web页面添加一个水印相关推荐

给你的web页面添加盲水印，附带检盲水印方案
应用场景在一些敏感系统有的时候我们为了防止别人截图或追溯图片源头是谁发的.我们需要在页面上埋下我们的隐形水印. 开始做埋水印 github上有很多水印的js插件,download下来一个改一改,源 ...
使用JS（watermark）给HTML页面添加文字水印（全网最简单，最详细，复制即用，提供源码链接）
前言: 最近在做项目,PD提需求让做一个页面水印,百度到的答案好像大部分都是图片的,要么七七八八的,百度了好久,现在总结出来了这个精简中的精简版的教程,与大家分享.(源码下载链接在文章末尾,如果不想看 ...
前端给页面添加暗水印的办法
前端给页面添加暗水印的办法上一篇文章讲到了在页面上添加明水印的方法,但是明水印比较好清除,而且对于一些没做处理的图片,当用户直接保存的时候,是没有水印的,这时候信息泄露问题依然存在.为了解决这样的问 ...
前端页面添加全局水印或指定页面添加水印
前言为了防止信息泄露或知识产权被侵犯,在web的世界里,对于图片文档等增加水印处理是十分有必要的.水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加. 今天介绍的就是通过canv ...
web页面--前端明水印
采用canvas绘制图片,observe监听页面元素改变重新添加. 实现一个这种水印: <template><div id="water_mater" ref=& ...
计算机页面添加文字水印在哪,怎么添加水印-Word小技巧-快速添加高大上的水印...
不知道各位小伙伴是否见过这样的文档,带有类似[内部文件]/[严禁外泄]水印的文档,是不是觉得很高大上,神圣而不可侵犯的感觉油然而生?只需要一分钟,小编教你如何为文档快速添加水印. 一.添加水印切换到 ...
Jsp 页面添加动态水印
//从session 中读取需要的信息 <% javacommon.base.LoginUser user = (javacommon.base.LoginUser) session.getAt ...
css web页面实现一个弹窗
div 基本层级: <div class="pc-invest-join-container"><div class="bg-wrap"> ...
Android给文档加水印,android:给整个页面添加上水印
[实例简介] 这个demo实现了在整个activity上加上水印的效果,加上水印后对别的控件没有任何影响 [实例截图] [核心代码] WaterMark └── WaterMark ├── Andro ...

如何给web页面添加一个水印

水印原理

1、添加水印实现

2、水印添加和删除

3、水印使用

4、效果

如何给web页面添加一个水印相关推荐

最新文章

热门文章

如何给web页面添加一个水印

水印原理

1、 添加水印实现

2、水印添加和删除

3、水印使用

4、效果

如何给web页面添加一个水印相关推荐

最新文章

热门文章

1、添加水印实现