chooseImage 选择图片

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 class="btn">选择图片</button>
<img 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);

入参

出参

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

错误

使用注意

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