第一种:用户上传原始图片,服务器保留原始图片以及水印图片
第二种:动态水印
用户上传图片 --》服务端:只保留原始图片,当请求图片时,服务器加水印。缺点:增加服务端压力
Jimp三方库:
1.安装
2.
```// 导入三方库
const path = require('path');
const jimp = require('jimp');
// 给一张图片加水印
// proportion水印和图片比例 marginProportion右边的距离
async function mark(waterFile, originFile, targetFile, proportion = 10, marginProportion = 0) {
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 - right - water.bitmap.width;
const y = origin.bitmap.height - bottom - water.bitmap;
// 写入水印
origin.composite(water, x, y, {
mode: jimp.BLEND_SOURCE_OVER,
opacitySource: 0.3,
});
await origin.write(targetFile);
}
async function test(){
const waterPath = '';
const originPath = '';
const targetPath = '';
mark();
}