欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-09-21 18:38:45
Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。 1、方法 1.1、pick: 从...

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”。

示例：

 


<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>从相册中选择图片



 


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+ (支持)


示例：


 



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

 


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”。


 



<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>从相册中选择图片


 


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


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


 



<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>最多选择的图片数量


 


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


 



<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>从相册中选择多张图片


 


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


 



<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>超过最多选择图片数量事件

 


（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 (支持)


 



<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>已选择的图片路径列表


 


（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 : 无


示例：


 



<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>从相册中选择单张图片


 


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


void onSuccess( event ) {


// Pick success


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


}


 


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


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


返回值：void : 无


示例：


 



<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>从相册中选择多张图片


 


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 : 无


 
					

																				

						

							上一篇：							
								调侃网民的冷笑话							
						

						

							下一篇：							
								牙洞的回音							
						

					

															

						

							推荐阅读