Node gm库实现webp以及生成渐进式图片
发布于 6 小时前 作者 ncuzp 65 次浏览 最后一次编辑是 5 小时前 来自 分享

有需要的同学可以参考下, 原文链接: Node-gm库实现webp以及生成渐进式图片

提示: 本文基于Centos 7.

安装GraphicsMagick

Centos中使用如下命令安装, 默认支持webp格式:

$ yum install GraphicsMagick

使用如下命令查看是否安装成功以及支持webp格式:

$ gm -version

如下图所示: gm-version

webp图片生成

  • 命令行生成webp图片

假设当前目录下存在3.jpg图片, 可使用如下CLI命令生成webp格式的图片: $ gm convert 3.jpg 3.webp

使用du命令查看转换前后图片大小对比: webp

3.jpg格式图片, 浏览器下载耗时与大小: 3-jpg-browser.png

转换后的3.webp格式图片, 浏览器耗时与大小: 3-webp-browser.png

  • gm包生成webp图片

可使用如下Node代码生成webp格式图片:

gm('3.jpg')
.write('3.webp', function(err){
	console.log(err);
});

渐进式图片生成

目前GraphicsMagick可将(PNG, GIF, JPEG)三种格式图片转换成渐进式图片格式. interlace.png

  • 命令行生成渐进式图片

可使用如下CLI命令生成渐进式图片: $ gm convert 3.jpg -interlace Line 3-line.jpg

原图如下所示: 3.jpg

生成后的渐进式图片如下所示(网络较快的情况下可能看不到渐进的效果, 可以在chrome设置网络条件观察效果): 3-line.jpg

  • 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

非渐进式图片: interlace-none.png 渐进式图片: interlace-yes.png

第二种: 使用gm包查看, 代码如下:

gm('3-line.jpg')
.identify(function(err, data){
	console.log(data);
});

生成的数据如下, 其中Interlace项的值为Line: interlace-gm.png

参考链接

GraphicsMagick官网 GitHub gm GraphicsMagick Interlace 其他参考

回到顶部