Fork me on GitHub

Node.js压缩图片的坑

前言

最近在项目开发中,发现网页加载时图片加载的很慢,主要是图片太大,而服务器带宽有限,所以打算后台压缩一下图片..s

Node.js压缩图片的坑

最近在项目开发中,发现网页加载时图片加载的很慢,主要是图片太大,而服务器带宽有限,所以打算后台压缩一下图片

于是乎,开始谷歌了很多教程,前期试了网上的好多教程代码,发现都不可以!

后来发现是因为网上很多对imagemin的api调用写法不对。下面教大家避坑!

进入正题

图片压缩主要会用到这几个包:

这里介绍一下, imagemin 是我们主要的图片处理工具,也是比较强大的图片处理工具。而 这里的imagemin-mozjpegimagemin-pngquant 是作为Imagemin 的插件来使用

但是!这两个插件的npm官网给出的文档,api的调用是不对滴!

问题就出在于图片的输入路径和输出路径写法不对,应以Imagemin的为准

两个插件(以imageminPngquant为例)的文档给出的Usage ,输出路径('build/images')写在imagemin函数的参数里,这是错误的!!

1
2
3
4
5
6
7
8
9
10
//错误的用法!!
(async () => {
await imagemin(['images/*.png'], 'build/images', {
plugins: [
imageminPngquant()
]
});

console.log('Images optimized');
})();

我们来看看imagemin的官网文档给出的 Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const imagemin = require('imagemin');
const imageminJpegtran = require('imagemin-jpegtran');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
const files = await imagemin(['images/*.{jpg,png}'], {
destination: 'build/images', //这里是重点!
plugins: [
imageminJpegtran(),
imageminPngquant({
quality: [0.6, 0.8]
})
]
});

console.log(files);
//=> [{data: <Buffer 89 50 4e …>, path: 'build/images/foo.jpg'}, …]
})();

可以看到输出路径是写在第二个参数对象的destination里,这才是正确的用法

我的的项目是采用了Egg.js框架,是一个阿里开发的基于Node.js企业级框架,下面贴上代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const imagemin = require('imagemin');
const imageminMozjpeg = require("imagemin-mozjpeg");
const imageminPngquant = require("imagemin-pngquant");

const srcImage = '/images/*.{jpg,png}'; //图片的路径,可以是图片文件夹或单张图片路径,最好用绝对路径

const output = '/imagesAfterCompress/*.{jpg,png}'; //压缩后的图片存放的目录,图片名它会自动和原图片一致,最好用绝对路径

const result = await imagemin([srcImage], {
destination: output,
plugins: [

imageminMozjpeg({
quality: 70 //测试了下,70挺合适
}
),
imageminPngquant({
quality: [0.6, 0.8] //注意,两个插件的写法不一样,一个数值,一个数组
})
]
});

总结

  • 两个image的依赖在npm官网上的使用方法和image的github文档上的使用方法有出入,要以image 的github文档为准
-------------Page's overThanks for reading-------------

本文标题:Node.js压缩图片的坑

本文作者:SherlockYang

发布时间:2019年10月11日 - 22:10

最后更新:2019年10月11日 - 23:10

原始链接:https://sherlock-y.com/2019/10/11/Node-js压缩图片的坑/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果文章内容对你有帮助,就赏博主一瓶维他奶吧~