前端給網(wǎng)頁添加明水印的解決辦法
為了防止信息泄露习柠，保護(hù)版權(quán)，在前端我們時(shí)常會(huì)用到水印照棋。
當(dāng)然资溃，水印也有明水印和暗水印之分，今天我們將的是前端實(shí)現(xiàn)明水印并實(shí)現(xiàn)全屏覆蓋烈炭。
創(chuàng)建一個(gè)水印圖層溶锭，我們需要兩步，一步是生成對(duì)應(yīng)的圖片符隙，第二步是把圖片放到最上層并全屏顯示趴捅，最好還是按照格子狀頁面上顯示多個(gè)水印內(nèi)容。
一膏执、生成圖片
因?yàn)椴煌撁娲笮〔煌な郏煌矸莸娜艘矐?yīng)該設(shè)置不同的水印信息露久。這就需要我們動(dòng)態(tài)生成圖片更米，這里就需要使用canvas
function createBackgroundImage(content, proportion, tiltAngle) {
? const can = document.createElement('canvas')
? can.width = document.body.clientWidth / proportion
? can.height = document.body.clientHeight / proportion
? const context = can.getContext('2d')
? context.rotate(-25 * Math.PI / 180);
? context.font = "800 30px Microsoft JhengHei";
? context.fillStyle = "#000";
? context.textAlign = 'center';
? context.textBaseline = 'Middle';
? context.fillText(content, 100, 100)
? return can.toDataURL("image/png")
? }
可以按照上面的方法創(chuàng)建canvas并填充文字。然后該函數(shù)返回一個(gè)對(duì)應(yīng)的圖片base64給我們毫痕。
這里需要注意一下該方法的入?yún)ⅲㄎ淖终髀停畛浔壤偌福瑑A斜角度）雖然是按照比例設(shè)置的cancas寬高，卻沒有在fillText上做處理栏笆，實(shí)際應(yīng)用的時(shí)候类腮，如果適配不同尺寸屏幕還是需要自己再寫一下的哈，同時(shí)還有文字的大小蛉加。
二蚜枢、水印布局
布局相對(duì)簡單一些，我們需要用到backgroundImage屬性
background-image 屬性為元素設(shè)置背景圖像针饥。
元素的背景占據(jù)了元素的全部尺寸厂抽，包括內(nèi)邊距和邊框，但不包括外邊距丁眼。
默認(rèn)地筷凤，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)苞七。
之后藐守，我們只需要再頁面上添加一個(gè)div標(biāo)簽，并設(shè)置對(duì)應(yīng)的樣式蹂风，讓它占據(jù)全屏就行卢厂。
下面再給一個(gè)簡單示例
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
? <style>
? \#content {
? width: 100%;
? height: 100vh;
? margin-left: auto;
? margin-right: auto;
? background: cadetblue;
? overflow: hidden;
? }
</style>
</head>
<body>
? <div id="content">
</div>
? <script>
? function createBackgroundImage(content, proportion, tiltAngle) {
? const can = document.createElement('canvas')
? can.width = document.body.clientWidth / proportion
? can.height = document.body.clientHeight / proportion
? console.log('can.width', can.width)
? console.log('can.height', can.height)
? const context = can.getContext('2d')
? context.rotate(-25 * Math.PI / 180);
? context.font = "800 30px Microsoft JhengHei";
? context.fillStyle = "#000";
? context.textAlign = 'center';
? context.textBaseline = 'Middle';
? context.fillText(content, 100, 100)
? return can.toDataURL("image/png")
? }
? const div = document.getElementById('content')
? console.log('div', div)
? div.style.backgroundImage = `url(${createBackgroundImage('伯約同學(xué)', 6, 10)})`
</script>
</body>
</html>
有興趣的可以直接復(fù)制上面的代碼看一下效果~
固然，稍微有點(diǎn)基礎(chǔ)的可以通過打開控制臺(tái)取消水印效果惠啄，這時(shí)候我們就需要監(jiān)聽dom的變化足淆，這個(gè)我們后續(xù)再專門講一下~
px：明水印畢竟防君子不防小人，下期我們就聊一聊暗水印是如何實(shí)現(xiàn)的礁阁。
