Camera - SuperApp - Alibaba Cloud Documentation Center

This topic describes the JavaScript APIs of WVCamera. You can refer to this topic when you create HTML5 apps or MiniApps. You can use the JavaScript APIs of WVCamera to take a photo, upload a photo, and upload multiple photos at the same time.

WVCamera.takePhoto

Allows you to call the camera to take a photo or directly select a photo from the album. After you obtain the photo, after obtaining the photo, the function of uploading the photo can be realized on the mini program side.

Important

In iOS 11, you need to add the "NSPhotoLibraryAddUsageDescription" key to the Info.plist. This key lets you describe the reason why the app is requesting access to the user's album.

Sample code:

var photoLocalPath; // The path to save the local file. 
var params = {
        mode: 'both',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
      var uploadParams = {
            // The path in which the photo you want to upload is saved.
            path: e.localPath
      };
      // Implement the transmission of file to the backend service for file storage.
      ...
      ...
}, function(e) {
        alert('takePhoto failure: ' + JSON.stringify(e));
});

Input parameters

[string]mode: optional. 'camera' indicates that you take a photo, 'photo' indicates that you choose a photo from an album, default is 'both'.
[boolean]compatible: optional, need to set true after presented the miniapp.

Callback parameters

Callback parameters are passed by using the callback method. If a photo is obtained, the success callback is invoked. If a photo fails to be obtained or the operation of taking a photo is canceled, the failure callback is invoked.

Parameters for a success callback:

[string]url: the access URL. The URL is specified in the src property of the <img> element. The URL is used to preview a photo.
Important
This URL is not an actual content delivery network (CDN) URL and cannot be accessed from a browser.
[string]localPath: the local path of the photo. This path can be used to upload photos.
[string]identifier: the identifier of the photo. If you use Mtop to upload the photo, the value of the identifier parameter in the input parameters is returned. You can set the v parameter to '2.0' and then use Mtop to upload a photo.
[string]base64Data: the Base64 data of the photo. This parameter is valid only when the needBase64 parameter is set to true. When you use the base64Data parameter, add the prefix data:image/png;base64, to the value of the parameter.

Parameters for a failure callback:

[string]errorType: the error type.
[string]errorCode: the error code.
[string]errorMsg: the error message.
[string]identifier: the identifier of the photo. If you use Mtop to upload the photo, the value of the identifier parameter in the input parameters is returned. You can set the v parameter to '2.0' and then use Mtop to upload a photo.

Note

If you cancel the operation of taking a photo, the failure callback is invoked. In iOS, {ret:'HY_RET_PHOTO_CANCLE'} is the only callback parameter. In Android, {ret:'HY_FAILED'} is the only callback parameter. If the client does not have permissions to access the camera or album, the failure callback is also invoked. In this case, {msg:'NO_PERMISSION'} is included in the callback parameters of iOS and Android.

Event listening

WVPhoto.Event.takePhotoSuccess

The WVPhoto.Event.takePhotoSuccess event is triggered when a photo is obtained and is to be uploaded. In this case, JavaScript allows you to preview the photo on the page.

Event parameters:

[string]url: the access URL. The URL is specified in the src property of the <img> element. The URL is used to preview a photo.
Important
This URL is not an actual content delivery network (CDN) URL and cannot be accessed from a browser.
[string]localPath: the local path of the photo. This path can be used in the subsequent upload process.

Multi-image selection mode

Note

This feature is supported only in WindVane iOS.

You can select multiple photos from the album to upload the photos at the same time. This feature is supported only in WindVane iOS. You can select only one photo if you take photos. We recommend that you configure mode: 'photo' to directly access the album.

Input parameters

[string]mutipleSelection: (optional) specifies whether to use the multi-image selection mode. If you set this parameter to '1', the multi-image selection mode is used. If you set this parameter to '0'. the multi-image selection mode is not used. Default value: '0'.
[int]maxSelect: (optional) the maximum number of photos that can be selected in multi-image selection mode. Default value: 9.

Callback parameters

Parameters for a success callback:

[array]images: the array of photos that you selected. Each item in the array contains the following properties:
- [string]url: the access URL. The URL is specified in the src property of the <img> element. The URL is used to preview a photo.
  Important
  This URL is not an actual content delivery network (CDN) URL and cannot be accessed from a browser.
- [string]localPath: the local path of the photo. This path can be used when you call WVCamera.confirmUploadPhoto to upload photos.

Parameters for a failure callback:

[string]errorType: the error type.
[string]errorCode: the error code.
[string]errorMsg: the error message.
[string]identifier: the identifier of the photo. If you use Mtop to upload the photo, the value of the input parameter identifier is returned. You can set the v parameter to '2.0' and then use Mtop to upload a photo.

Important

Event listening

The WVPhoto.Event.takePhotoSuccess event is triggered when a photo is obtained and is to be uploaded. In this case, JavaScript allows you to preview the photo on the page.

Event parameters:

[string]url: the access URL. The URL is specified in the src property of the <img> element. The URL is used to preview a photo.
Important
This URL is not an actual content delivery network (CDN) URL and cannot be accessed from a browser.
[string]localPath: the local path of the photo. This path can be used in the subsequent upload process and is used only in WindVane Android.

The following events are triggered only when a photo is directly uploaded after the photo is taken:

WVPhoto.Event.uploadPhotoSuccess: The event indicates that the photo is uploaded. This event is triggered each time a photo is uploaded.

Event parameters:

[string]url: the access URL. The URL is specified in the src property of the <img> element. The URL is used to preview a photo.
Important
This URL is not an actual content delivery network (CDN) URL and cannot be accessed from a browser.
[string]localPath: the local path of the photo. This path can be used when you call WVCamera.confirmUploadPhoto to upload photos.
[string]identifier: the identifier of the photo. If you use Mtop to upload the photo, the value of the input parameter identifier is returned. You can set the v parameter to '2.0' and then use Mtop to upload a photo.

WVPhoto.Event.uploadPhotoFailed

The event indicates that the photo fails to be uploaded. This event is triggered each time a photo fails to be uploaded.

Event parameters:

[string]errorType: the error type.
[string]errorCode: the error code.
[string]errorMsg: the error message.
[string]identifier: the identifier of the photo. If you use Mtop to upload the photo, the value of the input parameter identifier is returned. You can set the v parameter to '2.0' and then use Mtop to upload a photo.

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 = {
        // Specifies whether to automatically upload the photo after the photo is obtained.
        type: '1',
        // Specifies whether to allow you to only take photos or select photos from the album.
        mode: 'photo',
        // The upload method.
        v: '2.0',
        // Specifies whether to use the multi-image selection mode.
        mutipleSelection: '1',
        // The maximum number of photos that can be selected in the multi-image selection mode.
        maxSelect: 6
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
        alert('takePhoto success: ' + JSON.stringify(e));
}, function(e) {
        alert('takePhoto failure: ' + JSON.stringify(e));
});