gallery-系统相册

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

方法：

pick: 从系统相册选择文件（图片或视频）
save: 保存文件到系统相册中

对象：

GalleryOptions: JSON对象，从相册中选择文件的参数
GalleryFilter: 相册选择文件过滤类型
PopPosition: JSON对象，弹出拍照或摄像界面指示位置

回调方法：

GalleryPickSuccessCallback: 单选系统相册图片成功的回调
GalleryMultiplePickSuccessCallback: 多选系统相册图片成功的回调
GallerySuccessCallback: 操作系统相册成功的回调
GalleryErrorCallback: 系统相册操作失败的回调

权限：

5+功能模块（permissions）

{
// ...
"permissions":{
	// ...
	"Gallery": {
		"description": "系统相册"
	}
}
}

GalleryOptions

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

属性：

animation: _(Boolean 类型 )_是否显示系统相册文件选择界面的动画

是否显示系统相册文件选择界面的动画，可取值true、false，默认值为true。
filename: _(String 类型 )_选择文件保存的路径

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

系统相册选择器中可选择的文件类型，可设置为仅选择图片文件（“image”）、视频文件（“video”）或所有文件（“none”），默认值为“image”。
maximum: _(Number 类型 )_最多选择的图片数量

仅在支持多选时有效，取值范围为1到Infinity，默认值为Infinity，即不限制选择的图片数。如果设置的值非法则使用默认值Infinity。
multiple: _(Boolean 类型 )_是否支持多选图片

可从系统相册中选择多张图片，选择图片后通过GalleryMultiplePickSuccessCallback回调返回选择的图片。
onmaxed: _(Function 类型 )_超过最多选择图片数量事件

使用相册多选图片时，可通过maximum属性设置最多选择的图片数量，当用户操作选择的数量大于此时触发此事件。
popover: _(PopPosition 类型 )_相册选择界面弹出指示区域

对于大屏幕设备如iPad，相册选择界面为弹出窗口，此时可通过此参数设置弹出窗口位置。其为JSON对象，格式如{top:“10px”,left:“10px”,width:“200px”,height:“200px”}，所有值为像素值，左上坐标相对于容器的位置，默认弹出位置为屏幕居中。
selected: _(Array[ String ] 类型 )_已选择的图片路径列表

仅在多图片选择时生效，相册选择界面将选中指定的图片路径列表。如果指定的路径无效，则忽略此项；如果指定的路径数超过maximum属性指定的最大选择数目则超出的图片不选中。
system: _(Boolean 类型 )_是否使用系统相册文件选择界面

设置为true时，如果系统自带相册选择控件时则优先使用，否则使用5+统一相册选择控件；设置为false则不使用系统自带相册选择控件，直接使用5+统一相册选择界面。默认值为true。

GalleryFilter

相册选择文件过滤类型

属性：

“image”: _(String 类型 )_仅可选择图片文件
“video”: _(String 类型 )_仅可选择视频文件
“none”: _(String 类型 )_不过滤，可选择图片或视频文件

PopPosition

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

属性：

top: _(String 类型 )_指示区域距离容器顶部的距离

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

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

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

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

GalleryPickSuccessCallback

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

void onSuccess( file ) {
	// Success code
}

说明：

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

参数：

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

返回值：

void : 无

GalleryMultiplePickSuccessCallback

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

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

说明：

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

参数：

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

返回值：

void : 无

GallerySuccessCallback

操作系统相册成功的回调

void onSuccess() {
	// Success code
}

说明：

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

参数：

无

返回值：

void : 无

GalleryErrorCallback

系统相册操作失败的回调

void onError( error ) {
	// Handle error
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}

说明：

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

参数：

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

返回值：

void : 无

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="HandheldFriendly" content="true" />
		<meta name="MobileOptimized" content="320" />
		<title>Hello H5+</title>

		<script type="text/javascript">
			function plusReady() {
				// 用户侧滑返回时关闭显示的图片
				plus.webview.currentWebview().addEventListener('popGesture', function (e) {
					if (e.type == 'start') {
						closeImg();
					}
				}, false);
			}
			document.addEventListener('plusready', plusReady, false);

			function getImage() {
				var cmr = plus.camera.getCamera();
				cmr.captureImage(function (path) {
					console.log('保存照片到系统相册：');
					plus.gallery.save(path, function () {
						outLine('保存成功');
					}, function (e) {
						console.log('保存失败: ' + JSON.stringify(e));
					});
				}, function (e) {
					console.log('取消拍照');
				}, {
					filename: '_doc/gallery/',
					index: 1
				});
			}

			function galleryImg() {
				// 从相册中选择图片
				console.log('从相册中选择图片：');
				plus.gallery.pick(function (path) {
					outLine(path);
					//showImg( path );
					//createItem(path);
				}, function (e) {
					console.log('取消选择图片');
				}, {
					filter: 'image'
				});
			}

			function galleryImgs() {
				// 从相册中选择图片
				console.log('从相册中选择多张图片：');
				plus.gallery.pick(function (e) {
					for (var i in e.files) {
						outLine(e.files[i]);
					}
				}, function (e) {
					console.log('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					system: false
				});
			}

			function galleryImgsMaximum() {
				// 从相册中选择图片
				console.log('从相册中选择多张图片(限定最多选择3张)：');
				plus.gallery.pick(function (e) {
					for (var i in e.files) {
						outLine(e.files[i]);
					}
				}, function (e) {
					console.log('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					maximum: 3,
					system: false,
					onmaxed: function () {
						plus.nativeUI.alert('最多只能选择3张图片');
					}
				}); // 最多选择3张图片
			}
			var lfs = null; // 保留上次选择图片列表
			function galleryImgsSelected() {
				// 从相册中选择图片
				console.log('从相册中选择多张图片(限定最多选择3张)：');
				plus.gallery.pick(function (e) {
					lfs = e.files;
					for (var i in e.files) {
						outLine(e.files[i]);
					}
				}, function (e) {
					console.log('取消选择图片');
				}, {
					filter: 'image',
					multiple: true,
					maximum: 3,
					selected: lfs,
					system: false,
					onmaxed: function () {
						plus.nativeUI.alert('最多只能选择3张图片');
					}
				}); // 最多选择3张图片
			}

			function showImg(url) {
				// 兼容以"file:"开头的情况
				if (0 != url.indexOf('file://')) {
					url = 'file://' + url;
				}
				var _body_ = document.body;
				var _div_ = document.createElement('div');
				_div_.style.top = '0px';
				_div_.style.left = '0px';
				_div_.style.height = '100%';
				_div_.style.width = '100%';
				_div_.style.zIndex = '99999';
				_div_.style.position = 'fixed';
				_div_.style.background = '#ffffff';
				_div_.id = 'imgShow';
				_div_.onclick = closeImg;
				var _img_ = document.createElement('img');
				_img_.src = url;
				_img_.style.width = '100%';
				_body_.appendChild(_div_);
				_div_.appendChild(_img_);
			}

			function closeImg() {
				var trnode = document.getElementById('imgShow');
				trnode && trnode.parentNode.removeChild(trnode);
			}

			var list = null,
				first = null;
			document.addEventListener('DOMContentLoaded', function () {
				list = document.getElementById('list');
				first = document.getElementById('empty');
			}, false);
			// 添加列表项
			function createItem(path) {
				var li = document.createElement('li');
				li.className = 'ditem';
				li.innerHTML = '<span class="iplay"><font class="aname"></font><br/><font class="ainf"></font></span>';
				li.setAttribute('onclick', 'displayMedia(this);');
				list.insertBefore(li, first.nextSibling);
				var i = path.lastIndexOf('/');
				if (i < 0) {
					i = path.lastIndexOf('\\');
				}
				li.querySelector('.aname').innerText = path.substr(i + 1);
				li.querySelector('.ainf').innerText = path;
				li.path = path;
				// 设置空项不可见
				first.style.display = 'none';
			}
			// 清除列表记录
			function cleanList() {
				list.innerHTML = '<li id="empty" class="ditem-empty">无记录</li>';
				empty = document.getElementById('empty');
				// 删除音频文件
				console.log('清空选择照片记录：');
			}
			// 返回后关闭图片显示
			var _back = window.back;
			window.back = function () {
				closeImg();
				_back();
			};

		</script>

		<style type="text/css">
			.aname {
				font-size: 16px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.ainf {
				font-size: 12px;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.iplay {
				display: block;
				background: no-repeat right center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAD9UlEQVR4nO2b3XETMRRGDwzvoYOkg5hRAVkqiKmAdIA7wHSQVECoALsC1gXciV0BTge4gvCwgnHk9d/+WF8m97ztxrlXs8fS1Urym6enJxwd3uZugPMcFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAx3uVuwDGY2XtgCBTAALjc8tEFMAdKYBJC+HOK9nXBm5dwUM7MCmAEXDcMMQVuQwhlV23qC2khZjYAboGrjkLOgFEIYd5RvM6RrSFmdgs80J0MYqyHGFsSuR4S60TJ9vrwCEziZ+YhhGXy/xdU9aWgqjfnW+IsgEKtvkgJiUPUPfUyZsD42DoQ68+Y+p62AG6UhjAZITt6xopq3L9vGf+Gqh6dJX+S6ilKNaRkU8YCGLSVARBjDGLMdS5jbgkkhMQiWyejSGtEG2KsghopKoU++5AV68ZDcrvXYWTH8Pghdz1R6CHpN3MFDPsc02PsYcy1qy0nJ6uQOANKZz+jfcOUmd3H6W1jYo5RcvsqtikbuXtI+kBmBxbwz8DczMZtksdcsz1tOinZhMRxPF2bGh8R4gz4amZLMxu2aEqa8zq2LQs5e0j6EB8bLv6dAz/NrGwyjMWcj3vadjJyCimS60nLeFfAbzO7bfANT3MXLdvSmJxCBsl12VHcL8AyvpkfSpo7bdvJyCkkfQfocv5/Bnw3s/mBs6Y097aFzd7JPcv6T5dv5GtcAr/2TZN7yt0IGSE908k0+RS8FiEvhhd1yKEFUw5YAVBApoe0XQrZwgL4GEIY7pLRU+5G5OwhC57PZgbAsqPYK6rdxUMXC9Npbro8fzJy9pB0qll0FPcOuDhCRl3ubEvwOYWUyXXb5YoZ1X7GqMHSfZq7bNmWxuQUki5XnDdc+n4EPoUQiiabSzFnejKl7TJOY7IJid/iaXJ7fESIFfCNas+9zQNMc05zHnjIPctKx/mrA9egflCJGLd5eDFXukGWdddQYU+95PlDWVE97GXPeS+oivf6saBZCKHoM+8+cvcQ2NyhOwMmfW4SxdgTNs9oZd0tBAEhsRDfJbcvgbIPKTtOnNzlPnECAkPWP8xsTv3ZrJ1v2UfmuKDqGRt5QgjZ9kDWyd5D1iioP1U4P3KzqZYYY5v0om38rpDpIeCHrUFMCPjPEeSE/COetf3SU/i7EEL2GVUdSjXkGfGBfWDzIFsb/q93dRizU2R7yDr+o09R/GfRzsmRrSGvFRcihgsRw4WI4ULEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMf4CVuqCm+17t3sAAAAASUVORK5CYII=);
				background-size: 50px 44px;
				-ms-touch-action: auto;
			}

		</style>
	</head>

	<body>
		<header id="header">
			<div class="nvbt iback" onclick="back()"></div>
			<div class="nvtt">Gallery</div>
			<div class="nvbt idoc" onclick="openDoc('Gallery Document','/doc/gallery.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<br />
			<div class="button" onclick="getImage()">拍照并保存到相册</div>
			<div class="button" onclick="galleryImg()">从相册中单选图片</div>
			<div class="button" onclick="galleryImgs()">从相册中多选图片</div>
			<div class="button" onclick="galleryImgsMaximum()">从相册中多选图片(最多三张)</div>
			<div class="button" onclick="galleryImgsSelected()">从相册中多选图片(保存勾选记录)</div>
			<br />
			<!-- Image list -->
			<!--<ul id="list" class="dlist" style="text-align:left;">
				<li id="empty" class="ditem-empty">无记录</li>
				<li class="ditem" οnclick="displayMedia(this);">
					<span class="iplay">
						<div class="aname">.BjMobileService_bmcc168.apk.png</div><br>
						<div class="ainf">file:///storage/sdcard0/QQBrowser/安装包/.BjMobileService_bmcc168.apk.png</div>
					</span>
				</li>
			</ul>
			<br/>
			<div class="button button-waring" οnclick="cleanList()">清空列表</div>
			<br/>-->
		</div>
		<div id="output">
			Gallery模块管理系统相册，如从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。
		</div>
	</body>

</html>

wlor

发布了33 篇原创文章 · 获赞 6 · 访问量 2万+

私信关注

html5+ gallery-系统相册

gallery-系统相册

方法：

对象：

回调方法：

权限：

GalleryOptions

属性：

GalleryFilter

属性：

PopPosition

属性：

GalleryPickSuccessCallback

说明：

参数：

返回值：

GalleryMultiplePickSuccessCallback

说明：

参数：

返回值：

GallerySuccessCallback

说明：

参数：

返回值：

GalleryErrorCallback

说明：

参数：

返回值：

猜你喜欢