watermarker-tool
Version:
1. 根据传入的dom元素进行水印的渲染，无需额外配置 2. 可以为不同元素区域分别渲染水印 3. 实现水印防止篡改 4. 清除水印功能
136 lines (118 loc) • 3.56 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.wraper1 {
width: 100%;
height: 280px;
word-wrap: break-word;
font-size: 50px;
border: 1px solid pink;
overflow: hidden;
}
.wraper2 {
width: 100%;
height: 280px;
word-wrap: break-word;
font-size: 50px;
border: 1px solid pink;
overflow: hidden;
}
.marker1 {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-30deg);
transform-origin: 50% 50%;
color: red;
font-size: 40px;
opacity: 0.5;
}
.marker2 {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-30deg);
transform-origin: 50% 50%;
color: green;
font-size: 40px;
opacity: 0.5;
}
.marker_body {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-30deg);
transform-origin: 50% 50%;
color: blue;
font-size: 12px;
opacity: 0.5;
}
</style>
</head>
<body>
<button onclick="addWaterMarker1()">添加区域1水印</button>
<button onclick="clearWaterMarker1()">清除区域1水印</button>
<button onclick="addWaterMarker2()">添加区域2水印</button>
<button onclick="clearWaterMarker2()">清除区域2水印</button>
<button onclick="addWaterMarkerBody()">添加全局水印</button>
<button onclick="clearWaterMarkerBody()">清除全局水印</button>
<div class="wraper1">
区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1区域1
</div>
<div class="wraper2">
区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2区域2
</div>
<script src="../dist/watermarker.umd.js"></script>
<script>
let clear1
let clear2
let clearBody
function addWaterMarker1() {
const wraper1 = document.querySelector('.wraper1')
const marker1 = document.createElement('div')
marker1.innerHTML = '区域1水印'
marker1.className = 'marker1'
watermarker(marker1, wraper1).then(val => clear1 = val)
}
function addWaterMarker2() {
const wraper2 = document.querySelector('.wraper2')
const marker2 = document.createElement('div')
marker2.innerHTML = '区域2水印'
marker2.className = 'marker2'
watermarker(marker2, wraper2).then(val => clear2 = val)
}
function addWaterMarkerBody() {
const markerBody = document.createElement('div')
markerBody.innerHTML = '区域2水印'
markerBody.className = 'marker_body'
watermarker(markerBody).then(val => clearBody = val)
}
function clearWaterMarker1() {
clear1 && clear1()
}
function clearWaterMarker2() {
clear2 && clear2()
}
function clearWaterMarkerBody() {
clearBody && clearBody()
}
</script>
</body>
</html>