注意：部分机型使用下面模块可能会出现bug，如拍照闪退，压缩大图片时闪退。模块是第三方开发的，出现bug也没有办法（尴尬脸）
需要在apicloud控制台中引入UIMediaScanner模块、imageFilter模块，如下图：
废话少说，直接上码
html代码：
<input type="button" value="上传头像" onclick="selectPhone()"/>
<img id="avatar" name="avatar" src="" width="100px;">
js代码：
思路：
- 先调用UIMediaScanner模块显示图片
- 然后调用imageFilter模块对图片进行压缩
- 最后将图片上传到云端数据库的file表中
引入相关js:
- api.js
- APICloud-rest-SHA1.js
var uiMediaScanner;
var imageFilter ;
//设置最大宽度和高度
var mostW = 690;
var mostH = 690;
apiready = function(){
//需要在控制台中为本项目添加以下模块
//UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
uiMediaScanner = api.require('UIMediaScanner');
//实现图片压缩的功能
imageFilter = api.require('imageFilter');
};
function selectPhone(){
api.actionSheet({
title: '上传头像',
cancelTitle: '取消',
buttons: ['拍照','从手机相册选择']
}, function(ret, err) {
if (ret) {
getPicture(ret.buttonIndex);
}
});
}
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);
compress(imgSrc);
}
}
});
}else if(sourceType==2){ // 从相机中选择
uiMediaScanner.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) {
alert(JSON.stringify(ret));
if (ret.list.length> 0) {
var imgSrc=ret.list[0].path;
// for(var i=0;i<ret.list.length;i++){
// var imgSrc=ret.list[i].path;
// alert(imgSrc);
// }
var ele=$api.dom('#avatar');
$api.attr(ele,'src',imgSrc);
compress(imgSrc);
}
}
});
}
}
/*
* 图片上传
*/
function updateFile(path,filename){
var client = new Resource(KEY.appId, KEY.appKey);
var File = client.Factory("file");
File.save(
{
file:
{
isFile:true,
path:path,
values:
{
filename:filename
}
}
},
function(data,err){
api.hideProgress();
if(data){
alert("上传结果："+JSON.stringify(data));
}else{
alert("上传发生错误："+JSON.stringify(err));
}
})
}
/*
* 图片压缩
* path：要压缩图片的路径
*/
function compress(path){
api.showProgress({
style: 'default',
animationType: 'fade',
title: '请稍后...',
text: '压缩图片...',
modal: false
});
/*
* 缩放比例
* 获取图片的高、宽信息
*/
imageFilter.getAttr({
path: path
}, function(ret, err) {
var imgAttr=changeImg(ret.width,ret.height);
var suffix=getSuffix(path);
var tempFolder="./temp/"
var tempFileName=Math.floor(1000)+"."+suffix;
imageFilter.compress({
img: path,
size:{
w:imgAttr.width,
h:imgAttr.height
},
save:{
album:true,
imgPath:tempFolder,
imgName:tempFileName
}
}, function(ret, err) {
api.hideProgress();
if (ret) {
alert("压缩结果:"+JSON.stringify(ret));
api.showProgress({
style: 'default',
animationType: 'fade',
title: '请稍后...',
text: '正在上传图片...',
modal: false
});
updateFile(tempFolder+tempFileName,"");
} else {
alert(JSON.stringify(err));
}
});
});
}
function getSuffix(filePath){
var pos=filePath.lastIndexOf(".");
return filePath.substring(pos+1);
}
/*
* 传入图片宽和高，如果宽度大于高度，并且宽度大于最大宽度，就以宽度为基准计算缩小比例
* 返回值：json类型，缩放后的高、宽
*/
function changeImg(w,h){
var retW=0;
var retH=0;
if(w>h){
if(w > mostW){
var scaling = 1-(w-mostW)/w;
//计算缩小比例
retW = w*scaling;
retH = h*scaling;
}
}else{
if(h > mostH){
var scaling = 1-(h-mostH)/h;
//计算缩小比例
retW = w*scaling;
retH = h*scaling;
}
}
return {'width':retW,'height':retH};
}