HTML5+规范：gallery(管理系统相册)

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

1、方法

1.1、pick: 从系统相册选择文件（图片或视频）

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

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

参数：

succesCB: (
GalleryPickSuccessCallback | GalleryMultiplePickSuccessCallback ) 必选 从系统相册中选择文件完成后的回调函数，单选时通过GalleryPickSuccessCallback回调函数返回选择的图片或视频文件路径，多选时通过GalleryMultiplePickSuccessCallback回调函数返回图片或视频文件路径。

errorCB: ( GalleryErrorCallback
) 可选 从系统相册中选择文件操作错误的回调函数。

option: ( GalleryOptions
) 可选 设置选择文件的参数

返回值：void : 无

平台支持：

Android - 2.2+ (支持): 返回的是系统相册路径，如“file:///storage/sdcard0/DCIM/Camera/1428841301674.jpg”。

iOS - 5.1+ (支持): 受系统相册路径的访问限制，选择后图片会先拷贝到应用沙盒下的"_doc"目录中，如“file:///var/mobile/Applications/0373DFBF-6AA7-4C9B-AE1F-766469117C94/Library/Pandora/apps/HBuilder/doc/IMG_0005.jpg”。

示例：

<!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>

1.2、save: 保存文件到系统相册中

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

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

参数：

path : ( String ) 必选 要保存到系统相册中的文件文件地址，仅支持本地路径，不支持网络路径。

succesCB: (
GallerySuccessCallback ) 必选 保存文件到系统相册中成功的回调函数

errorCB: ( GalleryErrorCallback
) 可选 保存文件到系统相册中失败的回调函数

返回值：void : 无

平台支持：Android - 2.2+ (支持)、iOS - 4.3+ (支持)

示例：

<!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>

2、对象

2.1、GalleryOptions: JSON对象，从相册中选择文件的参数

属性：

（1）、animation: (Boolean 类型 )是否显示系统相册文件选择界面的动画，可取值true、false，默认值为true。

平台支持：Android - 2.2+ (不支持): 忽略此参数，无动画效果。iOS - 4.3+ (支持): 支持动画效果。

（2）、filename: (String 类型 )选择文件保存的路径。某些系统不能直接使用系统相册的路径，这时需要将选择的文件保存到应用可访问的目录中，可通过此参数设置保存文件的路径。 如果路径中包括文件后缀名称，则表明指定文件路径及名称，否则仅指定文件保存目录，文件名称自动生成。

平台支持：Android - 2.2+ (不支持): 直接返回系统相册中的文件路径，忽略此参数。iOS - 4.3+ (支持): iOS会将相册中的文件拷贝到当前应用沙箱系统目录中，如果未设置则默认使用“_doc”目录。

（3）、filter: (GalleryFilter 类型 )相册中选择文件类型过滤器。系统相册选择器中可选择的文件类型，可设置为仅选择图片文件（“image”）、视频文件（“video”）或所有文件（“none”），默认值为“image”。

<!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"} );
}
</script>
</head>
<body >
从相册中选择图片
<br/>
<button onclick="galleryImg()">选择图片</button>
</body>
</html>

（4）、maximum: (Number 类型 )最多选择的图片数量。仅在支持多选时有效，取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。
如果设置的值非法则使用默认值Infinity。

平台支持：Android - ALL (支持): 系统相册文件选择界面不支持设置选择的图片数量，为了确保此功能可正常使用，应该设置system属性值为false强制使用5+统一相册选择界面。iOS - ALL (支持)

<!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 galleryMaximum(){
// 从相册中选择图片
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,maximum:3,system:false});// 最多选择3张图片
}
</script>
</head>
<body >
最多选择的图片数量
<br/>
<button onclick="galleryMaximum()">设置选择的图片数量</button>
</body>
</html>

（5）、multiple: (Boolean 类型 )是否支持多选图片。可从系统相册中选择多张图片，选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。

<!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 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="galleryImgs()">选择图片</button>
</body>
</html>

（6）、onmaxed: (Function 类型 )超过最多选择图片数量事件。使用相册多选图片时，可通过maximum属性设置最多选择的图片数量，当用户操作选择的数量大于此时触发此事件。平台支持：Android
- ALL (支持):
系统相册文件选择界面不支持设置选择的图片数量，只有当用户选择的图片数量超过最多图片数是触发，为了确保此功能可正常使用，应该设置system属性值为false强制使用5+统一相册选择界面。
注意：此时显示的相册文件选择界面，需要使用plus.nativeUI.*弹出提示框，否则可能无法正常显示。iOS - ALL
(支持)

<!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 galleryOnmaxed(){
// 从相册中选择图片
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,maximum:3,system:false,onmaxed:function(){
plus.nativeUI.alert('最多只能选择3张图片');
    }});// 最多选择3张图片
}
</script>
</head>
<body >
超过最多选择图片数量事件
<br/>
<button onclick="galleryOnmaxed()">选择图片超数事件</button>
</body>
</html>

（7）、popover: (PopPosition 类型 )相册选择界面弹出指示区域。对于大屏幕设备如iPad，相册选择界面为弹出窗口，此时可通过此参数设置弹出窗口位置。
其为JSON对象，格式如{top:"10px",left:"10px",width:"200px",height:"200px"}，所有值为像素值，左上坐标相对于容器的位置，默认弹出位置为屏幕居中。

（8）、selected: (Array[ String ] 类型 )已选择的图片路径列表。 仅在多图片选择时生效，相册选择界面将选中指定的图片路径列表。 如果指定的路径无效，则忽略此项；如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。

平台支持：Android - ALL (支持): 系统相册文件选择界面不支持设置已选择的图片列表，为了确保此功能可正常使用，应该设置system属性值为false强制使用5+统一相册选择界面。iOS - ALL (支持)

<!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() {
}
var lfs=null;// 保留上次选择图片列表
// 从相册中选择多张图片
function gallerySelected(){
// 从相册中选择图片
console.log("从相册中选择多张图片:");
    plus.gallery.pick( function(e){
    	for(var i in e.files){
lfs=e.files;
    	console.log(e.files[i]);
    	}
    }, function ( e ) {
    	console.log( "取消选择图片" );
    },{filter:"image",multiple:true,selected:lfs,maximum:3,system:false});// 最多选择3张图片
}
</script>
</head>
<body >
已选择的图片路径列表
<br/>
<button onclick="gallerySelected()">设置已选中的图片</button>
</body>
</html>

（9）、system: (Boolean 类型 )是否使用系统相册文件选择界面。设置为true时，如果系统自带相册选择控件时则优先使用，否则使用5+统一相册选择控件；设置为false则不使用系统自带相册选择控件，直接使用5+统一相册选择界面。
默认值为true。

平台支持：Android - 2.3+ (不支持): Android4.0以上系统支持自带相册选择控件。

iOS - 5.1+ (不支持): 不支持系统自带相册选择控件，忽略此参数。

2.2、GalleryFilter: 相册选择文件过滤类型

属性：

"image": (String 类型 )仅可选择图片文件

"video": (String 类型 )仅可选择视频文件

"none": (String 类型 )不过滤，可选择图片或视频文件

2.3、PopPosition: JSON对象，弹出拍照或摄像界面指示位置

属性：

（1）、top: (String 类型 )指示区域距离容器顶部的距离，弹出拍照或摄像窗口指示区域距离容器顶部的距离，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值值。

（2）、left: (String 类型 )指示区域距离容器左侧的距离，弹出拍照或摄像窗口指示区域距离容器左侧的距离，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。

（3）、width: (String 类型 )指示区域的宽度，弹出拍照或摄像窗口指示区域的宽度，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。

（4）、height: (String 类型 )指示区域的高度，弹出拍照或摄像窗口指示区域的高度，单位支持像素值（如"100px"）和百分比（如"50%"），如不写单位则为像素值。

3、回调方法

3.1、GalleryPickSuccessCallback: 单选系统相册图片成功的回调

void onSuccess( file ) {

// Success code

}

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

参数：file: ( String ) 必选
选择的图片或视频文件路径

返回值：void : 无

示例：

<!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 galleryImg() {
// 从相册中选择图片
console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){
    	console.log(path);
    }, function ( e ) {
    	console.log( "取消选择图片" );
    }, {filter:"image"} );
}
</script>
</head>
<body >
从相册中选择单张图片
<br/>
<button onclick="galleryImg()">选择图片</button>
</body>
</html>

3.2、GalleryMultiplePickSuccessCallback: 多选系统相册图片成功的回调

void onSuccess( event ) {

// Pick success

var files = event.files; // 保存多选的图片或视频文件路径

}

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

参数：event: ( Event ) 必选 多选系统相册返回数据，Event对象包含以下属性： files - 字符串数组，保存多选的图片或视频文件路径。

返回值：void : 无

示例：

<!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 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="galleryImgs()">选择图片</button>
</body>
</html>

3.3、GallerySuccessCallback: 操作系统相册成功的回调

void onSuccess() {

// Success code

}

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

返回值：void : 无

3.4、GalleryErrorCallback: 系统相册操作失败的回调

void onError( error ) {

// Handle error

var code = error.code; // 错误编码

var message = error.message; // 错误描述信息

}

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

参数：error: ( Exception ) 必选 相册操作失败的错误信息，可通过error.code（Number类型）获取错误编码； 可通过error.message（String类型）获取错误描述信息。

返回值：void : 无

时间： 2024-08-08 10:29:46

HTML5+规范：gallery(管理系统相册)的相关文章

HTML5 Plus 拍照或者相册选择图片上传

利用HTML Plus的Camera.GalleryIO.Storage和Uploader来实现手机APP拍照或者从相册选择图片上传.Camera模块管理设备的摄像头,可用于拍照.摄像操作,通过plus.camera获取摄像头管理对象.Gallery模块管理系统相册,支持从相册中选择图片或视频文件.保存图片或视频文件到相册等功能.通过plus.gallery获取相册管理对象.IO模块管理本地文件系统,用于对文件系统的目录浏览.文件的读取.文件的写入等操作.通过plus.io可获取文件系统管理对象

HTML5 开发APP(打开相册以及图片上传)

我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是点击按钮就上传图片,然后获取到图片在服务器上的路径. 首先我们要打开相册,使用gallery模块管理系统相册来打开相册 mui('#shangchuan')[0].addEventListener('tap',function(){ chooseImg(); }) function chooseIm

HTML5规范中的MessageEvent以及SSE

1.MessageEvent接口 在HTML5规范中定义的新的通信方式,无论是WebSocket还是SSE,包括实现视频.音频通信的WebRTC,都是基于HTML5规范中定义的一个接口:MessageEvent.这是一个基于消息的事件.首先我们可以看一下在JavaScript中,传统的事件类型有哪些. 传统的DOM事件的基类主要包括: (1)UIEvents:一般化的UI事件,其中鼠标事件和键盘事件都继承自UI事件: (2)MouseEvents:一般化的鼠标事件,比如click事件.mouse

可参考的HTML5规范

HTML5规范 1. 代码风格 1.1 缩进与换行 [建议]使用4个空格作为一个缩进层级. [建议]模板代码的缩进优先保证 HTML 代码的缩进规则. 1.2 命名规则 [强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的内容或功能,不得以html内置样式进行命名,命名应该具有明确的语义. [强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义. 1.3 标签 [强制]Html中的标签名必须使用小写字母. [强制]标签的闭合要符合html5的规定. [强制

HTML5规范-相关资料链接(大多都是英文文档)

网站做的更规范,尽量选择正确的HTML5结构元素.地址:http://html5doctor.com/happy-1st-birthday-us/#flowchat 了解算法和分块      知道文档刚要看上去是什么样子,不仅可以帮助你确定使用哪个标题层级,而且还可以帮助确定使用哪个结构性元素.比如section应该有一个自身标题.查文档纲要,可以显示出你是否忘记了包含一个标题,他可能提醒你重新考虑这个元素是否最适合于你的内容.此外,准备的反映内容层级的文档纲要,有助于辅助设备的用户在你的站点上

Mozilla对HTML5规范支持列表

翻译自Mozilla Developer Network 在2009年10月28日,HTML 5规范草稿在网络超文本应用技术工作组(WHATWG)中基本出于最后定稿阶段,这意味着HTML 5标准基本定型了.这里列出来一些已经在Mozilla的Gecko中支持的HTML 5特性. HTML5简介 HTML5简介 这篇文章介绍了如何在您的网页设计和应用中使用HTML5. HTML5元素 使用Audio和Video元素(Firefox 3.5) Firefox 3.5中添加了对HTML5中Audio和

HTML5规范

HTML5和Canvas 2D规范的制定已经完成,尽管还不能算是W3C标准,但是这些规范已经功能完整,企业和开发人员有了一个稳定的执行和规划目标. W3C首席执行官Jeff Jaffe表示:“从今天起,企业用户可以清楚地知道,他们能够在未来依赖HTML5.”HTML5是开放Web标准的基石,它是一个完整的编程环境,适 用于跨平台应用程序.视频和动画.图形.风格.排版和其它数字内容发布工具.广泛的网络功能等等. 为了减少浏览器碎片.实现于所有HTML工具的应用,W3C从今天开始着手W3C标准化的互

HTML5规范的本地存储

在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorage){ //浏览器支持localStorage } if(window.sessionStorage){ //浏览器支持sessionStorage } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上. 是基于域的,在该域的任何网页都可以访问,在不同设备上存储的是不同

HTML5+规范：Geolocation(管理设备位置信息)

Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度.纬度等.通过plus.geolocation可获取设备位置管理对象.虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息. 1.方法 1.1.getCurrentPosition: 获取当前设备位置信息 void plus.geolocation.getCurrentPosition( successCB, errorCB, option ); 说明:位