【Node.js】图片水印

  1. 上传时加水印
    用户上传原始图片->服务器:保留原始图片以及水印图片
  2. 动态水印
    用户上传原始图片->服务器:只保留原始图片
    请求图片时,服务器动态加水印

根据业务需求自行更改操作,下面只讲最简单的给图片加水印。

主要使用到了库为 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

比如不再支持默认导入。

相关推荐
zxg_神说要有光3 小时前
快速入门 AI:调用 AI 接口生成 React 组件
前端·javascript·node.js
佚名程序员3 小时前
【Node.js】深入理解 V8 JavaScript 引擎
前端·javascript·node.js
赵闪闪1683 小时前
Node.js 安装与开发环境配置全指南
node.js
前端与小赵3 小时前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You6 小时前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js
赵闪闪1687 小时前
Node.js 安装与环境配置详解:从入门到实战
node.js·编辑器·vim
guokanglun8 小时前
npm镜像查看和修改
前端·npm·node.js
说书客啊8 小时前
计算机毕业设计 | SpringBoot+vue汽车资讯网站 汽车购买咨询管理系统(附源码+论文)
java·spring boot·node.js·vue·汽车·毕业设计·课程设计
家有狸花11 小时前
Node.js 笔记(一):express路由
笔记·node.js·express
平芜尽处是春山-2 天前
vue3项目执行npm install下载依赖报错问题排查方法
前端·npm·node.js