Node.js-开发实践：图片处理

【前言】

使用nodejs的过程中会遇到一些处理图片的场景，

比如上传图片时进行压缩，

或者nodejs开发客户端本处理图片等，

本文介绍下nodejs常见的图片处理操作。

【常见图片处理库】

nodejs常见的图片处理库如下，

可以看到sharp从各方面都遥遥领先

npm包

github地址

github stars

github issues

最后更新时间

npm下载量

sharp

https://github.com/lovell/sharp

26.4k

109

2023年09月19日

2831k

https://github.com/aheckmann/gm

6.9k

321

2022年09月21日

225k

jimp

https://github.com/jimp-dev/jimp

13k

173

2023年07月27日

923k

lwip

https://github.com/EyalAr/lwip

2.4k

114

2016年07月19日

408

【sharp】

官网： https://sharp.pixelplumbing.com/

github： https://github.com/lovell/sharp#sharp

npm： https://www.npmjs.com/package/sharp

功能介绍：

1.将大图压缩为小图，并转换为常见的图片格式，包括jpg，png，webp，gif等

2.修改图片尺寸，比几个竞品快4-5倍

3.一些常见的图片操作，包括缩放，旋转等

4.多设备支持，包括windows，linux，mac等

支持的格式：

1.读取：jpeg，png，webp，gif，avif，tiff，svg

2.输出：jpeg，png，webp，gif，avif，tiff

【安装】

需要nodejs大于14.15.0

npm install sharp

安装过程会下载一个对应平台的bin文件，大约7M左右，

默认npm会自定下载对应平台的bin文件，例如macos下载对应的macos文件，

如果要下载不同平台文件，详见： https://sharp.pixelplumbing.com/install#cross-platform

官方贴心的给出了中国镜像，

本地尝试不加中国镜像确实会timeout，

npm_config_sharp_binary_host="https://npmmirror.com/mirrors/sharp" \
  npm_config_sharp_libvips_binary_host="https://npmmirror.com/mirrors/sharp-libvips" \
  npm install sharp

【获取image】

操作图片前需要先通过sharp方法获取一个image，

其中input可以是文件路径也可以是buffer等，

详见： https://sharp.pixelplumbing.com/api-constructor

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

【获取图片信息】

使用metadata方法获取图片信息，

详见： https://sharp.pixelplumbing.com/api-input#metadata

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// info
const info = await image.metadata();

// info
{
    channels: 4,
    density: 72,
    depth: 'uchar',
    exif: Buffer @Uint8Array [],
    format: 'png',
    hasAlpha: true,
    hasProfile: true,
    height: 260,
    icc: Buffer @Uint8Array [],
    isProgressive: false,
    space: 'srgb',
    width: 506,
}

【图片转换】

简单图片转换

支持将常见图片格式jpg，png，webp，gif等相互转换

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// convert
const newImage = await image.toFile(output);

复杂图片转换

上面toFile方法不支持高级的一些处理，

每种图片转换sharp提供了对应的方法，

转jpg： https://sharp.pixelplumbing.com/api-output#jpeg

转png： https://sharp.pixelplumbing.com/api-output#png

转webp： https://sharp.pixelplumbing.com/api-output#webp

转gif： https://sharp.pixelplumbing.com/api-output#gif

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// jpg
const newJpg = await image.jpeg(options).toFile(output);

// png
const newPng = await image.png(options).toFile(output);

// webp
const newWebp = await image.webp(options).toFile(output);

// gif
const newGif = await image.gif(options).toFile(output);

【图片缩放】

resize也是最常见的操作，

options详见： https://sharp.pixelplumbing.com/api-resize

// sharp
import sharp from 'sharp';

// image
const image = sharp(input);

// new image
const newImage = await image.resize(options).toFile(output);

【其他】

图片合成： https://sharp.pixelplumbing.com/api-composite

图片操作： https://sharp.pixelplumbing.com/api-operation

图片颜色： https://sharp.pixelplumbing.com/api-colour

【qiao-img】

封装一个npm包，欢迎使用， https://www.npmjs.com/package/qiao-img

|— meta

const info = await meta(input);

|—file

const info = await file(input, output, meta);

|—convert

const info = await convert(input, output, meta, convertType, convertOptions);

|—resize

const info = await resize(input, output, options);

也支持cli使用， https://www.npmjs.com/package/qiao-img-cli

# 全局安装
npm i -g qiao-img-cli

# 帮助
qimg
qimg -h

# resize
qimg resize src width height fit

# convert
qimg convert src format

# meta
qimg meta src

【总结】

1.图片处理技术选型：sharp

2.sharp-介绍

3.sharp-安装

4.sharp-获取image

5.sharp-获取图片信息

6.sharp-图片转换

7.sharp-图片缩放

8.qiao-img， https://www.npmjs.com/package/qiao-img

9.qiao-img-cli， https://www.npmjs.com/package/qiao-img-cli