HTML5+規範：gallery(管理系統相冊)

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

示例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
從相冊中選擇圖片  
<br/>  
<button onclick="galleryImg()">選擇單張圖片</button>  
<br/>  
<button onclick="galleryImgs()">選擇多張圖片</button>  
</body>  
</html>

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

示例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
<input type="button" value="Save picture to Gallery" onclick="savePicture();" ></input>  
</body>  
</html>

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
從相冊中選擇圖片  
<br/>  
<button onclick="galleryImg()">選擇圖片</button>  
</body>  
</html>

（4）、maximum: (Number 類型 )最多選擇的圖片數量。僅在支持多選時有效，取值範圍爲1到Infinity，默認值爲Infinity，即不限制選擇的圖片數。如果設置的值非法則使用默認值Infinity。

平臺支持：Android - ALL (支持): 系統相冊文件選擇界面不支持設置選擇的圖片數量，爲了確保此功能可正常使用，應該設置system屬性值爲false強制使用5+統一相冊選擇界面。iOS - ALL (支持)

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
最多選擇的圖片數量  
<br/>  
<button onclick="galleryMaximum()">設置選擇的圖片數量</button>  
</body>  
</html>

（5）、multiple: (Boolean 類型 )是否支持多選圖片。可從系統相冊中選擇多張圖片，選擇圖片後通過GalleryMultiplePickSuccessCallback回調返回選擇的圖片。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
從相冊中選擇多張圖片  
<br/>  
<button onclick="galleryImgs()">選擇圖片</button>  
</body>  
</html>

（6）、onmaxed: (Function 類型 )超過最多選擇圖片數量事件。使用相冊多選圖片時，可通過maximum屬性設置最多選擇的圖片數量，當用戶操作選擇的數量大於此時觸發此事件。平臺支持：Android - ALL (支持):系統相冊文件選擇界面不支持設置選擇的圖片數量，只有當用戶選擇的圖片數量超過最多圖片數是觸發，爲了確保此功能可正常使用，應該設置system屬性值爲false強制使用5+統一相冊選擇界面。注意：此時顯示的相冊文件選擇界面，需要使用plus.nativeUI.*彈出提示框，否則可能無法正常顯示。iOS - ALL (支持)

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
超過最多選擇圖片數量事件  
<br/>  
<button onclick="galleryOnmaxed()">選擇圖片超數事件</button>  
</body>  
</html>

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

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
已選擇的圖片路徑列表  
<br/>  
<button onclick="gallerySelected()">設置已選中的圖片</button>  
</body>  
</html>

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

示例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
從相冊中選擇單張圖片  
<br/>  
<button onclick="galleryImg()">選擇圖片</button>  
</body>  
</html>

3.2、GalleryMultiplePickSuccessCallback: 多選系統相冊圖片成功的回調

void onSuccess( event ) {

// Pick success

var files = event.files; // 保存多選的圖片或視頻文件路徑

}

說明：系統相冊中多選圖片或視頻文件成功的回調函數，在多選擇文件操作成功時調用。

參數：event: ( Event ) 必選多選系統相冊返回數據，Event對象包含以下屬性： files - 字符串數組，保存多選的圖片或視頻文件路徑。

返回值：void : 無

示例：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>Gallery Example</title>  
<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>  
</head>  
<body >  
從相冊中選擇多張圖片  
<br/>  
<button onclick="galleryImgs()">選擇圖片</button>  
</body>  
</html>

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

小河流水人家z

發佈了44 篇原創文章 · 獲贊 11 · 訪問量 49萬+

私信關注

HTML5+規範：gallery(管理系統相冊)

SQL優化-20231016

js判斷第一次打開頁面

Android 動態更換圖標

Android 屬性動畫解析

HTML5 Plus 拍照或者相冊選擇圖片上傳

js工具方法

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

linux以太網驅動總結