使用JavaScript给图片添加水印的实现方法封装
作者：整天敲代码的小韩
前言
当涉及图片处理时，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>
附：加文字水印
示例代码：
function blobToImg(blob) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.addEventListener('load', () => {
let img = new Image()
img.src = reader.result
img.addEventListener('load', () => resolve(img))
})
reader.readAsDataURL(blob)
})
}
function imgToCanvas(img) {
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
return canvas
}
function watermark(canvas, text) {
return new Promise((resolve, reject) => {
let ctx = canvas.getContext('2d')
// 设置填充字号和字体，样式
ctx.font = "24px 宋体"
ctx.fillStyle = "#FFC82C"
// 设置右对齐
ctx.textAlign = 'right'
// 在指定位置绘制文字，这里指定距离右下角20坐标的地方
ctx.fillText(text, canvas.width - 20, canvas.height - 20)
canvas.toBlob(blob => resolve(blob))
})
}
function imgWatermark(dom, text) {
let input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.onchange = async () => {
let img = await blobToImg(input.files[0])
let canvas = imgToCanvas(img)
let blob = await watermark(canvas, text)
let newImage = await blobToImg(blob)
dom.appendChild(newImage)
}
dom.appendChild(input)
}
let dom = document.querySelector('#container')
imgWatermark(dom, '水印文字')
总结：
在本篇博客中，我们学习了如何使用JavaScript给图片添加水印，并将其封装成一个可重复使用的函数。通过使用canvas元素和相关的绘图API，我们可以实现图像处理和增强效果。
到此这篇关于使用JavaScript给图片添加水印实现方法封装的文章就介绍到这了,更多相关JS图片添加水印内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
参考资料：