返回

赋予图片独特印记:Node.js 为图片添加全页面半透明水印

前端



在中后台导出功能中,导出追溯能力常常是必不可少的要求。当导出数据形态为图片时,通常的做法是为图片添加水印,以达到识别导出者的目的。而使用 Node.js 为图片添加全页面半透明水印,可以轻松满足这一需求,同时保障水印的清晰度和美观性。




在 Node.js 中,我们可以借助第三方库轻松实现图片水印功能。其中,比较常用的库包括 sharp 和 Jimp。在本教程中,我们将使用 sharp 库来为图片添加全页面半透明水印。


首先,我们需要安装 sharp 库:


npm install sharp

安装完成后,我们就可以开始编写代码了。首先,我们需要创建一个新的 Node.js 项目并安装必要的依赖项:


mkdir my-project
cd my-project
npm init -y

接下来,我们需要在项目中安装 sharp 库:


npm install sharp

现在,我们可以开始编写代码了。首先,我们需要导入 sharp 库:


const sharp = require('sharp');

然后,我们需要加载要添加水印的图片:


const image = sharp('image.jpg');

接下来,我们需要创建水印图片。水印图片可以是任何格式,但通常使用 PNG 或 SVG 格式。在本例中,我们将使用一个简单的文本水印:


const watermark = sharp('watermark.png');

现在,我们可以将水印添加到图片上了。我们可以使用 sharp 的 composite() 方法来实现这一点:


image.composite([
  {
    input: watermark,
    gravity: 'southeast'
  }
]);

composite() 方法接受一个数组作为参数,其中每个元素代表一个要添加到图片上的水印。在上面的示例中,我们使用 gravity 选项来指定水印的位置。在本例中,我们将水印放在了图片的右下角。


最后,我们需要保存带有水印的图片:


image.toFile('image-with-watermark.jpg');

这样,我们就成功地为图片添加了全页面半透明水印。您可以根据自己的需要调整水印的位置、大小和透明度。


希望本教程对您有所帮助!