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

說明：

參數：

返回值：

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

判斷瀏覽器是否支持webrtc

hml5+ Android創建快捷方式

navicat導入.sql文件出錯2006- MySQLserver has gone away

vue根據文件夾自動生成路由匹配路徑

匹配磁力鏈接的正則表達式 js

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結