在网页开发中，我们经常需要给图片添加一些水印，以保护图片的版权，或者给图片增加一些辅助信息等。在本文中，我们将介绍如何使用 JavaScript 中的 Canvas 来给图片添加文字水印。
准备工作
首先，我们需要一个 HTML 页面来展示我们的效果。创建一个 index.html 文件，并在其中添加如下代码：
<!DOCTYPE html>
<html>
<head>
<title>Canvas 添加文字水印</title>
<style>
#canvas {
border: 1px solid #ccc;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>在 JS 中使用 Canvas 给图片添加文字水印</h1>
<canvas id="canvas"></canvas>
<img id="result" src="" alt="Result Image">
<script src="main.js"></script>
</body>
</html>
然后，在项目目录下创建一个 main.js 文件，用于编写我们的 JavaScript 代码。
绘制文字水印
首先，我们需要获取到图片和 Canvas 对象，并将图片绘制在 Canvas 上。在 main.js 文件中添加如下代码：
window.onload = function() {
var img = new Image();
img.src = "image.jpg";
img.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
};
};
上述代码中，我们首先创建了一个 Image 对象，然后将其 src 属性设置为我们要添加水印的图片路径。在图片加载完成后，我们获取到 Canvas 对象，并设置其宽度和高度为图片的宽度和高度。然后，我们使用 drawImage 方法将图片绘制在 Canvas 上。
接下来，我们需要在 Canvas 上添加文字水印。在 main.js 文件中添加如下代码：
window.onload = function() {
var img = new Image();
img.src = "image.jpg";
img.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
var text = "Watermark";
ctx.font = "30px Arial";
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
ctx.fillText(text, canvas.width - ctx.measureText(text).width - 10, canvas.height - 10);
var resultImg = document.getElementById("result");
resultImg.src = canvas.toDataURL();
};
};
在上述代码中，我们首先定义了要添加的文字内容，然后设置文字的字体大小和填充颜色。我们使用 fillText 方法将文字绘制在 Canvas 的右下角。最后，通过 toDataURL 方法将 Canvas 转换为图片，并将结果图片展示在页面上。
运行效果
现在，我们可以通过运行 index.html 文件来查看结果。图片和文字水印将会显示在页面上。
使用 Canvas 给图片添加文字水印是一个简单而有趣的功能，它为我们提供了更多的图片处理能力。通过灵活运用 Canvas API，我们可以实现各种各样的图片处理效果。希望本文能对你有所帮助，谢谢阅读！
评论 (0)