node中上传时给图片添加水印

图片添加水印方法

• 上传时加水印

  • 用户上传原始图片到服务器，服务器保留原始图片以及水印图
  • 缺点，想改水印还得写另外程序根据新的原始图片进行覆盖水印图片

• 动态添加水印

  • 用户上传原始图片，服务器只保留原始图片
  • 请求图片时，服务器动态加水印
  • 好处：可以动态改水印，随时可变，不用做额外处理
  • 缺点：请求的响应时间增加

使用第一种

//引入path模块
const path = require("path");
//使用jimp插件库 npm install jimp
const jimp = require("jimp");

/**
* 添加水印的函数封装
  *@param waterFile:水印路径
  *@param originFile：原始路径
  *@param targetFile：加水印后的图片路径
  *@param proportion：目标缩放比例
  *@param marginProportion：到图片边缘的比例
* @returns {Promise<Jimp>}
  */
  async function waterMark(waterFile,originFile,targetFile,proportion = 5,marginProportion = 0.01) {
    //使用promise.all方法同时返回水印对象和原始对象
    const [water, origin] = await Promise.all([jimp.read(waterFile), jimp.read(originFile)]);
  
    /**
    * 对水印图片进行缩放
    * 当前比例=原始图宽度/水印图宽度
    * 设置比例=当前比例/目标比例
    * scale 进行缩放
      */
      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.height;
  
    //写入水印
    origin.composite(water, x, y, {
      mode: jimp.BLEND_SOURCE_OVER,
      opacitySource: 0.5,
    })
    await origin.write(targetFile);
  }

/**
* 测试函数
* @returns {Promise<void>}
  */
  async function test() {
      //获取水印图片路径
      const waterFile = path.resolve(__dirname, "./resource/logo.jpg");
      //获取原图片的路径
      const originFile = path.resolve(__dirname, "./resource/origin.jpg");
      //设置添加水印后的图片路径【注:如果该路径的文件夹没用则自行添加，否则会添加不成功】
      const targetFile = path.resolve(__dirname, "./resource/new.jpg");
      //调用添加水印函数
      await waterMark(waterFile, originFile, targetFile)
  }

// 执行测试
test()

看效果右下角添加了一张水印图片