Gallery

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-03-23   阅读次数: 19   查看权限: 游客查看

Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。

方法:

  • pick从系统相册选择文件(图片或视频)
  • save保存文件到系统相册中

对象:

回调方法:

pick

从系统相册选择文件(图片或视频)

void plus.gallery.pick( successCB, errorCB, option );

说明:

从系统相册中选择图片或视频文件。每次仅能选择一个文件,选择后将返回选择的文件路径。

参数:

  • succesCB (GalleryPickSuccessCallback) 可选 单选时通过GalleryPickSuccessCallback回调函数返回选择的图片或视频文件路径,多选时通过GalleryMultiplePickSuccessCallback回调函数返回图片或视频文件路径。
  • errorCB (GalleryErrorCallback) 可选 从系统相册中选择文件操作错误的回调函数
  • option (GalleryOption) 可选 设置选择文件的参数

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Gallery Example</title>
	<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕,现在可以正常调用扩展API 
function onPlusReady() {
}
// 从相册中选择图片 
function galleryImg() {
	// 从相册中选择图片
	console.log("从相册中选择图片:");
plus.gallery.pick( function(path){
	console.log(path);
}, function ( e ) {
	console.log( "取消选择图片" );
}, {filter:"image"} );
}
// 从相册中选择多张图片 
function galleryImgs(){
	// 从相册中选择图片
	console.log("从相册中选择多张图片:");
plus.gallery.pick( function(e){
	for(var i in e.files){
		console.log(e.files[i]);
	}
}, function ( e ) {
	console.log( "取消选择图片" );
},{filter:"image",multiple:true});
}
	</script>
	</head>
	<body >
		从相册中选择图片
		<br/>
		<button onclick="galleryImg()">选择单张图片</button>
		<br/>
		<button onclick="galleryImgs()">选择多张图片</button>
	</body>
</html>

save

保存文件到系统相册中

void plus.gallery.save( path, successCB, errorCB );

说明:

保存文件到系统相册中。 每次仅能保存一个文件,支持图片类型(jpg/jpeg、png、bmp等格式)和视频文件(3gp、mov等格式)。 若保存的文件系统不支持,则通过errorCB返回错误信息。

参数:

  • path (DOMString) 可选 仅支持本地路径,不支持网络路径。
  • succesCB (GallerySuccessCallback) 可选 保存文件到系统相册中成功的回调函数
  • errorCB (GalleryErrorCallback) 可选 保存文件到系统相册中失败的回调函数

返回值:

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Gallery Example</title>
	<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
var r = null; 
// 扩展API加载完毕,现在可以正常调用扩展API 
function onPlusReady() {
}
// 保存图片到相册中 
function savePicture() {
	plus.gallery.save( "_doc/a.jpg", function () {
		alert( "保存图片到相册成功" );
	} );
}
	</script>
	</head>
	<body >
	<input type="button" value="Save picture to Gallery" onclick="savePicture();" ></input>
	</body>
</html>

GalleryOption

JSON对象,从相册中选择文件的参数

属性:

  • filename:DOMString,从系统相册中选择文件的保存路径,如果路径中包括文件后缀名称,则表明指定文件路径及名称,否则仅指定文件保存目录,文件名称由程序自动生成。
  • filter:GalleryFilter,可通过此参数设定相册选择器中可选择的文件类型,可设置仅可选择图片文件或视频文件,默认值为仅可选择图片文件。
  • multiple:Boolean,可从系统相册中选择多张图片,选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。
  • animation:Boolean,是否显示系统相册文件选择界面的动画,可取值true、false,默认值为true。
  • popover:PopPosition,对于大屏幕设备如iPad,相册选择界面为弹出窗口,此时可通过此参数设置弹出窗口位置。 其为JSON对象,格式如{top:"10",left:10,width:200,height:200},所有值为像素值,左上坐标相对于容器的位置,默认弹出位置为屏幕居中。

GalleryFilter

相册选择文件过滤类型

属性:

  • "image":DOMString,仅可选择图片文件
  • "video":DOMString,仅可选择视频文件
  • "none":DOMString,不过滤,可选择图片或视频文件

PopPosition

JSON对象,弹出拍照或摄像界面指示位置

属性:

  • top:DOMString,弹出拍照或摄像窗口指示区域距离容器顶部的距离,单位支持像素值(如100px)和百分比(如50%),如不写单位则为像素值值。
  • left:DOMString,弹出拍照或摄像窗口指示区域距离容器左侧的距离,单位支持像素值(如100px)和百分比(如50%),如不写单位则为像素值。
  • width:DOMString,弹出拍照或摄像窗口指示区域的宽度,单位支持像素值(如100px)和百分比(如50%),如不写单位则为像素值。
  • height:DOMString,弹出拍照或摄像窗口指示区域的高度,单位支持像素值(如100px)和百分比(如50%),如不写单位则为像素值。

GalleryPickSuccessCallback

单选系统相册图片成功的回调

void onSuccess( file ) {
	// Success code
}

说明:

系统相册中单选图片或视频文件成功的回调函数,在选择文件操作成功时调用。

参数:

  • file (DOMString) 可选 选择的图片或视频文件路径

GalleryMultiplePickSuccessCallback

多选系统相册图片成功的回调

void onSuccess( event ) {
	// event.files 保存多选的图片或视频文件路径
}

说明:

系统相册中多选图片或视频文件成功的回调函数,在多选择文件操作成功时调用。

参数:

  • event (Event) 可选 Event对象包含以下属性: files - 字符串数组,保存多选的图片或视频文件路径。

GallerySuccessCallback

操作系统相册成功的回调

void onSuccess() {
	// Success code
}

说明:

系统相册操作成功的回调函数,在保存文件到系统相册操作成功时调用。

GalleryErrorCallback

系统相册操作失败的回调

void onError( error ) {
	// Error code.
}

说明:

系统相册操作失败的回调函数,在选择或保存图片操作失败时调用。

参数:

  • error (DOMException) 可选 相册操作失败的错误信息

关键词: html5puls,Gallery   编辑时间: 2015-03-23 22:56:00

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
0%(0)
上一篇:Events
下一篇:Geolocation
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐