溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下前端canvas如何實現水印，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
兩種水印效果如圖：
原理解析：
圖一斜紋類：創建一個和頁面一樣大的畫布，根據頁面大小以及傾斜角度大致鋪滿水印文字，最后轉化為一張圖片設為背景
圖二傾斜類：將文字傾斜后轉化為圖片，然后設置背景圖片repeat填充整個頁面
代碼分析：
這里我只簡略分析圖一斜紋類，事實上這兩種方式都較為簡單，不需要特別強的canvas基礎，只需大概了解就行，直接上完整代碼吧
圖一
<!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>
.water {
width: 100vw;
height: 2000px;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
.content {
width: 800px;
height: 2000px;
margin-left: auto;
margin-right: auto;
background: cadetblue;
overflow: hidden;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div class="content">
<div class="water"></div>
</div>
<script>
function addWaterMarker(str) {
// 這里限制了不超過15個字，實際按需求來
var cpyName = str;
if (str.length > 16) {
cpyName = str.substring(0, 16);
}
// 創建 canvas 元素
var can = document.createElement('canvas');
// 獲取 content 元素
var report = $('.content')[0]
// 將 canvas 元素添加到 content 中
report.appendChild(can);
// 設置 canvas頁面寬度，這里的 800 是因為我司水印文件大小固定，可按需求更改
can.width = 800;
// 獲取整個body高度
can.height = document.body.offsetHeight;
// 隱藏 canvas 元素
can.style.display = 'none';
can.style.zIndex = '999'
// 獲取 canvas 元素工具箱
var cans = can.getContext('2d');
// 設置文字傾斜角度為 -25 度以及樣式
cans.rotate(-25 * Math.PI / 180);
cans.font = "800 30px Microsoft JhengHei";
cans.fillStyle = "#000";
cans.textAlign = 'center';
cans.textBaseline = 'Middle';
// 動態改變字體大小
if(cans.measureText(cpyName).width > 180) {
var size = 180 / cpyName.length
cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
}
/*
雙重遍歷，
當 寬度小于頁面寬度時，
當 高度小于頁面高度時，
這里的寬高可以適當寫大，目的是為了讓水印文字鋪滿
*/
for(let i = (document.body.offsetHeight*0.5)*-1; i<800; i+=160) {
for(let j = 0; j<document.body.offsetHeight*1.5; j+=60) {
// 填充文字，x 間距, y 間距
cans.fillText(cpyName, i, j)
}
}
// 將 canvas 轉化為圖片并且設置為背景
report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker('測試水印');
</script>
</body>
</html>圖二
<!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>
.water {
width: 100vw;
height: 2000px;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
.content {
width: 800px;
height: 2000px;
margin-left: auto;
margin-right: auto;
background: cadetblue;
overflow: hidden;
}
</style>
</head>
<body>
<div class="content">
<div class="water"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
// 添加水印方法
function addWaterMarker(str) {
var cpyName = str;
if (str.length > 16) {
cpyName = str.substring(0, 16);
}
var can = document.createElement('canvas');
var report = $('.content')[0];
report.appendChild(can);
can.width = 180;
can.height = 110;
can.style.display = 'none';
can.style.zIndex = '999'
var cans = can.getContext('2d');
cans.rotate(-25 * Math.PI / 180);
cans.font = "800 30px Microsoft JhengHei";
cans.fillStyle = "#000";
cans.textAlign = 'center';
cans.textBaseline = 'Middle';
if(cans.measureText(cpyName).width > 180) {
var size = 180 / cpyName.length
cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
}
cans.fillText(cpyName, 60, 100);
report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker('測試水印');
</script>
</body>
</html>以上是“前端canvas如何實現水印”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
