相机类WVCamera相关的JSAPI有哪些_移动研发平台-阿里云帮助中心

本文介绍相机类WVCamera相关的JSAPI，供您在通过跨平台DevOps创建H5端应用或者小程序时参考。相机类WVCamera的JSAPI提供相机相关能力，例如拍照、上传照片、多图模式等。

WVCamera.takePhoto

用户自选调用相机拍照或者直接从相册选择照片，得到照片后可以指定是否自动上传照片。需要Native端上实现上传协议。

重要

在iOS 11中，要求客户端添加一个新的权限描述NSPhotoLibraryAddUsageDescription，才允许访问相册。

示例代码如下所示：

var photoLocalPath; // 保存本地文件的路径。
var params = {
        type: '0',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
        var uploadParams = {
                // 需要上传的照片的路径
                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));
});

输入参数

[string] mode：可选，拍照或从相册选择，'camera'表示直接拍照，'photo'表示直接从相册选择

回调参数

回调参数将会在回调方法中传递，如果成功获取照片，则进入success回调；如果失败或被用户取消，则进入failure 回调。

成功回调参数：

[string] url：访问URL，页面将此URL填写给img的src属性，用于进行照片的预览。
重要
该URL非真实的CDN URL，浏览器无法访问。
[string] localPath：照片的本地文件路径，该路径可以用于后续的WVCamera.confirmUploadPhoto 上传过程。
[string] resourceURL：上传到TFS后的回传CDN地址，该地址可以在浏览器里真实访问。仅当照片被成功上传到 CDN 之后才存在该属性。
[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 返回。

重要

监听事件

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：照片的本地文件路径，该路径可以用于后续的WVCamera.confirmUploadPhoto上传过程。
[string] resourceURL：上传到TFS后的回传CDN地址，该地址可以在浏览器里真实访问。仅当照片被成功上传到 CDN 之后才存在该属性。
[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',
        // 业务代码
        bizCode: 'mtopupload',
        // 是否使用多图选择模式
        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));
});

WVCamera.confirmUploadPhoto

确认上传照片。

输入参数

[string]path：需要上传的照片的路径，必须为takePhoto方法返回的localPath字段的值。
[string]v：得到照片后的上传方式，建议总是传入 '2.0'，表示使用Mtop上传（需要设置bizCode属性，例如 'mtopupload'。特别提示：v: '2.0'不能简写为v: '2'），其它上传方式将被废弃。
[string]bizCode：业务代码，用于标识自己的业务点。
[string]identifier：可选，照片标识，用于鉴别每次上传的照片，仅当使用Mtop上传照片（v = '2.0'）时才有效。

重要

v、bizCode和identifier这三个参数，WindVane Android在VER.6.0.0 或更高才支持。
上传文件之前需要在Media Center申请一个bizCode以标识自己的业务点，并易于对本业务的图片进行管理。可以使用通用的bizCode：mtopupload用于测试，如果需要申请bizCode请联系：逐风，家麒。如果要使用 v='2.0' 的上传，还需要将业务描述、图片大小、图片格式、每天上传多少、图片空间申请的 bizCode 邮件给 @佑明，配置图片上传的通道。

警告

请使用v: '2.0'的上传方式，其它上传方式由于HTTPS改造与安全性缘故将被废弃。

回调参数

回调参数将会在回调方法中传递，如果成功获取，则进入success回调；如果失败或被用户取消，则进入failure回调。

成功回调参数：

[string] localPath：照片的本地文件路径。
[string] resourceURL：上传到TFS后的回传CDN 地址，该地址可以在浏览器里真实访问。

var params = {
        // 需要上传的照片的路径
        path: photoLocalPath,
        // 上传方式
        v: '2.0',
        // 业务代码
        bizCode: 'mtopupload'
};
window.WindVane.call('WVCamera', 'confirmUploadPhoto', params, function(e) {
        alert('success: ' + JSON.stringify(e));
}, function(e) {
        alert('failure: ' + JSON.stringify(e));
});