<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" >
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css">
<title>name</title>
</head>
<style>
</style>
<body style="background:none;">
<div onclick="selectPhone()">
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../script/APICloud-rest-SHA1.js"></script>
<script type="text/javascript" src="../script/key.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript">
var toast = new auiToast();//注册提示框
var newUrl;
var newId;
//打开照片选择器
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) {
//将获取到的路径保存到数组中
openImageClip(ret.data);
}
});
}else if(sourceType == 2){
//UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
var obj = api.require('UIMediaScanner');
obj.open({
type : 'picture',
column : 4,
max : 1,//只运行选择一张图片
sort : {
key : 'time',
order : 'desc'
},
texts : {
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(ret.eventType=='confirm'){
//是否选择了图片
if(ret.list[0]==null){return false;}
//路径转换，如果不转换ios系统会报错
obj.transPath({
path: ret.list[0].path
}, function(ret2, err2) {
if (ret2) {
//将图片保存到数组中，并在页面中展示
openImageClip(ret2.path);
} else {
}
});
}
}
});
}
}
function openImageClip(imgUrl){
var str=new String();
str+='<header class="aui-bar aui-bar-nav" style="background:#fefefe;position:fixed;top:0;z-index:1000;"><a class="aui-pull-left aui-btn aui-btn-outlined" style="color:#03A9F4;" onclick="closeImageClip();">取消</a><div class="aui-title">头像剪裁</div><a class="aui-pull-right aui-btn aui-btn-outlined" style="color:#03A9F4;" onclick="saveImageClip()">确定</a></header>';
$('body').prepend(str);
var headerHeight=$('header').height();
var side=50;
FNImageClip.open({
rect: {
x: 0,
y: headerHeight,
w: api.winWidth,
h: api.winHeight
},
srcPath: imgUrl,
style: {
mask: 'rgb(238,238,238,150)',
clip: {
w: api.winWidth-2*side,
h: api.winWidth-2*side,
x: side,
y: (api.winHeight-api.winWidth-2*side)/2,
borderColor: 'rgb(238,238,238)',
borderWidth: 1,
appearance: 'rectangle'
},
},
mode: 'image',
fixedOn: api.frameName
}, function(ret, err) {
if (ret) {
//alert(JSON.stringify(ret));
} else {
var toast = new auiToast({});
toast.fail({
title : "操作失败！",
duration : 2000
});
}
});
}
function closeImageClip(){
//关闭截图窗口
FNImageClip.close();
//修改顶部栏
$('header').css('display','none');
}
function saveImageClip(){
FNImageClip.save({
destPath: 'fs://result.png',
copyToAlbum: false,
quality: 0.0001
}, function(ret, err) {
if (ret) {
if(ret.destPath=='undefined'){
//alert('保存失败');
toast.fail({
title : "图像处理失败，请重试",
duration : 2000
});
return false;
}
imgSrc=ret.destPath;
//上传图片
closeImageClip();
uploadFile(imgSrc);
} else {
toast.fail({
title:"图像处理失败，请重试",
duration:2000
});
}
});
}
//上传头像
function uploadFile(url){
toast.loading({
title:"正在上传信息",
duration:2000
},function(ret){
});
model.uploadFile({
report: true,
data: {
file: {
name: '用户头像-'+userInfo.Nickname,
url: url
}
}
}, function(ret, err){
if( ret ){
//如果上传成功
if(ret.state==1){
//修改用户数据
DeletePicture($api.getStorage(KEY.USER_INFO).HeadImgId);
client = new Resource(KEY.appId, KEY.appKey);
Model = client.Factory("MyUser");
Model.save({"_id":userInfo.id},{"HeadImgUrl":ret.body.url,"HeadImgId":ret.body.id}, function(ret2,err2){
if(ret2){
newUrl=ret.body.url;
newId=ret.body.id;
$('#HeadImg').attr('src',newUrl);
$api.setStorage(KEY.USER_INFO,ret2);
//通知frame3修改头像
api.sendEvent({
name: 'changeInfo'
});
toast.hide();
toast.success({
title:"信息上传成功",
duration:2000
});
//处理错误 err
}else{
//处理数据 ret
toast.fail({
title:"信息修改失败，请检查您的网络",
duration:2000
});
}
})
//如果图象上传失败，则从BUFFER中，弹出重新上传。
}else if(ret.state==2){
console.log('重新上传图片');
uploadFile(url);
}
}else{
toast.hide();
toast.fail({
title:"信息修改失败，请检查您的网络",
duration:2000
});
setTimeout(function(){
api.closeWin({});
}, 1000);
}
});
}
function openWin_my_info_edit(){
api.openWin({
name: 'my_info_edit',
url : '../html/my_info_edit.html'
})}
</script>
</html>
图片选择剪裁上传
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 本文为原创文章，转载请标明出处 目录 安装插件 导入 app.module.ts 创建 page 更多 效果图 1...
- webuploader的优点是几乎支持所有的平台，pc端支持ie6+，支持IOS和Android,它可以自动压缩图...
- �记录一下最近在做的项目中的一个功能,功能需求如下: 产品要求是用户可以从手机相册里选择一张照片,然后得到这张照片...
