Webp

来自于:AC模块工作室立即使用

open close show hide move

概述

webp是google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。是现代图像格式,提供了优越的无损和有损压缩的图片在网络上。使用WebP,网站管理员和web开发人员可以创建更小、更丰富的图像,使网页更快。

webp无损的png图像小26%。WebP有损图像是25 - 34%小于等效SSIM质量指数可比JPEG图像

无损webp支持透明(也称为alpha通道)的成本只有22%额外的字节。对有损压缩RGB压缩情况下是可以接受的,有损WebP还支持透明度,通常提供3×PNG相比较小的文件大小。

使用情况

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

优势强劲所以推动起来也很快,因为压缩效率高,体积小,对节省磁盘空间、网络带宽,加快页面加载速度

Google、Youtube、Facebook、Ebay 以及很多国内较大的公司(TAB,360,美图等)的许多产品都开始使用 WebP 格式的图片,但现在仍有很多地方不支持这种格式,这时就需要用转换工具将图片转变为我们常用的 PNG 或 JPG 格式,在这里介绍一下转换的方法。

模块概述

webp模块封装了谷歌的webp.framework库,以便开发者更高效的显示webp格式的图片。支持本地路径(weight:// 、 fs://)和网络路径(http:// 、https://)。。)

open

渐进式加载图片

open({params})

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(必填项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
  3. y: 0, //(必填项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
  4. w: 320, //(必填项)数字类型;模块的宽度;默认值:所属的 Window 或 Frame 的宽度
  5. h: 300 //(必填项)数字类型;模块的高度;默认值:300
  6. }

path:

  • 类型:字符串
  • 描述:(必填项)图片地址,支持fs://、widget://、http://

fixedOn:

  • 类型:字符串
  • 描述:(可选项)模块所属 Frame 的名字,若不传则模块归属于当前 Window

fixed:

  • 类型:布尔
  • 描述:(可选项)模块是否随所属 Window 或 Frame 滚动
  • 默认值:true(不随之滚动)

示例代码

  1. var webp = api.require('webp');
  2. webp.open({
  3. rect:
  4. { x: 0,
  5. y: 0,
  6. w: 320,
  7. h: 250
  8. },
  9. path: 'http://www.ioncannon.net/wp-content/uploads/2011/06/test9.webp',
  10. fixedOn: api.frameName,
  11. });

可用性

iOS、Android系统

可提供的1.0.0及更高版本

close

关闭

close()

示例代码

  1. var webp = api.require('webp');
  2. webp.close();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

show

显示

show()

示例代码

  1. var webp = api.require('webp');
  2. webp.show();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide(callback(ret, err))

示例代码

  1. var webp = api.require('webp');
  2. webp.hide();

可用性

iOS、Android系统

可提供的1.0.0及更高版本

move

重置rect

move({params})

params

rect:

  • 类型:JSON 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
  1. {
  2. x: 0, //(必填项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:原值
  3. y: 0, //(必填项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:原值
  4. w: 320, //(必填项)数字类型;模块的宽度;默认值:原值
  5. h: 300 //(必填项)数字类型;模块的高度;默认值:原值
  6. }

示例代码

  1. var webp = api.require('webp');
  2. webp.move({
  3. rect:{
  4. x:0,
  5. y:200,
  6. w:200,
  7. h:200
  8. }
  9. });

可用性

iOS、Android系统

可提供的1.0.0及更高版本