全部产品
Search
文档中心

SuperApp:相机

更新时间:Jan 17, 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));
});