NodeJS 应用将 png/jpg/gif 格式的图片转换为 webp 格式 - 文章教程

NodeJS 应用将 png/jpg/gif 格式的图片转换为 webp 格式

发布于 2020-12-17 字数 2627 浏览 2175 评论 0

在支持 webp 格式的浏览器下,使用的是 webp 格式图片,不支持 webp 图片下使用的是原图片(如 png、gif、jpg 等)。

NodeJS 应用将 png/jpg/gif 格式的图片转换为 webp 格式

如何转换 webp?

google 官方有推出工具 cwebp 用来转换webp,可以通过命令行的形式使用 webp

cwebp 官方文档: https://developers.google.com/speed/webp/download

这里我们使用另一个基于 cwebp 封装后的插件 web-converter,使用起来相对比较简单

安装 webp-converter 及使用

安装

npm install webp-converter --save

使用

var webp=require('webp-converter');
//pass input image(.jpeg,.pnp .....) path ,output image(give path where to save and image file name with .webp extension)
//pass option(read documentation for options)
//cwebp(input,output,option,result_callback)
webp.cwebp("input.jpg","output.webp","-q 80",function(status,error){
  //if conversion successful status will be '100'
  //if conversion fails status will be '101'
  console.log(status,error);
});

问题

webp-converter 在本地(windows 7)安装测试一点问题没有,传至服务器就报错了

cwebp: error while loading shared libraries: libaio.so.6: cannot open shared object file: no such file or directory

一直以为是路径问题,后来发现是依赖包的问题,安装 linux 缺失依赖,问题解决

yum install libXext.x86_64
yum install libXrender.x86_64
yum install libXtst.x86_64

浏览器判断是否支持 webp

通过 http 请求的 accept 字段,可以判断浏览器是否支持 webp 格式,本博客使用的是 eggjs 框架:

// 是否支持webp
const requestAccept = ctx.request.headers.accept;
const isSuportWebP = /image\/webp/gi.test(requestAccept);

eggjs 使用 Nunjucks 作为模板,在模板中判断 isSuportWebP 是否为 true,是则输出 webp 格式的URL,否则输出默认图片格式 URL。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0