Node gm库实现webp以及生成渐进式图片
有需要的同学可以参考下, 原文链接: Node-gm库实现webp以及生成渐进式图片
提示: 本文基于Centos 7.
安装GraphicsMagick
Centos中使用如下命令安装, 默认支持webp格式:
$ yum install GraphicsMagick
使用如下命令查看是否安装成功以及支持webp格式:
$ gm -version
如下图所示:
webp图片生成
- 命令行生成webp图片
假设当前目录下存在3.jpg图片, 可使用如下CLI命令生成webp格式的图片:
$ gm convert 3.jpg 3.webp
使用du命令查看转换前后图片大小对比:
原3.jpg格式图片, 浏览器下载耗时与大小:
转换后的3.webp格式图片, 浏览器耗时与大小:
- gm包生成webp图片
可使用如下Node代码生成webp格式图片:
gm('3.jpg')
.write('3.webp', function(err){
console.log(err);
});
渐进式图片生成
目前GraphicsMagick可将(PNG, GIF, JPEG)三种格式图片转换成渐进式图片格式.
- 命令行生成渐进式图片
可使用如下CLI命令生成渐进式图片:
$ gm convert 3.jpg -interlace Line 3-line.jpg
原图如下所示:
生成后的渐进式图片如下所示(网络较快的情况下可能看不到渐进的效果, 可以在chrome设置网络条件观察效果):
- gm包生成渐进式图片
可使用如下代码生成渐进式图片:
gm('3.jpg')
.interlace('Line')
.write('3.webp', function(err){
console.log(err);
});
- 渐进式图片验证:
可使用如下两种方式验证生成的图片是否是渐进式的:
第一种: CLI命令行形式(identify 需要安装ImageMagick, $ yum install ImageMagick):
$ identify -verbose 3-line.jpg | grep Interlace
非渐进式图片:
渐进式图片:
第二种: 使用gm包查看, 代码如下:
gm('3-line.jpg')
.identify(function(err, data){
console.log(data);
});
生成的数据如下, 其中Interlace项的值为Line:
