Camera-Enterprise Mobile Application Studio(EMAS)-阿里云帮助中心

This topic describes the JavaScript APIs (JSAPIs) for the WVCamera class. These APIs provide camera features, such as taking photos, uploading photos, and a multi-image mode for H5 applications and Mini Programs that you create with cross-platform DevOps.

WVCamera.takePhoto

This method allows users to take a photo with the camera or select one from their photo album. After a photo is selected, you can specify whether to upload it automatically. The native client must implement the upload protocol.

Important

In iOS 11, the client must add the NSPhotoLibraryAddUsageDescription permission description to access the photo album.

The following code provides an example:

var photoLocalPath; // Stores the local file path.
var params = {
        type: '0',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
        var uploadParams = {
                // The path of the photo to upload.
                path: e.localPath
        };
        setTimeout(function() {
                window.WindVane.call('WVCamera', 'confirmUploadPhoto', uploadParams, function(e) {
                        alert('upload success: ' + JSON.stringify(e));
                }, function(e) {
                        alert('upload failure: ' + JSON.stringify(e));
                });
        }, 20);
}, function(e) {
        alert('takePhoto failure: ' + JSON.stringify(e));
});

Input parameters

[string] mode: Optional. Specifies whether to take a photo or select a photo from an album. The value 'camera' opens the camera. The value 'photo' opens the photo album.

Callback parameters

Parameters are passed to the triggered callback method. The success callback is triggered if a photo is obtained. The failure callback is triggered if the operation fails or is canceled by the user.

Success callback parameters:

[string] url: The access URL. You can set this URL as the src property of an img tag to preview the photo.
Important
This URL is not an actual CDN URL and cannot be accessed by a browser.
[string] localPath: The local file path of the photo. This path can be used in the subsequent WVCamera.confirmUploadPhoto upload process.
[string] resourceURL: The CDN address that is returned after the photo is uploaded to Taobao File System (TFS). This address is accessible in a browser. This property is returned only if the photo is successfully uploaded to the CDN.
[string] identifier: The photo identity. When you use Mtop to upload photos (v = '2.0'), the identifier from the input parameters is returned.
[string] base64Data: The Base64 data of the photo. This parameter is valid only if needBase64 = true is set. When you use this parameter, you must add the data:image/png;base64, prefix. This parameter is supported in WindVane VER. 8.0.0 and later.

Failure callback parameters:

[string] errorType: The error type.
[string] errorCode: The error code.
[string] errorMsg: The error message.
[string] identifier: The photo identity. When you use Mtop to upload photos (v = '2.0'), the identifier from the input parameters is returned.

Note

If the user cancels the operation, the failure callback is triggered. The parameter is {ret:'HY_RET_PHOTO_CANCLE'} for iOS and {ret:'HY_FAILED'} for Android. No other parameters are returned. If the application does not have permission to access the camera or photo album, the failure callback is also triggered, and the parameters include {msg:'NO_PERMISSION'}.

Listener events

WVPhoto.Event.takePhotoSuccess

This event is triggered when a photo is successfully obtained and is about to be uploaded. At this point, JavaScript can preview the photo on the page.

Event parameters:

[string] url: The access URL. You can set this URL as the src property of an img tag to preview the page.
Important
This URL is not an actual CDN URL and cannot be accessed by a browser.
[string] localPath: The local file path. This path can be used for the subsequent upload process.

Multi-image selection mode

Note

This feature is available only in WindVane for iOS.

This mode lets you select and upload multiple photos at once. This feature is available only in WindVane for iOS and only when you select photos from an album. The single-photo mode is used when you take a photo with the camera. Therefore, you must pass the mode: 'photo' parameter to open the photo album directly.

Input parameters

[string] mutipleSelection: Optional. Specifies whether to use the multi-image selection mode. Set this parameter to '1' to use this mode. Set this parameter to '0' to not use this mode. The default value is '0'.
[int] maxSelect: Optional. The maximum number of photos that can be selected in multi-image selection mode. The default value is 9.

Callback parameters

The callback method receives callback parameters. The success callback is triggered when a photo is obtained. The failure callback is triggered if the operation fails or if the user cancels it.

Success callback parameters:

[array] images: An array of photos selected by the user. Each item contains the following properties:
- [string] url: The access URL. You can set this URL as the src property of an img tag to preview the photo.
  Important
  This URL is not an actual CDN URL and cannot be accessed by a browser.
- [string] localPath: The local file path of the photo. This path can be used in the subsequent WVCamera.confirmUploadPhoto upload process.

Failure callback parameters:

[string] errorType: The error type.
[string] errorCode: The error code.
[string] errorMsg: The error message.
[string] identifier: The photo identity. When you use Mtop to upload photos (v = '2.0'), the identifier from the input parameters is returned.

Important

Listener events

WVPhoto.Event.takePhotoSuccess: This event is triggered when a photo is successfully obtained and is about to be uploaded. At this point, JavaScript can preview the photo on the page.

Event parameters:

[string] url: The access URL. You can set this URL as the src property of an img tag to preview the page.
Important
This URL is not an actual CDN URL and cannot be accessed by a browser.
[string] localPath: The local file path. This path can be used for the subsequent upload process. This parameter is for WindVane for Android only.

The following two events are triggered only when a photo is uploaded immediately after it is taken:

WVPhoto.Event.uploadPhotoSuccess: This event is triggered for each photo that is successfully uploaded.

Event parameters:

[string] url: The access URL. You can set this URL as the src property of an img tag to preview the photo.
Important
This URL is not an actual CDN URL and cannot be accessed by a browser.
[string] localPath: The local file path of the photo. This path can be used in the subsequent WVCamera.confirmUploadPhoto upload process.
[string] resourceURL: The CDN address that is returned after the photo is uploaded to TFS. This address is accessible in a browser. This property is returned only if the photo is successfully uploaded to the CDN.
[string] identifier: The photo identity. When you use Mtop to upload photos (v = '2.0'), the identifier from the input parameters is returned.

WVPhoto.Event.uploadPhotoFailed

This event is triggered for each photo that fails to upload.

Event parameters:

[string] errorType: The error type.
[string] errorCode: The error code.
[string] errorMsg: The error message.
[string] identifier: The photo identity. When you use Mtop to upload photos (v = '2.0'), the identifier from the input parameters is returned.

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 it is taken.
        type: '1',
        // Specifies whether to only allow taking a photo or selecting from an album.
        mode: 'photo',
        // The upload method.
        v: '2.0',
        // The business code.
        bizCode: 'mtopupload',
        // Specifies whether to use the multi-image selection mode.
        mutipleSelection: '1',
        // The maximum number of photos to select in multi-image 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));
});

WVCamera.confirmUploadPhoto

Confirm the upload.

Input parameters

[string]path: The path of the photo to upload. This must be the value of the localPath field that is returned by the takePhoto method.
[string]v: The upload method. You must always pass '2.0' to use Mtop for uploads. This requires you to set the bizCode property, for example, 'mtopupload'. Note: Do not abbreviate v: '2.0' to v: '2'. Other upload methods are deprecated.
[string]bizCode: The business code. You can use this parameter to identify your business.
[string]identifier: Optional. The photo identity. You can use this parameter to identify each photo upload. This parameter is valid only when you use Mtop to upload photos (v = '2.0').

Important

The v, bizCode, and identifier parameters are supported only in WindVane for Android VER. 6.0.0 or later.
Before you upload files, you must request a bizCode from the Media Center to identify your business and manage your images. You can use the generic bizCode mtopupload for testing. To request a bizCode, contact your solution architect (SA). To use the v='2.0' upload method, you must also provide the business description, image size, image format, expected daily upload volume, and the requested bizCode to your SA to configure the image upload channel.

Warning

You must use the v: '2.0' upload method. Other methods are deprecated because of HTTPS upgrades and security concerns.

Callback parameters

The success callback is triggered when a photo is obtained. The failure callback is triggered if the operation fails or is canceled by the user. Parameters are passed to the triggered callback method.

Success callback parameters:

[string] localPath: The local file path of the photo.
[string] resourceURL: The CDN address that is returned after the photo is uploaded to TFS. This address is accessible in a browser.

var params = {
        // The path of the photo to upload.
        path: photoLocalPath,
        // The upload method.
        v: '2.0',
        // The business code.
        bizCode: 'mtopupload'
};
window.WindVane.call('WVCamera', 'confirmUploadPhoto', params, function(e) {
        alert('success: ' + JSON.stringify(e));
}, function(e) {
        alert('failure: ' + JSON.stringify(e));
});