html5+ gallery-系统相册

南宫奇思

2023-12-01

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" onclick="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" onclick="cleanList()">清空列表</div>
			<br/>-->
		</div>
		<div id="output">
			Gallery模块管理系统相册，如从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。
		</div>
	</body>

</html>

html5+ gallery-系统相册

gallery-系统相册

方法：

对象：

回调方法：

权限：

GalleryOptions

属性：

GalleryFilter

属性：

PopPosition

属性：

GalleryPickSuccessCallback

说明：

参数：

返回值：

GalleryMultiplePickSuccessCallback

说明：

参数：

返回值：

GallerySuccessCallback

说明：

参数：

返回值：

GalleryErrorCallback

说明：

参数：

返回值：

相关阅读

相关文章

相关问答

相关文档