全部產品
Search
文件中心

SuperApp:相機

更新時間:Jan 18, 2025

本文介紹相機類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填寫給imgsrc屬性,用於進行照片的預覽。

    重要

    該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填寫給imgsrc屬性,用於進行照片的預覽。

      重要

      該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填寫給imgsrc 屬性,用於進行照片的預覽。

    重要

    該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));
});