添加水印的方式

图片上传是添加
图片下载时添加

图片上传是添加的优点：

• 当用户下载图片时可以立即给用户，省去图片下载前需要对图片的修改

图片上传是添加的缺点：

• 当水印变换后，需要将所有图片进行更换，这就需要上传图片是，保存两份图片，一份是原图，一份是水印图

图片下载时添加的优点

• 水印变换后也有没事

图片下载时添加的缺点

• 用户需要等服务器处理好后才能下载，当访问量多时，服务器的压力很大

  实现图片上传成功后为其添加水印

  注意： 要把原图保存下来，添加水印的照片为用户可下载的图片
  使用的插件：JImp
  文档：https://github.com/oliver-moran/jimp/tree/master/packages/jimp
  插件的使用看文档

  示例

  ```javascript const express = require(‘express’); const path = require(‘path’); const Jimp = require(‘jimp’); // 操作图片 const multer = require(‘multer’); // 上传文件的中间件

// 路由 const router = express.Router(); // 默认格式 // const upload = multer({ // dest: path.resolve(__dirname, ‘../public/img’) // })

const storage = multer.diskStorage({ // 储存位置 destination: function (req, file, cb) { cb(null, path.resolve(__dirname, ‘../../public/img’)); }, // 文件名 默认是没有后缀名的 filename: function (req, file, cb) { const ext = path.extname(file.originalname); const timeStamp = Date.now(); const randomStr = Math.random().toString(36).slice(-6); const filename = ${timeStamp}${randomStr}${ext}; cb(null, filename); }, });

const upload = multer({ storage, // 磁盘存储引擎 // 限制数据得大小 limits: { fileSize: 1024 1024 3, }, // 那些文件可以上传 fileFilter: (req, file, cb) => { cb(null, true); const extname = file.originalname; const whitelist = [‘.jpg’, ‘.png’, ‘.gif’]; let istrue = false; whitelist.forEach((ele) => { if (extname.includes(ele)) { cb(null, true); istrue = true; } else { cb(null, false); } }); if (!istrue) { cb(new Error(your ext name of ${extname} is not support)); } }, }); // 图片加水印 async function mark(waterPath, originPath, filePath, scale=5, marginProportion=0.01) { // 读取图片 const [waterImg, originImg] = await Promise.all([Jimp.read(waterPath), Jimp.read(originPath)]) // 计算水印图片的缩放比例 const curScale = originImg.bitmap.width / waterImg.bitmap.width; waterImg.scale(curScale / scale) // 计算水印图片显示的位置 const right = originImg.bitmap.width marginProportion; const bottom = originImg.bitmap.height marginProportion;

const x = originImg.bitmap.width - right - waterImg.bitmap.width; const y = originImg.bitmap.height - bottom - waterImg.bitmap.height;

// 将两张图片混合 originImg.composite(waterImg, x, y, { mode: Jimp.BLEND_MULTIPLY, opacitySource: 0.8, }) // 写入 await originImg.write(filePath) }

// 单个数据 router.post(‘/‘, upload.single(‘img’), async(req, res) => { const url = /upload/${req.file.filename}; // 水印照片的地址 const waterImg = path.resolve(dirname, ‘../../public/img/logo.82b9c7a5.png’) // 需要保存的路径 这个路径用户可以访问下载图片的 const filePath = path.resolve(dirname, ‘../../down’, req.file.filename); // 添加水印 await mark(waterImg, req.file.path, filePath); res.send({ code: 0, msg: ‘’, data: url, }); });

module.exports = router;

```