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及更高版本