webp

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 对象
  • 描述：（可选项）插件的位置及尺寸
  • 内部字段：
{
    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及更高版本

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24