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>