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

2024-04-08 08:00:07

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

webp使用指南，请参考 https://www.imqianduan.com/browser/webp.html

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

转载于:https://www.cnblogs.com/zzsdream/p/11181374.html

nodejs应用转换png,jpg,gif为webp图片格式相关推荐

【Android 安装包优化】WebP 图片转换 ( 使用 iSparta 转换 WebP 图片格式 | Google 提供的 libwebp 库 )
文章目录一.使用 iSparta 转换 WebP 图片格式二.Google 提供的 libwebp 库三.参考资料一.使用 iSparta 转换 WebP 图片格式 isparta 工具已经停 ...
【Android Gradle 插件】自定义 Gradle 插件优化图片 ① ( Android 中的 WebP 图片格式使用 | WebP 格式转换 | WebP 参考文档 )
文章目录一.Android 中的 WebP 图片格式使用二.WebP 格式转换三.WebP 参考文档 Android Plugin DSL Reference 参考文档 : Android St ...
WebP图片格式处理和兼容使用
WebP图片格式处理和兼容使用用了这么久的WebP图片,最近在项目中发现对其了解得还是很不够,便以此文整理记录WebP相关知识点. (github:https://github.com/Michea ...
如何让Ubuntu系统支持WebP图片格式
如何让Ubuntu系统支持WebP图片格式本文主要向大家介绍如何让 Ubuntu 系统支持查看 WebP 图片格式,以及如何将 WebP 转为 JPEG 或 PNG 图片格式的方法. 什么是WebP ...
【Android 安装包优化】WebP 图片格式性能测试 ( 测试 WebP 图片解码速度 | 测试 WebP 图片编码速度 )
文章目录一.测试 WebP 图片解码速度二.测试 WebP 图片编码速度三.参考资料测试结果 : WebP 格式图片 , 解码快 , 编码慢 , 占用空间小 ; 在解码速度上 , WebP 格 ...
什么是WebP图片格式？如何在线把Webp格式转换为JPEG格式？
我们有时候从互联网上下载图片会发现图片是WebP格式而不是常见的JPEG或者是PNG格式,用自带的图片处理软件无法打开,那么什么是WebP格式呢?我们该如何打开WebP格式的图片文件?需要进行图片处理 ...
如何在移动端使用WebP图片格式
前言在移动端,图片一直是流量大头,一个简单的运营网页,图片大小动不动就以MB为单位,为了加快网页呈现的速度,我们必须使用最适合图片质量,这里所说的合适指图片的清晰度和大小达到合格的要求. 前端常常会 ...
关于webp图片格式初探
前言不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...
【Android 安装包优化】WebP 图片格式兼容与性能 ( Android 中的 WebP 图片格式兼容问题 | Android 中的 WebP 图片格式性能 )
文章目录一.Android 中的 WebP 图片格式兼容问题二.Android 中的 WebP 图片格式性能三.参考资料一.Android 中的 WebP 图片格式兼容问题在 Android ...

最新文章

热门文章