Webp

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

概述

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 对象
  • 描述:(可选项)模块的位置及尺寸
  • 内部字段:
{
    x: 0,   //(必填项)数字类型;模块左上角的 x 坐标(相对于所属的 Window 或 Frame);默认值:0
    y: 0,   //(必填项)数字类型;模块左上角的 y 坐标(相对于所属的 Window 或 Frame);默认值:0
    w: 320, //(必填项)数字类型;模块的宽度;默认值:所属的 Window 或 Frame 的宽度
    h: 300  //(必填项)数字类型;模块的高度;默认值:300
}

path:

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

fixedOn:

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

fixed:

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

示例代码

var webp = api.require('webp');
webp.open({
    rect:
    {    x: 0,
        y: 0,
        w: 320,
        h: 250
    },
   path: 'http://www.ioncannon.net/wp-content/uploads/2011/06/test9.webp',
    fixedOn: api.frameName,
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本

close

关闭

close()

示例代码

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

可用性

iOS、Android系统

可提供的1.0.0及更高版本

show

显示

show()

示例代码

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

可用性

iOS、Android系统

可提供的1.0.0及更高版本

hide

隐藏

hide(callback(ret, err))

示例代码

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

可用性

iOS、Android系统

可提供的1.0.0及更高版本

move

重置rect

move({params})

params

rect:

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

示例代码

var webp = api.require('webp');
webp.move({
rect:{
x:0,
y:200,
w:200,
h:200
}
});

可用性

iOS、Android系统

可提供的1.0.0及更高版本