Watermark.js 是一个简单易用的 JavaScript 库,可以帮助你轻松地在图片上添加个性水印。无论是为了保护版权,还是为了个人喜好,Watermark.js 都能帮你实现这一功能。下面,我将一步步教你如何使用 Watermark.js 给图片添加水印。
安装 Watermark.js
首先,你需要将 Watermark.js 添加到你的项目中。你可以通过 npm 或 yarn 来安装:
npm install watermark-js
# 或者
yarn add watermark-js
如果你不想使用包管理器,也可以直接从 CDN 链接引入:
<script src="https://cdn.jsdelivr.net/npm/watermark-js@latest"></script>
创建水印
在添加水印之前,你需要先创建一个水印对象。水印对象可以包含多个属性,如图片、文本、颜色、透明度等。
const watermark = new Watermark({
image: 'logo.png', // 水印图片
text: '版权所有', // 水印文本
font: '16px Arial', // 字体样式
fill: 'rgba(0, 0, 0, 0.5)', // 颜色和透明度
x: 10, // 水印的 x 坐标
y: 10, // 水印的 y 坐标
width: 100, // 水印的宽度
height: 50 // 水印的高度
});
添加水印到图片
创建水印对象后,你可以使用 add 方法将其添加到图片上。
const img = new Image();
img.src = 'example.jpg'; // 要添加水印的图片
img.onload = () => {
watermark.add(img).then(() => {
img.src = img.toDataURL(); // 将添加水印的图片更新到页面上
}).catch(err => {
console.error(err);
});
};
保存水印图片
如果你需要将添加水印的图片保存到本地,可以使用以下代码:
const a = document.createElement('a');
a.href = img.src;
a.download = 'watermarked-image.jpg';
a.click();
总结
使用 Watermark.js 给图片添加水印非常简单。通过以上步骤,你可以在几行代码内实现这一功能。Watermark.js 支持多种自定义选项,让你可以轻松地创建出符合自己需求的个性水印。希望这篇文章能帮助你更好地掌握 Watermark.js。
