nodejs 图片添加水印（png, jpeg, jpg, gif）

同步发布：https://blog.jijian.link/2020-04-17/nodejs-watermark/

 

nodejs 作为一个脚本语言，图片处理这方面有点弱鸡，无法跟 php 这种本身集成了图片 api 的语言相比。

不过好在有 https://www.npmjs.com/ ，上面有全世界的大佬写的各种高大上的插件使用。

本文踩在巨人的肩上介绍 nodejs 添加图片水印的几种方式。

方案一：使用云处理

如果图片私有性要求不高，也不嫌弃注册各种云麻烦，那么这种方式比较适合。

国内 七牛云：https://developer.qiniu.com/dora/api/1316/image-watermarking-processing-watermark
国外 Cloudinary：https://cloudinary.com/documentation/node_image_manipulation

方案二：使用 nodejs 插件

注意：程序添加水印都有一个通病，添加水印之后的图片体积至少是原图的2倍以上。

• node-canvas：https://github.com/Automattic/node-canvas

　　问题：需要安装 node-pre-gyp ，依赖系统，各种安装困难，难搞哦。

• gm：https://github.com/aheckmann/gm

　　问题：很久不更新了。

• node-images：https://github.com/zhangyuanwei/node-images

　　问题：不支持 gif 图片。

　　优点：轻量级，不依赖系统，国内大佬写的

　　使用简单：

var images = require("images");

/**
* 添加水印
* @param srcImg    源图
* @param watermarkImg  水印图
* @param x     添加水印水平位置x
* @param y     添加水印垂直位置y
*/
var imageAddWatermark = function(srcImg,watermarkImg,x,y){
    images(srcImg).draw(images(watermarkImg), x, y).save(output);
};

var srcImg = './img.jpg';
var watermarkImg = './logo.png';
var output = './out.jpg';
imageAddWatermark(srcImg, watermarkImg, 10, 10);

View Code