• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > DCloud,APICloud >  apiCloud拍照和从相册选正文

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

作者:网页模板
类型:图文教程
点击次数:
发布时间:2018-10-30 13:19
分享到:
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);
                }
            }
      });
    }
}

(责任编辑:网页模板)
  • 本文标签:
  • apiCloud拍照
一步一步教您用HBuilder的git将项目上传到gitee上
apicloud图片缓存的使用和查看清除缓存