正文

轻松掌握Watermark.js：教你如何给图片添加个性水印

/0 浏览量
0515

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。

-- 展开阅读全文 --