本文介绍相机类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));
});