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);
        }
    });
}

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。

兩種方式都能獲取圖片的app中的地址，把地址通過ajax傳遞出去到服務器，就可以完成保存頭像了。

調試請用手機，不然看不到效果。