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

发布于 2020-12-17 11:19:21 字数 2377 浏览 3147 评论 0

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

如何转换 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。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84960 人气
更多

推荐作者

无远思近则忧

文章 0 评论 0

久伴你

文章 0 评论 0

萌无敌

文章 0 评论 0

新一帅帅

文章 0 评论 0

莫多说

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文