Nodejs处理图片的几种方法,使用sharp，jimp，webconvert

使用sharp

sharp 是 Node.js 平台上相当热门的一个图像处理库，其实际上是基于 C 语言编写的 libvips 库封装而来，因此高性能也成了 sharp 的一大卖点。sharp 可以方便地实现常见的图片编辑操作，如裁剪、格式转换、旋转变换、滤镜添加等。当然，网络上相关的文章比较多，sharp 的官方文档也比较详细。sharp是最快的 Node.js 模块用于调整 JPEG, PNG, WebP 和 TIFF 图片大小。

1. 安装Sharp库

安装Sharp库可以使用npm命令：

npm install sharp

2. 调用Sharp库

在代码中调用Sharp库，可以先引入Sharp库：

const sharp = require('sharp');

3. 图片格式转换

利用Sharp库，可以将图片格式转换为其它格式，例如将JPEG图片转换为PNG图片：

sharp('input.jpg').toFormat('png').toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数
});

4. 尺寸调整

利用Sharp库，可以调整图片的尺寸，例如将图片宽度调整为800像素：

sharp('input.png').resize(800, null).toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数});

5. 压缩

利用Sharp库，可以压缩图片文件大小，例如将图片文件压缩为50%：

sharp('input.png').jpeg({ quality: 50 }).toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数});

6. 裁剪

利用Sharp库，可以裁剪图片，例如将图片裁剪为400×400像素：

sharp('input.png').resize(800, 800).extract({ width: 400, height: 400, left: 200, top: 200 }).toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数});

7. 旋转

利用Sharp库，可以旋转图片，例如将图片逆时针旋转90度：

sharp('input.png').rotate(-90).toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数});

8. 添加水印

利用Sharp库，可以在图片上添加水印，例如将文字“Hello World”添加到图片左上角：

sharp('input.png').resize(800, null).overlayWith(Buffer.from('Hello World'), { gravity: 'northwest' }).toFile('output.png', (err, info) => {// 处理错误或完成后的回调函数});

以上是使用Sharp库的基本步骤，具体使用可以根据具体需求进行调整。

重要：安装 Tips 老版本node安装sharp

# 我的node版本比较老，安装最新版本的sharp会出错，可以安装0.28.0版本的sharp
root@e345068e1d64:/usr/src/app# node -v
v16.1.0

#可以安装0.28.0版本的sharp
安装命令：npm install sharp@0.28.0

#自己写的转换函数
async function createThumbnail(inputFile, outputFile, width, height) {
  await sharp(inputFile)
    .resize(width, height)
    .toFile(outputFile)
    .then(() => {
      console.log('缩略图成功');
      return;
    })
    .catch(err => {
      console.error(err);
      copyFile('/mnt/face-swapper/public/wechat/image-preview.jpg', outputFile);
    });
};

使用jimp

Jimp 是一个用于 Node.js 的图片处理库，它支持读取、操作和保存多种格式的图片，比如 PNG、JPEG、BMP、GIF 等等。Jimp处理速度要比sharp慢了不少。

以下是使用 Jimp 的基本步骤：

1. 安装 Jimp

通过 npm 命令安装 Jimp：

npm install jimp

2. 引入 Jimp

在代码中引入 Jimp 模块：

const Jimp = require('jimp');

3. 读取图片

使用 Jimp.read() 方法读取图片，并在回调函数中处理图片：

Jimp.read('path/to/image.png', (err, image) => {if (err) throw err;// 对图片进行操作
});

4. 操作图片

Jimp 支持多种操作，比如调整大小、裁剪、旋转、缩放、滤镜等等。以下是一些常见的操作示例：

// 调整大小
image.resize(200, 200)// 裁剪
image.crop(10, 10, 100, 100)// 旋转
image.rotate(45)// 缩放
image.scale(0.5)// 滤镜
image.greyscale().blur(5)

5. 保存图片

使用 Jimp.write() 方法保存图片：

image.write('path/to/new/image.png', (err) => {if (err) throw err;console.log('Image saved.');
});####完整代码示例
const Jimp = require('jimp');Jimp.read('path/to/image.png', (err, image) => {if (err) throw err;image.resize(200, 200).crop(10, 10, 100, 100).rotate(45).scale(0.5).greyscale().blur(5).write('path/to/new/image.png', (err) => {if (err) throw err;console.log('Image saved.');});
});

Tips：

#自己定义的处理函数
async function createThumbnail(inputFile, outputFile, width, height) {

    // 加载图片
    await Jimp.read(inputFile) // 替换为你的图片路径
        .then(image => {
            // 设置缩略图的宽度和高度
            const thumbnailWidth = width; // 缩略图的宽度
            const thumbnailHeight = height; // 缩略图的高度

            // 创建缩略图
            return image.resize(thumbnailWidth, thumbnailHeight)
                .quality(100) // 设置图片质量
                .write(outputFile); // 保存缩略图，替换为你想要保存的路径
        })
        .catch(err => {

            copyFile('/mnt/face-swapper/public/wechat/image-preview.jpg', outputFile);
        });
};

使用webconvert

WebP是一种图像文件格式，由Google开发。它旨在提供更高的图像压缩率和更好的图像质量，以替代传统的PNG、JPEG和GIF等格式。WebP格式使用了先进的压缩算法，可显著减小图像文件的大小，同时保持较高的视觉质量。尽管WebP格式在性能和压缩方面具有优势，但目前并不是所有的浏览器和操作系统都支持该格式。因此，将WebP格式转换为PNG格式可以确保图像在各种平台和设备上得到良好的支持和展示。不同浏览器对WebP格式的支持程度不同。有些浏览器可以原生支持WebP格式，而另一些则需要通过特定的插件或扩展来实现。将WebP格式转换为PNG格式可以消除浏览器兼容性问题，确保图像在所有主流浏览器中都能正常显示，降低用户的使用门槛。转换WebP到PNG格式可以确保原始图像的质量得到保留。

在同等质量下，WebP格式图像的体积要比JPEG格式图像小40%。目前互联网的流量中有65%为图片，这意味如果Google让WebP格式得到普及的话，浏览网页的速度将大幅提升。

1. 安装 Node.js 和 npm（如果你还没有安装的话）。

2. 打开终端或命令行界面，使用 npm 安装 webpconvert：

npm install -g webp-convert

3. 转换一张图片格式为 WebP 格式的命令行语法如下：

npm install -g webp-convert

例如，在当前目录下有一张名为 “example.png” 的 PNG 图片，将它转换为 WebP 格式并输出到 “example.webp”，可以使用以下命令：

webpconvert example.png example.webp

4. 根据需要，可以添加一些选项来调整转换的质量和大小，例如：

– 调整输出图片质量等级：使用 “-q” 或 “–quality” 选项，并指定一个介于 0 到 100 之间的数字。

webpconvert example.png example.webp -q 80

– 调整输出图片大小：使用 “-r” 或 “–resize” 选项，并指定一个百分比或像素值。

webpconvert example.png example.webp -r 50%

– 转换图片并自动替换原文件（需使用 “-o” 或 “–overwrite” 选项）。

webpconvert example.png -o

更多选项和用法可以通过运行 “webpconvert –help” 命令来查看。

92IT

Just love IT.

Nodejs处理图片的几种方法,使用sharp，jimp，webconvert