Node.js 服务端图片处理利器——sharp 进阶操作指南

sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写 的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。当然，网络上相关的文章比较多，sharp 的官方文档也比较详细，所以这不是本文的重点。这里主要是想记录一下我在使用 sharp 过程中遇到的一些稍复杂的图片处理需求的解决方案，希望分享出来能够对大家有所帮助。

sharp 基础

sharp 整体采用流式处理模式，其在读入图像数据后经过一系列的处理加工然后输出结果。我们看一个简单的示例就能理解：

const sharp = require('sharp');
sharp('input.jpg')
  .rotate()
  .resize(200)
  .toBuffer()
  .then( data => ... )
  .catch( err => ... );
复制代码

sharp 几乎所有的函数接口都挂载在 Sharp 实例上，因此图像处理的第一步操作一定是读入图片数据（sharp 函数接受图片本地路径或者图片 Buffer 数据作为参数）并将其转换为 Sharp 实例，然后才是如流水线一般的加工。因此，这里应该提供一个预处理函数，将服务端接收到的图片转换为 Sharp 实例：

/**
*
* @param  { String | Buffer } inputImg 图片本地路径或图片 Buffer 数据
* @return { Sharp }
*/
async convert2Sharp(inputImg) {
    return sharp(inputImg)
}
复制代码

然后就可以进行具体的图像处理。

添加水印

后端实现

添加水印功能应该算是比较常见的图片处理需求了。sharp 在图像合成方面只提供了一个函数：overlayWith，其接受一个图片参数（同样是图片本地路径字符串或者图片 Buffer 数据）以及一个可选的 options 配置对象（可配置水印图片的位置等信息）然后将该图片覆盖到原图上。逻辑上也比较简单，我们的代码如下所示：

/**
* 添加水印
* @param  { Sharp  } img 原图
* @param  { String } watermarkRaw 水印图片
* @param  { top } 水印距图片上边缘距离
* @param  { left } 水印距图片左边缘距离
*/
async watermark(img, { watermarkRaw, top, left }) {
    const watermarkImg = await watermarkRaw.toBuffer()
    return img
        .overlayWith(watermarkImg, { top, left })
}
复制代码

这里简单起见只支持配置水印图片的位置，sharp 还支持更复杂的配置参数比如是否重复粘贴多个水印图片、是否只在 α