- 上传时加水印
用户上传原始图片->服务器:保留原始图片以及水印图片 - 动态水印
用户上传原始图片->服务器:只保留原始图片
请求图片时,服务器动态加水印
根据业务需求自行更改操作,下面只讲最简单的给图片加水印。
主要使用到了库为 jimp 。
js
const path = require("path");
const {Jimp} = require('jimp');
// 给一张图片添加水印
async function addWatermark(waterFile, originFile, targetFile, proportion = 10, marginProportion = 0.05) {
const [water, origin] = await Promise.all([
Jimp.read(waterFile),
Jimp.read(originFile)
])
// 对水印图片进行缩放
const curProportion = origin.bitmap.width / water.bitmap.width;
water.scale(curProportion / proportion);
// 计算位置
const right = origin.bitmap.width * marginProportion;
const bottom = origin.bitmap.height * marginProportion;
const x = origin.bitmap.width - water.bitmap.width - right;
const y = origin.bitmap.height - water.bitmap.height - bottom;
// 写入水印
origin.composite(water, x, y, {
mode: Jimp.BLEND_SOURCE_OVER,
opacitySource: 0.5
});
await origin.write(targetFile);
}
async function test() {
const waterPath = path.resolve(__dirname, 'resource', 'water.png');
const originPath = path.resolve(__dirname, 'resource', 'origin.png');
const targetPath = path.resolve(__dirname, 'resource', 'target.png');
await addWatermark(waterPath, originPath, targetPath);
}
test()
这里需要注意,我使用的 jimp 版本为 "jimp": "^1.6.0",该版本相对于 0 版本有一些改动,见 :migrate-to-v1
比如不再支持默认导入。