Node.js中实现图片上传并自动添加水印的方法

• 静态水印添加

  • 当用户上传原始图片至服务器后，系统立即处理，在图片上嵌入预设的水印，并保存带有水印的图片。
  • 这种方式的优点在于处理速度快，用户可以即时看到带水印的图片；但缺点是如果需要更改水印，则必须重新处理所有已上传的图片。

• 动态水印添加

  • 用户上传的原始图片仅存储于服务器，不进行任何修改。
  • 每当客户端请求查看图片时，服务器会在发送前动态地为图片添加水印。
  • 这种方法的优势在于水印内容可以随时调整，无需对已有图片进行二次处理，但可能会导致请求响应时间稍长。

// 导入必要的模块
const path = require("path");
const jimp = require("jimp");

/**
* 动态添加水印功能
* @param waterFilePath 水印图片路径
* @param originalFilePath 原始图片路径
* @param targetFilePath 目标图片路径
* @param scale 水印缩放比例，默认为5
* @param margin 边缘距离比例，默认为0.01
* @returns {Promise} 返回处理后的图片对象
*/
async function addWatermark(waterFilePath, originalFilePath, targetFilePath, scale = 5, margin = 0.01) {
const [watermark, original] = await Promise.all([
jimp.read(waterFilePath),
jimp.read(originalFilePath)
]);

// 计算水印缩放比例
const currentScale = original.bitmap.width / watermark.bitmap.width;
watermark.scale(currentScale / scale);

// 计算水印位置
const rightMargin = original.bitmap.width * margin;
const bottomMargin = original.bitmap.height * margin;
const xPosition = original.bitmap.width - rightMargin - watermark.bitmap.width;
const yPosition = original.bitmap.height - bottomMargin - watermark.bitmap.height;

// 合成图片
original.composite(watermark, xPosition, yPosition, {
mode: jimp.BLEND_SOURCE_OVER,
opacitySource: 0.5
});

// 保存最终图片
await original.writeAsync(targetFilePath);
}

/**
* 测试函数
* @returns {Promise}
*/
async function runTest() {
const waterFilePath = path.resolve(__dirname, "./resources/logo.png");
const originalFilePath = path.resolve(__dirname, "./resources/original.jpg");
const targetFilePath = path.resolve(__dirname, "./resources/output.jpg");

// 调用添加水印的函数
await addWatermark(waterFilePath, originalFilePath, targetFilePath);
}

// 执行测试
runTest();

效果图展示

通过上述代码，您可以在图片的右下角成功添加一个半透明的水印，如下所示：