文章目录
首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

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

2019年03月01日 发布 阅读(510) 作者:懒炖

本博客列表缩略图在支持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及使用

  1. // 安装
  2. npm install webp-converter --save
  1. // 使用
  2. var webp=require('webp-converter');
  3. //pass input image(.jpeg,.pnp .....) path ,output image(give path where to save and image file name with .webp extension)
  4. //pass option(read documentation for options)
  5. //cwebp(input,output,option,result_callback)
  6. webp.cwebp("input.jpg","output.webp","-q 80",function(status,error){
  7. //if conversion successful status will be '100'
  8. //if conversion fails status will be '101'
  9. console.log(status,error);
  10. });

问题

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

错误:

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

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

  1. yum install libXext.x86_64
  2. yum install libXrender.x86_64
  3. yum install libXtst.x86_64

浏览器判断是否支持webp

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

本博客使用的是eggjs框架:

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

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

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • 使用WebP图像格式的完整指南

    WebP,或非正式发音为 weppy ,是 Google开发者大约5年前推出的 一种图像格式 。

    发布:2019-02-28 阅读(441)

  • webpack-dev-server设置局域网IP可访问

    默认情况下,webpack-dev-server只可使用localhost或127.0.0.1访问,用局域网IP访问不了

    发布:2018-11-15 阅读(468)

  • webpack复制静态文件

    mvvm项目总会有一些静态文件,如静态合同、协议等等,如何通过webpack来原样复制?

    发布:2018-11-09 阅读(595)

  • webpack最小化打包lodash插件

    webpack最小化打包lodash插件,如果全量打包的话,lodash会非常大

    发布:2018-11-09 阅读(461)

  • 利用webpack搭建mock API服务

    vue2.0 项目,利用webpack搭建mock api服务,用于本地调试数据

    发布:2018-11-05 阅读(676)

  • webpack中文文档

    webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle

    发布:2018-10-18 来源:docschina.org

  • webpack 1.x升级到webpack4.x过程中的各种问题解决

    发布:2018-04-16 阅读(879)

  • WebP 支持:超乎你想象

    英文原文:https://optimus.keycdn.com/support/webp-support/ WebP 是 Google 发明的更小的替代 JPEG 和 PNG 的格式。最近有很多关于 WebP 支持的疑惑,细说来就是可以用它做什么,不能做什么,比如说浏览器支持,CMS 支持等等。今天我想清除你所有可能的疑虑。WebP 的支持程度实际上比你想的可能要好得多。

    发布:2016-11-19 来源:linux.cn

  • Image Optimizer5.0—非常不错的JPG,GIF,PNG,TIFF图片无损压缩工具

    用了很多图片压缩工具,Image Optimizer5.0图片压缩工具,个人觉得是非常不错的,特别是对JPG图片的压缩,真正能达到不改变图片质量,图片大小压缩达到50%以上。图片压缩能达到50%以上,这对网站性能是很大的提升的。

    发布:2013-10-29 阅读(207)