JSAPI

  • chooseImage

    拍照或从手机相册中选图接口

    使用方法

    AlipayJSBridge.call('chooseImage', {
      sourceType: ['camera', 'album'],
      count: 6
    }, function (result) {
      console.log(result);
    });
    

    代码演示

    基本使用

    <style>.img{ display:block; max-width: 100%; margin: 20px auto;}</style>
    <h1>点击按钮选择图片</h1>
    <button id="J_chooseImage" class="btn">选择图片</button>
    <img id="J_imageViewer" class="img" />
    
    <script type="text/javascript">
    function ready(callback) {
      // 如果jsbridge已经注入则直接调用
      if (window.AlipayJSBridge) {
        callback && callback();
      } else {
        // 如果没有注入则监听注入的事件
        document.addEventListener('AlipayJSBridgeReady', callback, false);
      }
    }
    ready(function() {
      var btn = document.querySelector('#J_chooseImage');
    
      btn.addEventListener('click', function(e) {
        AlipayJSBridge.call(
          'chooseImage',
          {
            count: 1,
            // 如果只需要拍照,可以只传['camera']
            sourceType: ['camera', 'album']
          },
          function (result) {
            alert(JSON.stringify(result));
    
            var apFilePath = result.apFilePathsV2 || result.apFilePaths || [];
            if (typeof apFilePath === 'string') {
              try {
                apFilePath = JSON.parse(apFilePath);
              } catch (e) {}
            }
    
            if (!apFilePath.length || !/^https?:/.test(apFilePath[0])) {
              return;
            }
    
            // 如下演示如何拿到base64格式的数据,可用于上传到服务器端的场景
            var eImage = document.querySelector('#J_imageViewer');
            var image = new Image();
            image.crossOrigin = 'anonymous';
            image.onload = function() {
              var canvas = document.createElement('CANVAS');
              var context = canvas.getContext('2d');
              canvas.height = image.height;
              canvas.width = image.width;
              context.drawImage(image, 0, 0);
              try {
                var dataURL = canvas.toDataURL('image/jpeg');
                console.log(dataURL);
                eImage.src = dataURL;
              } catch (e) {
                eImage.src = apFilePath[0];
              }
              canvas = null;
            }
            image.src = apFilePath[0];
          }
        );
      }, false);
    });
    </script>
    

    API

    AlipayJSBridge.call('chooseImage', {
      sourceType: 'camera',
      count: 1
    }, fn);
    

    入参

    名称类型描述必选默认值版本
    countnumber最大可选照片数N默认9张9.9.7
    sourceTypearray相册选取或者拍照N[‘camera’,’album’]9.9.7
    publicDomainbool是否准备上传到公有域,上传到公有域的图片在访问的时候不需要鉴权Nfalse

    出参

    回调函数带入的参数result: {error }

    名称类型描述
    apFilePathsV2array图片文件路径
    apFilePathsjsonString图片文件路径
    localIdsarray图片多媒体LocalId iOS使用
    tempFilePathsjsonString图片文件路径 Android使用
    successbool是否返回成功
    errorCodestring错误码

    错误

    errorCode描述
    10用户取消
    11操作失败(权限不够)

    使用注意

    • 返回的apFilePathsV2 可以直接用来做页面加载显示。建议用封装好的:ap.chooseImage解决版本字段兼容问题。