当涉及图片处理时，javascript是一种强大的工具。在本篇博客中，我们将学习如何使用JavaScript来给图片添加水印，并将其封装成一个函数，以便在需要的时候重复使用。
准备工作：
在开始之前，确保你已经准备好了以下内容：
1.一张待添加水印的图片。
2.水印图片。
3.一个基本的HTML文件和一个连接到JavaScript文件的script标签。
添加水印效果：
首先，我们需要编写一个函数，用于添加水印到图片上。以下是一个示例函数：
function addWatermark(imagePath, watermarkPath) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// 创建一个新的Image对象，用于加载原始图片
var image = new Image();
image.src = imagePath;
// 在图片加载完成后执行下面的代码
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
// 将原始图片绘制到canvas上
context.drawImage(image, 0, 0);
// 创建一个新的Image对象，用于加载水印图片
var watermark = new Image();
watermark.src = watermarkPath;
// 在水印图片加载完成后执行下面的代码
watermark.onload = function() {
// 设置水印的位置和尺寸
var x = 0;
var y = 0;
var width = image.width;
var height = image.height;
// 平铺水印图片
context.fillStyle = context.createPattern(watermark, 'repeat');
context.fillRect(x, y, width, height);
// 将带有水印的图片转换为base64格式
var watermarkedImage = canvas.toDataURL();
// 将base64格式的图片显示在页面上或进行其他操作
// 例如：document.getElementById('result').src = watermarkedImage;
};
};
}
这个函数使用了HTML5的canvas元素来实现。它首先创建一个新的canvas元素，并通过getContext('2d')获取2D绘图上下文。然后，它加载原始图片和水印图片，并在加载完成后进行处理。
在加载原始图片后，我们将其绘制到canvas上。接着，加载水印图片并在加载完成后执行代码。在这里，我们使用context.createPattern()方法创建了一个平铺的图案，并使用fillRect()方法将其绘制到canvas上。
最后，我们可以将带有水印的图片转换为base64格式，并进行进一步的展示或处理。
使用封装的函数 ：
要使用上面的函数，你需要在HTML文件中调用它，并传递原始图片和水印图片的路径作为参数。以下是一个简单的示例：
确保将函数所在的JavaScript文件引入到HTML文件中，并将原始图片和水印图片的路径替换为实际的路径。
<!DOCTYPE html>
<html>
<head>
<title>添加水印</title>
</head>
<body>
<script src="watermark.js"></script>
<script>
addWatermark('path/to/original/image.jpg', 'path/to/watermark.png');
</script>
</body>
</html>
总结：
在本篇博客中，我们学习了如何使用JavaScript给图片添加水印，并将其封装成一个可重复使用的函数。通过使用canvas元素和相关的绘图API，我们可以实现图像处理和增强效果。希望本篇博客对你有所帮助。如果你有任何问题或建议，请随时留言！
参考资料：
- MDN Web文档 - Canvas API
- MDN Web文档 - createPattern()方法
