修改头像总结.docx
《修改头像总结.docx》由会员分享，可在线阅读，更多相关《修改头像总结.docx（17页珍藏版）》请在冰点文库上搜索。
修改头像总结
1,背景
博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档，写下这篇一直想写的文章。
运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。
个人觉得最值得关注的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考，希望给碰到类似问题的苦逼程序员一点借鉴。
个人中心整体功能一览
2，头像处理xmind
叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平，绝对是可以实现的。
修改头像mind
3,实现步骤
按照我的mind，首先是上传图片，先上效果图，然后给出实现的代码。
首先是整体的结构图，做的比较丑，别喷哥···
修改头像整体效果图
下面按照mind一步步实现，
首先：
点击修改头像，弹出一个层，
第一步：
弹出上传图片的层，上传图片到服务器
对实现细节不感冒的屌丝可以看看代码（结合哥的mind看可以事半功倍）：
分层实现细节
Html结构层这个可以免了，一般都可以弄出来
Js连接层
首先是弹出一个上传图片的层，然后上传图片到服务器端。
$（"#editHead"）.bind（"click",function（）{
showUploadDiv（）;
}）;
functionshowUploadDiv（）{
$（"#uploadMsg"）.empty（）;
$.fancybox（{
type:
'inline',
width:
400,
href:
'#uploadUserHead'
}）;
}//fancybox弹出层
上传的处理代码
Servlet服务端处理层（commonupload实现）服务器端处理代码
上传的处理代码
$（function（）{
$（"#uploadFrom"）.ajaxForm（{
beforeSubmit:
checkImg,
error:
function（data,status）{
alert（status+','+data）;
$（"#uploadMsg"）.html（'上传文件超过1M!
'）;
},
success:
function（data,status）{
try{
varmsg=$.parseJSON（data）;
if（msg.code==200）
{//如果成功提交
javascript:
$.fancybox.close（）;
$（"#uploadUserHead"）.hide（）;
vardata=msg.object;
$（"#editImg"）.attr（"src",data.path）.show（）;
$（"#preview1"）.attr（"src",data.path）.show（）;
$（".zoom"）.show（）;
$（"#width"）.val（data.width）;
$（"#height"）.val（data.height）;
$（"#oldImgPath"）.val（data.realPath）;
$（"#imgFileExt"）.val（data.fileExt）;
varapi,jcrop_api,boundx,boundy;
$（'#editImg'）.Jcrop（{
onChange:
updatePreview,
onSelect:
updatePreview,
aspectRatio:
1,
bgOpacity:
0.5,
bgColor:
'white',
addClass:
'jcrop-light'
},function（）{
api=this;
api.setSelect（[130,65,130+350,65+285]）;
api.setOptions（{bgFade:
true}）;
api.ui.selection.addClass（'jcrop-selection'）;
varbounds=this.getBounds（）;
boundx=bounds[0];
boundy=bounds[1];
jcrop_api=this;
}）;
functionupdatePreview（c）{
if（parseInt（c.w）>0）{
varrx=80/c.w;
varry=80/c.h;
$（'#preview1'）.css（{
width:
Math.round（rx*boundx）+'px',
height:
Math.round（ry*boundy）+'px',
marginLeft:
'-'+Math.round（rx*c.x）+'px',
marginTop:
'-'+Math.round（ry*c.y）+'px'
}）;
}
jQuery（'#x'）.val（c.x）;
jQuery（'#y'）.val（c.y）;
jQuery（'#x2'）.val（c.x2）;
jQuery（'#y2'）.val（c.y2）;
jQuery（'#w'）.val（c.w）;
jQuery（'#h'）.val（c.h）;
}
}
if（msg.code==204）{
$（"#uploadMsg"）.html（msg.msg）;
}
}catch（e）{
$（"#uploadMsg"）.html（'上传文件超过1M!
'）;
}
}
}）;
}）;
//服务器端处理代码
StringtempSavePath= ConfigurationUtils.get（"user.resource.dir"）;//上传的图片零时保存路径
StringtempShowPath= ConfigurationUtils.get（"user.resource.url"）;//用户保存的头像路径
if（tempSavePath.equals（"/img"））
{
tempSavePath=sc.getRealPath（"/"）+tempSavePath;
}
Msgmsg=newMsg（）;
msg.setCode（204）;
msg.setMsg（"上传头像失败！
"）;
Stringtype=request.getParameter（"type"）;
if（!
Strings.isNullOrEmpty（type）&&type.equals（"first"））{
request.setCharacterEncoding（"utf-8"）;
DiskFileItemFactoryfactory=newDiskFileItemFactory（）;
ServletFileUploadservletFileUpload=newServletFileUpload（factory）;
try{
Listitems=servletFileUpload.parseRequest（request）;
Iteratoriterator=items.iterator（）;
while（iterator.hasNext（））{
FileItemitem=（FileItem）iterator.next（）;
if（!
item.isFormField（））{
{
FiletempFile=newFile（item.getName（））;
FilesaveTemp=newFile（tempSavePath+"/tempImg/"）;
StringgetItemName=tempFile.getName（）;
StringfileName=UUID.randomUUID（）+"."+getItemName.substring（getItemName.lastIndexOf（"."）+1,getItemName.length（））;
FilesaveDir=newFile（tempSavePath+"/tempImg/",fileName）;
//如果目录不存在，创建。
if（saveTemp.exists（）==false）{
if（!
saveTemp.mkdir（））{//创建失败
saveTemp.getParentFile（）.mkdir（）;
saveTemp.mkdir（）;
}else{
}
}
if（saveDir.exists（））{
log.info（"存在同名文件···"）;
saveDir.delete（）;
}
item.write（saveDir）;
log.info（"上传头像成功!
"+saveDir.getName（））;
msg.setCode（200）;
msg.setMsg（"上传头像成功!
"）;
Imageimage=newImage（）;
BufferedImagebufferedImage=null;
try{
bufferedImage=ImageIO.read（saveDir）;
}catch（IOExceptione）{
e.printStackTrace（）;
}
image.setHeight（bufferedImage.getHeight（））;
image.setWidth（bufferedImage.getWidth（））;
image.setPath（tempShowPath+"/tempImg/"+fileName）;
log.info（image.getPath（））;
image.setRealPath（tempSavePath+"/tempImg/"+fileName）;
image.setFileExt（fileName.substring（fileName.lastIndexOf（"."）+1,fileName.length（）））;
msg.setObject（image）;
}
}else{
log.info（""+item.getFieldName（））;
}
}
}catch（Exceptionex）{
log.error（"上传用户头像图片异常!
"）;
ex.printStackTrace（）;
}
finally{
AppHelper.returnJsonAjaxForm（response,msg）;
}
}
上传成功后，可以看到照片和照片的预览效果。
看图：
上传头像之后的效果
Friday,October05,2012
第二步：
编辑和保存头像
选中图中的区域，保存头像，就完成头像的修改。
修改之后的效果入下：
修改之后的头像（因为传了一张动态图片，得到的跟上图有些不同）
实现细节：
首先用了一个js控件：
Jcrop，有兴趣的屌丝可以去搜一下，然后，利用上传之后的图片和之前的选定区域，完成了一个截图，保存为用户的头像。
连接层的js：
$（"#saveHead"）.bind（"click",function（）{
varwidth=$（"#width"）.val（）;
varheight=$（"#height"）.val（）;
varoldImgPath=$（"#oldImgPath"）.val（）;
varimgFileExt=$（"#imgFileExt"）.val（）;
varx=$（'#x'）.val（）;
vary=$（'#y'）.val（）;
varw=$（'#w'）.val（）;
varh=$（'#h'）.val（）;
$.ajax（{
url:
'/imgCrop',
type:
'post',
data:
{x:
x,y:
y,w:
w,h:
h,width:
width,height:
height,oldImgPath:
oldImgPath,fileExt:
imgFileExt},
datatype:
'json',
success:
function（msg）{
if（msg.code==200）{
$（"#avatar"）.attr（"src",msg.object）;
forword（'/nav','index'）;
}
else{
alert（msg.msg）;
}
}
}）;
}）;
functioncheckImg（）{
//限制上传文件的大小和后缀名
varfilePath=$（"input[name='uploadImg']"）.val（）;
if（!
filePath）{
$（"#uploadMsg"）.html（"请选择上传文件!
"）.show（）;
returnfalse;
}
else{
varextStart=filePath.lastIndexOf（"."）;
varext=filePath.substring（extStart,filePath.length）.toUpperCase（）;
if（ext!
=".PNG"&&ext!
=".GIF"&&ext!
=".JPG"）{
$（"#uploadMsg"）.html（"图片限于png,gif,jpg格式!
"）.show（）;
returnfalse;
}
}
returntrue;
}
服务器端处理代码：
StringsavePath= ConfigurationUtils.get（"user.resource.dir"）;//上传的图片保存路径
StringshowPath= ConfigurationUtils.get（"user.resource.url"）;//显示图片的路径
if（savePath.equals（"/img"））
{
savePath=sc.getRealPath（"/"）+savePath;
}
intuserId=AppHelper.getUserId（request）;
StringuserName=AppHelper.getUserName（request）;
Msgmsg=newMsg（）;
msg.setCode（204）;
msg.setMsg（"剪切图片失败！
"）;
if
升级会员 