本文介紹相機類WVCamera相關的JSAPI,供您建立H5端應用或者小程式時參考。相機類WVCamera的JSAPI提供相機相關能力,例如拍照、上傳照片、多圖模式等。
WVCamera.takePhoto
使用者自選調用相機拍照或者直接從相簿選擇照片,得到照片後可以在小程式側實現上傳照片的功能。
在iOS 11中,要求用戶端添加一個新的許可權描述NSPhotoLibraryAddUsageDescription,才允許訪問相簿。
範例程式碼如下所示:
var photoLocalPath; // 儲存本地檔案的路徑。
var params = {
mode: 'both',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
var uploadParams = {
// 需要上傳的照片的路徑
path: e.localPath
};
// 自行實現將formData傳給後端服務進行檔案儲存
...
...
}, function(e) {
alert('takePhoto failure: ' + JSON.stringify(e));
});
輸入參數
[
string] mode:可選,拍照或從相簿選擇,'camera'表示直接拍照,'photo'表示直接從相簿選擇,預設'both'。[
boolean] compatible: 可選,present 小程式後調用相關操作需要設定為true。
回調參數
回調參數將會在回調方法中傳遞,如果成功擷取照片,則進入success回調;如果失敗或被使用者取消,則進入failure 回調。
成功回調參數:
[
string] url:訪問URL,頁面將此URL填寫給img的src屬性,用於進行照片的預覽。重要該URL非真實的CDN URL,瀏覽器無法訪問。
[
string] localPath:照片的本地檔案路徑,該路徑可以用於後續的WVCamera.confirmUploadPhoto 上傳過程。[
string] identifier:照片標識,當使用Mtop上傳照片(v = '2.0')時,會將輸入參數中的identifier返回。[
string] base64Data:照片的Base64資料,僅當設定了needBase64 = true時才有效,實際使用時請注意自行添加data:image/png;base64,首碼(VER.WindVane 8.0.0 或更高)。
失敗回調參數:
[
string] errorType:錯誤類型。[
string] errorCode:錯誤碼。[
string] errorMsg:錯誤訊息。[
string] identifier:照片標識,當使用Mtop上傳照片(v = '2.0')時,會將輸入參數中的identifier返回。
如果使用者手動取消了拍照,會進入失敗回調,iOS的參數是 {ret:'HY_RET_PHOTO_CANCLE'},Android的參數是 {ret:'HY_FAILED'},沒有其它參數。如果沒有訪問相機/相簿的許可權,同樣會進入失敗回調,並且參數都會包含 {msg:'NO_PERMISSION'}。
監聽事件
WVPhoto.Event.takePhotoSuccess
擷取照片成功,即將上傳,此時JS可以在頁面上對照片進行預覽。
事件參數:
[
string] url:訪問URL,頁面將此URL填寫給img的src屬性,用於進行頁面的預覽。重要該URL非真實的CDN URL,瀏覽器無法訪問。
[
string] localPath:本地檔案路徑,該路徑可以用於後續的上傳過程。
多圖選擇模式
僅限WindVane iOS
允許同時選擇多張照片上傳,僅限WindVane iOS,而且只有從相簿選擇照片時才能夠選擇多張,直接拍照時仍會使用上面的單張拍攝模式,因此建議傳入參數 mode: 'photo' 以直接進入相簿。
輸入參數
[
string] mutipleSelection:可選,是否使用多圖選擇模式,'1'表示使用多圖選擇模式,'0'表示不使用多圖選擇模式,預設為'0'。[
int] maxSelect:可選,多圖選擇模式下最多選擇的照片數,預設為9。
回調參數
回調參數將會在回調方法中傳遞,如果成功擷取,則進入success回調;如果失敗或被使用者取消,則進入failure回調。
成功回調參數:
[
array] images:使用者選擇的照片數組,每一項包含以下屬性:[
string] url:訪問URL,頁面將此URL填寫給img的src屬性,用於進行照片的預覽。重要該URL非真實的CDN URL,瀏覽器無法訪問。
[
string] localPath:照片的本地檔案路徑,該路徑可以用於後續的WVCamera.confirmUploadPhoto上傳過程。
失敗回調參數:
[
string] errorType:錯誤類型。[
string] errorCode:錯誤碼。[
string] errorMsg:錯誤訊息。[
string] identifier:照片標識,當使用Mtop上傳照片(v = '2.0')時,會將輸入參數中的identifier返回。
如果使用者手動取消了拍照,會進入失敗回調,iOS的參數是 {ret:'HY_RET_PHOTO_CANCLE'},Android的參數是 {ret:'HY_FAILED'},沒有其它參數。如果沒有訪問相機/相簿的許可權,同樣會進入失敗回調,並且參數都會包含 {msg:'NO_PERMISSION'}。
監聽事件
WVPhoto.Event.takePhotoSuccess擷取照片成功,即將上傳,此時JS可以在頁面上對照片進行預覽。
事件參數:
[
string] url:訪問URL,頁面將此URL填寫給img的src屬性,用於進行頁面的預覽。重要該URL非真實的CDN URL,瀏覽器無法訪問。
[
string] localPath:本地檔案路徑,該路徑可以用於後續的上傳過程(僅限 WindVane Android)。
下列兩個事件僅當拍照完直接上傳才會觸發:
WVPhoto.Event.uploadPhotoSuccess上傳照片成功,每上傳一張照片成功都會觸發此事件。
事件參數:
[
string] url:訪問URL,頁面將此URL填寫給img的src屬性,用於進行照片的預覽。重要該URL非真實的CDN URL,瀏覽器無法訪問。
[
string] localPath:照片的本地檔案路徑,該路徑可以用於後續擷取檔案資料並上傳。[
string] identifier:照片標識,當使用Mtop上傳照片(v = '2.0')時,會將輸入參數中的identifier返回。
WVPhoto.Event.uploadPhotoFailed
上傳照片失敗,每上傳一張照片失敗都會觸發此事件。
事件參數:
[
string] errorType:錯誤類型。[
string] errorCode:錯誤碼。[
string] errorMsg:錯誤訊息。[
string] identifier: 照片標識,當使用Mtop上傳照片(v = '2.0')時,會將輸入參數中的identifier返回。
document.addEventListener('WVPhoto.Event.uploadPhotoSuccess', function (e) {
alert('event uploadPhotoSuccess: ' + JSON.stringify(e.param));
});
document.addEventListener('WVPhoto.Event.uploadPhotoFailed', function (e) {
alert('event uploadPhotoFailed: ' + JSON.stringify(e.param));
});
var params = {
// 得到照片後是否自動上傳
type: '1',
// 是否只允許拍照或從相簿選擇
mode: 'photo',
// 上傳方式
v: '2.0',
// 是否使用多圖選擇模式
mutipleSelection: '1',
// 多圖選擇模式下最多選擇的照片數
maxSelect: 6
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
alert('takePhoto success: ' + JSON.stringify(e));
}, function(e) {
alert('takePhoto failure: ' + JSON.stringify(e));
});