apiCloud拍照和从相册选择图片代码

APP选择图片，一般分为两种，一种是从相册选择，一种是拍照，下面的代码就是apiCloud拍照和从相册选择(APICloud官方api描述的也很清楚，说实在的，比mui简单清楚多了)：

1、html代码：

<li class="aui-list-item">
    <div class="aui-list-item-inner">
        <div class="aui-list-item-label">
            头像
        </div>
        <div class="aui-list-item-input" style="margin:15px;" onclick="showAction();">
            <img id="avatar" name="avatar" src="../image/default_headimg.png" width="100px;">
        </div>
    </div>
</li>

2.js事件，actionSheet弹出选择

function showAction(){
    api.actionSheet({
        title: '上传头像',
        cancelTitle: '取消',
        buttons: ['拍照','从手机相册选择']
    }, function(ret, err) {
        if (ret) {
            getPicture(ret.buttonIndex);
        }
    });
}

下面是效果图：


3、拍照和上传图片代码：

function getPicture(sourceType) {
    if(sourceType==1){ // 拍照
        //获取一张图片
        api.getPicture({
            sourceType: 'camera',  //拍照
            encodingType: 'png',
            mediaValue: 'pic',
            allowEdit: false,
            //destinationType: 'base64',  //返回base64地址
            quality: 90,
            saveToPhotoAlbum: true
        }, function(ret, err) {
            //var imgSrc = ret.base64Data;  如果是base64，要用这个属性获取地址
            // 获取拍照数据并处理
            if (ret) {
                var imgSrc = ret.data;
                if (imgSrc != "") {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',imgSrc);
                }
            }
        });
    }else if(sourceType==2){ // 从相册中选择
      api.getPicture({
          sourceType: 'album', //从相册中选择
          encodingType: 'jpg',
          mediaValue: 'pic',
          allowEdit: false,
          //destinationType: 'base64',  //返回base64地址
          quality: 90,
          saveToPhotoAlbum: true
      }, function(ret, err) {
          // 获取拍照数据并处理
            //var imgSrc = ret.base64Data;  如果是base64，要用这个属性获取地址

            if (ret) {
                var imgSrc = ret.data;
                if (imgSrc != "") {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',imgSrc);
                }
            }
      });
    }
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！