canvas实现添加水印
canvas添加水印思路
1.在画布上写上水印的名称(时间加上用户名)
2.canvas转化为base64，作为body的背景色
3.优化倾斜度和透明度
4.如果用户去除body的style水印消失
5.鸡肋 MutationObserver
在画布上写上水印的名称
<body>
<canvas id="canvasDom" ></canvas>
<script>
// 获取当前时间
function curentTime(userName='张三'){
let newTime = new Date();
// 获取年
let newYarn = newTime.getFullYear()
// 获取月
let newMonth = (newTime.getMonth() + 1) > 9 ? ( newTime.getMonth() + 1) : "0" + ( newTime.getMonth() + 1);
// 获取时间
let newDay = newTime.getDate() > 9 ? newTime.getDate() : "0"+date.getDate();
return newYarn + '-' + newMonth +' -' + newDay + '-'+ userName
}
// 获取dom节点
let canvasDom=document.getElementById('canvasDom')
// 设置canvas的大小
canvasDom.width=800
canvasDom.height=460
// 获取canvs上下文
const ctx= canvasDom.getContext('2d')
//设置文字的大小 以及字体样式
ctx.font = "30px Verdana"
// 填充文字以及位置
ctx.fillText(curentTime(), 100,100)
</script>
</body>
canvas转化为base64，作为body的背景色
我们使用 toDataURL('image/png')将画布转为base64.
然后在在将它作为背景色设置在body上。
这样我们就实现了水印的添加
// 获取dom节点
let canvasDom=document.getElementById('canvasDom')
// 设置canvas的大小
canvasDom.width=800
canvasDom.height=460
// canvas重叠部分隐藏
canvasDom.style.display='none'
// 获取canvs上下文
const ctx= canvasDom.getContext('2d')
//设置文字的大小 以及字体样式
ctx.font = "30px Verdana"
// 填充文字以及位置
ctx.fillText(curentTime(), 30,210)
// 将它转化为base64
const img=canvasDom.toDataURL('image/png')
console.log('img', img)
let body = document.getElementById('body')
body.setAttribute('style',`background-image:url("${img}")`)
优化倾斜度和透明度
// 设置透明度
ctx.fillStyle = 'rgba(0,0,0,.3)'
// 设置倾斜度
ctx.rotate(0.2)
// 填充文字以及位置
ctx.fillText(curentTime(), 30,150)
需要注意的是：透明度和清晰度要在文字填充之前设置。
否者就不会生效。
这个也很好理解，因为有先后顺序。
出现了一点小的意外
如果别人知道了我们的原理。
就只需要通过控制台取消掉body的style就行。
也就是说：咋们这个方法可能是白做了。
难受，啊！
如果不能取消或者可以监听就好了。
鸡肋辅助 MutationObserver 登场
如果有一个方法可以监听DOM树属性发生变化就好了。
如果发生了变化。我在重新调用一次就可以解决。
其实还真的存在这样一个API。
他就是MutationObserver。
MutationObserver给我们提供DOM树属性在某个范围内发生变化时作出一定的反应。
MutationObserver的基本用法就是:
// Firefox和Chrome早期版本中带有前缀进行兼容
var MutationObserver = window.MutationObserver ||
window.WebKitMutationObserver ||
window.MozMutationObserver
// 选择目标节点
var target = document.getElementById('domID');
// 回调函数
function callBack(){
console.log('dom树发生变化我会被触发')
}
// 第一步： 创建观察者对象
var observer = new MutationObserver(callBack);
// 第二步：配置观察选项:
var config = { attributes: true, childList: true, characterData: true }
//第三步： 传入目标节点和观察选项
observer.observe(target, config);
// 随后,你还可以停止观察
observer.disconnect();
在控制台属性发生变化重新调用一次
function watchBody(){
console.log('body的DOM发生了变化被我监听到了')
}
const observer = new MutationObserver(watchBody)
const targetNode = body
const setConfig = { attributes: true}
observer.observe(targetNode, setConfig)
报告：又发现问题，出现多次调用
虽然我们通过监听dom数属性发生变化后，
再次调用水印的方法。用户无法去除水印。
但是造成了多次调用，页面卡死。
目前还没有好的办法去解决使用MutationObserver造成页面卡死这个问题。
所以这种水印只能做到防小人不防君子
// 修改DOM重新调用水印
function watchBody(){
let hasBackgroundImage = document.getElementById('body').style
if(hasBackgroundImage){
waterMark()
}
}
let observer;
// 观察者
function watchAtt(){
observer = new MutationObserver(watchBody)
const targetNode = document.getElementById('body')
const setConfig = { attributes: true}
observer.observe(targetNode, setConfig)
}
watchAtt()
// 页面刷新
window.onbeforeunload=function (){
console.log(11111)
observer.disconnect();
}
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body id="body">
<canvas id="canvasDom" ></canvas>
<script>
// 获取当前时间
function curentTime(userName='张三'){
let newTime = new Date();
// 获取年
let newYarn = newTime.getFullYear()
// 获取月
let newMonth = (newTime.getMonth() + 1) > 9 ? ( newTime.getMonth() + 1) : "0" + ( newTime.getMonth() + 1);
// 获取时间
let newDay = newTime.getDate() > 9 ? newTime.getDate() : "0"+date.getDate();
return newYarn + '-' + newMonth +' -' + newDay + '-'+ userName
}
function waterMark(){
// 获取dom节点
let canvasDom=document.getElementById('canvasDom')
// 设置canvas的大小
canvasDom.width=1000
canvasDom.height=560
// canvas重叠部分隐藏
canvasDom.style.display='none'
// 获取canvs上下文
const ctx= canvasDom.getContext('2d')
//设置文字的大小 以及字体样式
ctx.font = "30px Verdana"
// 设置透明度
ctx.fillStyle = 'rgba(0,0,0,.3)'
// 设置倾斜度
ctx.rotate(0.2)
// 填充文字以及位置
ctx.fillText(curentTime(), 30,150)
// 将它转化为base64
const img=canvasDom.toDataURL('image/png')
let body = document.getElementById('body')
body.setAttribute('style',`background-image:url("${img}")`)
}
waterMark()
// 修改DOM重新调用水印
function watchBody(){
let hasBackgroundImage = document.getElementById('body').style
if(hasBackgroundImage){
waterMark()
}
}
let observer;
// 观察者
function watchAtt(){
observer = new MutationObserver(watchBody)
const targetNode = document.getElementById('body')
const setConfig = { attributes: true}
observer.observe(targetNode, setConfig)
}
watchAtt()
// 页面刷新
window.onbeforeunload=function (){
console.log(11111)
observer.disconnect();
}
</script>
</body>
</html>
canvas实现添加水印的更多相关文章
- 神奇的canvas——巧用 canvas 为图片添加水印
代码地址如下:http://www.demodashi.com/demo/11637.html 很久之前写过一篇关于 canvas 的文章,是通过 canvas 来实现一个绚丽的动画效果,不管看过没看 ...
- 前端小程序——js+canvas 给图片添加水印
市场上各种各样的图片处理器有很多,那么作为程序员的我们是不是应该自己做一个呢?那就从加水印开始吧 html: <canvas id="shuiyinTest"> < ...
- canvas添加水印
<canvas id="canvas"></canvas><canvas id="water"></canvas> ...
- 使用canvas给图片添加水印
css部分 .clip { position: absolute; clip: rect(0 0 0 0); } html部分 <input type="file" id=& ...
- 使用canvas给图片添加水印， canvas转换base64,,canvas，图片，base64等转换成二进制文档流的方法，并将合成的图片上传到服务器,
一,前端合成带水印的图片 一般来说,生成带水印的图片由后端生成,但不乏有时候需要前端来处理.当然,前端处理图片一般不建议,一方面js的处理图片的方法不全,二是有些老版本的浏览器对canvas的支持度不 ...
- 微信小程序Canvas添加水印字体，通过setGlobalAlpha设置字体透明度。
微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...
- C# 给PDF文件添加水印
水印种类及功能介绍 PDF水印分为两种:文本水印和图片水印.文本水印一般被用在商业领域,提醒读者该文档是受版权保护的,其他人不能抄袭或者免费使用.除了这个特征,水印还可以用来标记这个文档 的一些基 ...
- Android 图片添加水印图片或者文字
给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- 使用canvas进行图像编辑
前面的话 本文将分为几个小功能的形式来详细介绍canvas图像编辑 缩放 下面是一张分析图,假设默认情况下,图片和canvas宽高相同.图片的缩放(scale)范围为0.5到3,缩放时改变的是图片的大 ...
- 离线合成联想到的--canvas合成水印
前段时间做了功能模块:用户设置自定义勋章: 实现方式:前端把用户设置的昵称传到后台,后台根据不同用户等级,使用离线合成技术合成不同的勋章返回到前端: 方案算是实现了,但是有点坑就是,后台的离线合成没有 ...
随机推荐
- 数仓ETL系统：给强大的“心脏”配上“超级流水线”
摘要:在数据仓库平台建设过程中,数据的加载.卸载,各层数据模型之间的数据流转,业务规则的实现等等数据加工过程都会以ETL任务的方式实现. 一.前言 在数据仓库平台建设过程中,数据的加载.卸载,各层数据 ...
- 顶会CIKM'21论文解读：基于图神经网络的人类行为轨迹恢复模型
摘要:本文是由华为云数据库创新Lab联合电子科技大学数据与智能实验室发表在顶会CIKM'21的文章,该文章提出首个克服人类移动轨迹数据中普遍存在的多层次周期性.周期偏移现象以及数据稀疏问题的轨迹恢复模 ...
- 浏览器层面优化前端性能(2):Reader引擎线程与模块分析优化点
Reader 引擎线程与模块分析 首先是网页内容,加载完输入到HTML解释器,解释后构成DOM树,这期间如果遇到JavaScript代码就交给JavaScript引擎去处理,如果网页中包含CSS,就交 ...
- 2023年 CISO 需要高度关注的任务和趋势
在过去的几年中,企业一直忙于应对远程办公模式下的安全要求.展望2023年,疫情局面将与过去3年大不相同.根据目前的趋势,未来一年的网络攻击的数量和严重程度都将增加,这将对各规模企业,尤其是未做好准备的 ...
- Gartner 权威解读： SBOM 采用率将于2025年达到60%
随着现代软件开发越来越依赖于第三方资源,针对软件供应链的恶意攻击数量也随之激增.据业内权威机构 Gartner 预计,软件物料清单 (SBOM) 的采用率在 2025 年将会达到 60%. Gartn ...
- 火山引擎 ByteHouse：如何提升 18000 节点的 ClickHouse 可用性？
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 ClickHouse 是业内被广泛使用的 OLAP 引擎.当集群规模过大时,ClickHouse 则面临使用局限性 ...
- 深度学习基础课：使用Adam算法
大家好~我开设了"深度学习基础班"的线上课程,带领同学从0开始学习全连接和卷积神经网络,进行数学推导,并且实现可以运行的Demo程序 线上课程资料: 本节课录像回放 加QQ群,获得 ...
- P3844【黄】
这道题做的极其折磨 因为最开始小看这道题了,没用稳扎稳打的码风来写代码,直接用的那种可读性极差但勉强能跑的代码写的,最后没AC只有73分调了好久也没调对,甚至逐渐调成了64.55越来越低的分.这有多方 ...
- P5723 注意特殊情况
https://www.luogu.com.cn/problem/P5723 不是难题,但是倘若忽略L<2的情况就无法AC,Lougu得分只有80.因此写完题后一定要把各种边界性质的数据想出并用 ...
- zzuli 1902: 985的因子对难题
***这道题明显是在卡时间,类比快速打素数表的算法,*** #include<iostream> #include<cstdio> #include<cstring> ...