当前位置: 首页 > 工具软件 > Gallery > 使用案例 >

html5+ gallery-系统相册

南宫奇思
2023-12-01

gallery-系统相册

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

方法:

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

对象:

回调方法:

权限:

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>

 类似资料: