开发者社区> 桃子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

apiCloud上传头像

简介:
+关注继续查看

apiCloud上传头像

1.拍照

2.从相机中选择

aui布局

<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事件,弹出选择

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

422101-20161103151705002-295604291.png

3.处理事件

function getPicture(sourceType) {
    if(sourceType==1){ // 拍照
        //获取一张图片
        api.getPicture({
            sourceType: 'camera',
            encodingType: 'png',
            mediaValue: 'pic',
            allowEdit: false,
            quality: 90,
            saveToPhotoAlbum: true
        }, function(ret, err) {
            // 获取拍照数据并处理
            if (ret) {
                var imgSrc = ret.data;
                if (imgSrc != "") {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',imgSrc);
                }
            }
        });
    }
    else if(sourceType==2){ // 从相机中选择
        //UIMediaScanner 是一个多媒体扫描器,可扫描系统的图片、视频等多媒体资源
        var obj = api.require('UIMediaScanner');
        obj.open({
            //返回的资源种类,picture(图片),video(视频),all(图片和视频)
            type: 'picture',
            //(可选项)图片显示的列数,须大于1
            column: 4,
            max: 1,
            //(可选项)图片排序方式,asc(旧->新),desc(新->旧)
            sort: {
                key: 'time',
                order: 'desc'
            },
            //(可选项)模块各部分的文字内容
            texts: {
                stateText: '已选择*项',
                cancelText: '取消',
                finishText: '完成'
            },
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_right',
                    size: 20
                },
                nav: {
                    bg: '#eee',
                    stateColor: '#000',
                    stateSize: 18,
                    cancleBg: 'rgba(0,0,0,0)',
                    cancelColor: '#000',
                    cancelSize: 18,
                    finishBg: 'rgba(0,0,0,0)',
                    finishColor: '#000',
                    finishSize: 18
                }
            }
        }, function(ret) {
            // 获取图片数据并处理
            if (ret) {
                if (getJsonObjLength(ret.list) != 0) {
                    var ele=$api.dom('#avatar');
                    $api.attr(ele,'src',ret.list[0].path);
                }
            }
        });
    }
}

第一种是apiCloud自带的,获取拍照数据的接口。

第二种需要引入模块,UIMediaScanner。
422101-20161103151718721-1959725349.png

两种方式都能获取图片的app中的地址,把地址通过ajax传递出去到服务器,就可以完成保存头像了。

调试请用手机,不然看不到效果。


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/6026757.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
一步步教你如何上传头像
一步步教你如何上传头像
0 0
uniapp --本地图片的上传
uniapp --本地图片的上传
0 0
微信小程序之图片选择、预览与上传
所谓:一图胜千言。这话说明了图片描述事物的能力是非常强大的(怪不得我们可以用表情包聊一整天),尤其现在的手机拍照功能那么方便,用户对使用拍照和相册的需求日益上升。
2017 0
Ueditor结合七牛云存储上传图片、附件和图片在线管理的实现和最新更新
最新下载地址: https://github.com/widuu/qiniu_ueditor_1.4.3 Ueditor七牛云存储版本 注意事项 老版本请查看 : https://github.com/widuu/qiniu_ueditor_1.
1930 0
微信开发之调起摄像头、本地展示图片、上传下载图片
 之前那篇微信JS-SDK授权的文章实现了分享接口,那么这里总结一下如何在微信里面通过js调起原生摄像头,以及上传下载图片。 1.配置 页面引入通过jssdk授权后,传入wx对象,首先配置需要的接口 wx.
1263 0
ionic开发之用户头像修改-图片选择与上传
用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来想省点事才不用插件去实现这个功能的,这下看来只能用插件了。
1192 0
完美实现类似QQ的自拍头像、上传头像功能!(Demo 源码)
  现在很多下载客户端程序都需要设定自己头像的功能,而设定头像一般有两种方式:使用摄像头自拍头像,或者选择一个图片的某部分区域作为自己的头像。 一.相关技术   若要实现上述的自拍头像和上传头像的功能,会碰到以下要解决的问题: (1)调用摄像头,捕获摄像头采集的视频,并将采集的视频绘制到UI上。
1229 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载