本篇文章介绍的是如何实现 图片水印和页面水印 效果，想了解通过创建 html标签 实现的话，可参考 此篇文章 ～～～
图片水印：
image.png
详细代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片水印</title>
<style>
body {
margin: 0;
}
canvas {
display: block;
background: #ccc;
}
</style>
</head>
<body>
<div>
<canvas id="watermark"></canvas>
</div>
<script>
var canvas = document.getElementById('watermark')
canvas.width = 500
canvas.height = 400
var img = new Image();
//引入图片地址
img.src = "./img/WechatIMG1.jpeg"
img.onload = function () {
//返回一个用于在画布上绘图的环境,当前唯一的合法值是2d，二维绘图
var context = canvas.getContext("2d");
var w = canvas.width
var h = canvas.height
/**画布上绘制图像、画布或视频，
* 参数——img：规定要使用的图像、画布或视频
* sx：可选。开始剪切的 x 坐标位置
* sy：可选。开始剪切的 y 坐标位置
swidth：可选。被剪切图像的宽度。
sheight：可选。被剪切图像的高度。
x：在画布上放置图像的 x 坐标位置。
y：在画布上放置图像的 y 坐标位置。
width：可选。要使用的图像的宽度（伸展或缩小图像）。
height：可选。要使用的图像的高度（伸展或缩小图像）。**/
context.drawImage(img, 0, 0, w, h);
context.font = "20px microsoft yahei";
context.fillStyle = "red";
context.fillText("文字水印", canvas.width - 100, canvas.height - 30);
}
</script>
</body>
</html>
页面水印：
image.png
详细代码：
<!DOCTYPE html>
<html>
<style>
body{
/* 不允许图片平铺 */
/* background-repeat: no-repeat; */
}
</style>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
var canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 150;
canvas.style.display = 'none';
var shuiyin = canvas.getContext('2d');
// 控制文字的旋转角度和上下位置
shuiyin.rotate(-20 * Math.PI / 180);
shuiyin.translate(-80, 40)
//文字颜色
shuiyin.fillStyle = "#cccccc";
//文字样式
shuiyin.font = "16px Microsoft JhengHei";
shuiyin.fillText("上海紧急疫情防控中心", canvas.width / 3, canvas.height / 2);
// 把画布转为图片的格式引入到body中，之所以有多个，是因为默认的图片平铺属性
document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
</script>
</html>
网友评论