全部产品
云市场
云游戏

相机 WVCamera

更新时间:2019-01-14 16:37:39

WVCamera.takePhoto

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

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

示例代码如下所示:

  1. var photoLocalPath; // 保存本地文件的路径。
  2. var params = {
  3. type: '0',
  4. };
  5. window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
  6. var uploadParams = {
  7. // 需要上传的照片的路径
  8. path: e.localPath
  9. };
  10. setTimeout(function() {
  11. window.WindVane.call('WVCamera', 'confirmUploadPhoto', uploadParams, function(e) {
  12. alert('upload success: ' + JSON.stringify(e));
  13. }, function(e) {
  14. alert('upload failure: ' + JSON.stringify(e));
  15. });
  16. }, 20);
  17. }, function(e) {
  18. alert('takePhoto failure: ' + JSON.stringify(e));
  19. });

输入参数自定义

回调参数

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

成功回调参数:

  • [string] url - 访问 URL,页面将此 URL 填写给 imgsrc 属性,用于进行照片的预览。 注意:该 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,而且只有从相册选择照片时才能够选择多张,直接拍照时仍会使用上面的单张照片模式,因此建议传入参数 mode: 'photo' 以直接进入相册。

注意:Android 目前只有在手淘中才能使用多图选择模式,而且在VER.手淘 Android 0330 之前,快速滑动时存在线程溢出的 BUG,因此建议从 VER.0330 之后再使用。

输入参数

  • [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 - 照片的本地文件路径,该路径可以用于后续的 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 返回。
  1. document.addEventListener('WVPhoto.Event.uploadPhotoSuccess', function (e) {
  2. alert('event uploadPhotoSuccess: ' + JSON.stringify(e.param));
  3. });
  4. document.addEventListener('WVPhoto.Event.uploadPhotoFailed', function (e) {
  5. alert('event uploadPhotoFailed: ' + JSON.stringify(e.param));
  6. });
  7. var params = {
  8. // 得到照片后是否自动上传
  9. type: '1',
  10. // 是否只允许拍照或从相册选择
  11. mode: 'photo',
  12. // 上传方式
  13. v: '2.0',
  14. // 业务代码
  15. bizCode: 'mtopupload',
  16. // 是否使用多图选择模式
  17. mutipleSelection: '1',
  18. // 多图选择模式下最多选择的照片数
  19. maxSelect: 6
  20. };
  21. window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
  22. alert('takePhoto success: ' + JSON.stringify(e));
  23. }, function(e) {
  24. alert('takePhoto failure: ' + JSON.stringify(e));
  25. });

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')时才有效。
  • [string] mode - [可选]是否只允许拍照或从相册选择,'camera' 表示直接拍照,'photo' 表示直接从相册选择,'both' 表示可以由用户自选拍照还是从相册选择。默认为 'both'VER.WindVane 5.3.0 或更高)。
  • [boolean] needLogin - [可选]使用 Mtop 上传照片(v = '2.0')时是否要求必须登录才能上传,否则无需登录即可上传照片(VER.WindVane 6.5.0 或更高,旧版本仍然要求登录,新版本已默认无需登录)。

注意:vbizCodeidentifier 这三个参数,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 地址,该地址可以在浏览器里真实访问。
  1. var params = {
  2. // 需要上传的照片的路径
  3. path: photoLocalPath,
  4. // 上传方式
  5. v: '2.0',
  6. // 业务代码
  7. bizCode: 'mtopupload'
  8. };
  9. window.WindVane.call('WVCamera', 'confirmUploadPhoto', params, function(e) {
  10. alert('success: ' + JSON.stringify(e));
  11. }, function(e) {
  12. alert('failure: ' + JSON.stringify(e));
  13. });