1
HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>頭像上傳</title>
<link rel="stylesheet" href="../../css/api.css" />
<style type="text/css">
.box{
width: 80px;
height: 80px;
border-radius: 100%;
border: 1px solid #ccc;
overflow: hidden;
}
.box img{
width: 100%;
height: 100%;
}
</style>
<head/>
<body>
<div>
<img src ='' id='wode'>
</div>
</body>
javascript部分
<script type="text/javascript" >
//調用攝像頭或者手機相冊，保證啓用攝像權限，如果未開啓權限，否則會報錯，
//如果需要開啓權限，請假對應的判斷語句
function uploadHeadPic() {
api.actionSheet({
title : '上傳照片',
cancelTitle : '取消',
buttons : ['拍照', '手機相冊']
}, function(ret, err) {
if (ret) {
if (ret.buttonIndex == 1) {
api.getPicture({
sourceType : 'camera',
encodingType : 'jpg',
mediaValue : 'pic',
destinationType : 'url',
allowEdit : false,
quality : 100,
saveToPhotoAlbum : false
}, function(ret, err) {
// alert(JSON.stringify(ret));
if (ret) {
saveImg(ret.data);
} else {
api.toast({
msg : '圖像獲取失敗',
duration : 3000,
location : 'bottom'
});
}
});
} else if (ret.buttonIndex == 2) {
//手機相冊選圖片
api.getPicture({
sourceType : 'library',
encodingType : 'png',
mediaValue : 'pic',
destinationType : 'url',
allowEdit : true,
quality : 100,
preview:true,
saveToPhotoAlbum : false
}, function(ret, err) {
//返回選擇或者拍攝後的路徑
// alert(JSON.stringify(ret.data));
if (ret) {
saveImg(ret.data);
} else {
api.toast({
msg : '圖像獲取失敗',
duration : 3000,
location : 'bottom'
});
}
});
}
}
});
};
//保存剪輯圖像
function saveImg(path) {
api.showProgress({
title: '上傳中...',
text: '先喝杯茶...',
});
//上傳剪輯後的圖像到服務器
api.ajax({
// report : false,
url : uploadImageUrl,
method : 'post',
cache : 'false',
timeout : 30,
dataTpye : 'json',
data : {
files : {
file : path
}
}
}, function(ret, err) {
//服務器返回上傳後的回調信息，
//alert(JSON.stringify(ret));
api.hideProgress();
//這裏根據不同的例子來做不同的調整
//獲取到img節點，並且將src替換，
var element = document.getElementById('wode');
//我這裏後端返回的數據，圖片字段就是ok
element.src = ret.ok;
});
};
</script>