700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > nodejs应用转换png jpg gif为webp图片格式

nodejs应用转换png jpg gif为webp图片格式

时间:2022-05-14 03:05:08

相关推荐

nodejs应用转换png jpg gif为webp图片格式

本博客列表缩略图在支持webp格式的浏览器下,使用的是webp格式图片,不支持webp图片下使用的是原图片(如png,gif,jpg等)

webp使用指南,请参考/browser/webp.html

如何转换webp?

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

cwebp官方文档:/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_64yum install libXrender.x86_64yum install libXtst.x86_64

浏览器判断是否支持webp

通过http请求的accept字段,可以判断浏览器是否支持webp格式

本博客使用的是eggjs框架:

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。