《个人中心修改头像总结.docx》由会员分享，可在线阅读，更多相关《个人中心修改头像总结.docx（11页珍藏版）》请在三一办公上搜索。
1、个人中心修改头像总结1,背景博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档， 写下这篇一直想写的文章。运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家 长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以 及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注 的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考， 希望给碰到类似问题的苦逼程序员一点借鉴。M基本信息8个人资料国基本资料详细资料 命
2、修改头像 5教育背景 g工作信息n邮箱绑定E3密保邮箱 首密保间题 1也密保手机个人中心整体功能一览2，头像处理xmind叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然 后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平， 绝对是可以实现的。修改头像整体效果图下面按照mind 一步步实现首先：点击修改头像，弹出一个层，3,实现步骤比较丑，别喷哥第一步：弹出上传图片的层，上传图片到服务器对实现细节不感冒的屈丝可以看看代码（结合哥的mind看可以事半功倍）：分层实现细节Html结构层这个可以免了，一般都可以弄出来J
3、s连接层首先是弹出一个上传图片的层，然后上传图片到服务器端。$(#editHead).bind(click”, function () showUploadDiv();)；function showUploadDiv() $(#uploadMsg).empty();$.fancybox(type:inline,width:400,href:#uploadUserHead);/fancybox 弹出层上传的处理代码Servlet服务端处理层(commonupload实现)服务器端处理代码上传的处理代码$(function () $(#uploadFrom).ajaxForm(beforeSubm
4、it:checkImg,error:function(data,status)alert(status+ , +data);$(#uploadMsg).html(上传文件超过 1M!);,success:function (data,status) tryvar msg = $.parseJSON(data);if (msg.code = 200)如果成功提交javascript:$.fancybox.close();$(#uploadUserHead).hide();var data = msg.object;$(#editImg).attr(src, data.path).show();$
5、(#preview1).attr(src, data.path).show();$(.zoom).show();$(#width).val(data.width);$(#height).val(data.height);$(#oldImgPath).val(data.realPath);$(#imgFileExt).val(data.fileExt);var api, jcrop_api, boundx, boundy;$(#editImg).Jcrop(onChange:updatePreview,onSelect:updatePreview, aspectRatio:1, bgOpacit
6、y: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);var bounds = this.getBounds();boundx = bounds0; boundy = bounds1;jcrop_api = this;);function updatePreview(c) if
7、(parseInt(c.w) 0) var rx = 80 / c.w; var ry = 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(
8、#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!); ););服务器端处理代码String tempSavePath = ConfigurationUtils.get(user.resource.dir); 上传的图片零时保存 路径String tempShowPath = ConfigurationUtils.get(user.resource.url); 用
9、户保存的 头像路径if(tempSavePath.equals(/img)tempSavePath=sc.getRealPath(/)+tempSavePath;Msg msg = new Msg();msg.setCode(204);msg.setMsg(上传头像失败！)；String type = request.getParameter(type);if (!Strings.isNullOrEmpty(type) & type.equals(first) request.setCharacterEncoding(utf-8);DiskFileItemFactory factory = n
10、ew DiskFileItemFactory();ServletFileUpload servletFileUpload = new ServletFileUpload(factory); try List items = servletFileUpload.parseRequest(request);Iterator iterator = items.iterator();while (iterator.hasNext() FileItem item = (FileItem) iterator.next();if (!item.isFormField() File tempFile = ne
11、w File(item.getName();File saveTemp = new File(tempSavePath+/tempImg/);String getItemName=tempFile.getName();String fileName = UUID.randomUUID()+. +getItemName.substr ing(getItemName.lastIndexOf(.) + 1, getItemName.length();File saveDir = new File(tempSavePath+/tempImg/, fileName); 如果目录不存在，创建。if (sa
12、veTemp.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(上 传头像成功!)；Image image = new Image();BufferedImage
13、bufferedImage = null; try bufferedImage = ImageIO.read(saveDir); catch (IOException e) e.printStackTrace();image.setHeight(bufferedImage.getHeight();image.setWidth(bufferedImage.getWidth();image.setPath(tempShowPath+ /tempImg/ + fileName);log.info(image.getPath();image.setRealPath(tempSavePath+/temp
14、Img/+ fileName);image.setFileExt(fileName.substring(fileName.lastIndexOf(.) + 1, fileName.length();msg.setObject(image); else log.info( + item.getFieldName(); catch (Exception ex) log.error(上传用户头像图片异常!”)；ex.printStackTrace();finally AppHelper.returnJsonAjaxForm(response, msg); 上传成功后，可以看到照片和照片的预览效果。看
15、图：上传头像之后的效果I耳本信息7存在堂承牛智，贝世七奇音，I账号安全Friday, October 05, 2012第二步：编辑和保存头像选中图中的区域，保存头像，就完成头像的修改。修改之后的效果入下：修改之后的头像（因为传了一张动态图片，得到的跟上图有些不同）实现细节：首先用了一个js控件：Jcrop，有兴趣的屈丝可以去搜一下，然后，利用上传之后的图片和之前的选定区 域，完成了一个截图，保存为用户的头像。连接层的js：$(#saveHead).bind(click, function () var width = $(#width).val();var height = $(#height
16、).val();var oldImgPath = $(#oldImgPath).val();var imgFileExt = $(#imgFileExt).val();var x = $(#x).val();var y = $(#y).val();var w = $(#w).val();var h = $(#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:js
17、on,success:function (msg) if (msg.code = 200) $(#avatar).attr(src, msg.object); forword(/nav, index);else alert(msg.msg);););function checkImg() 限制上传文件的大小和后缀名var filePath = $(inputname = uploadImg).val();if (!filePath) $(#uploadMsg).html(请选择上传文件!”).show();return false;else var extStart = filePath.la
18、stIndexOf(.);var ext = filePath.substring(extStart, filePath.length).toUpperCase();if (ext != .PNG & ext != .GIF & ext != .JPG) $(#uploadMsg).html(图片限于 png,gif,jpg 格式!).show(); return false;return true;服务器端处理代码：String savePath = ConfigurationUtils.get(user.resource.dir); 上传的图片保存路径 String showPath =
19、ConfigurationUtils.get(user.resource.url); 显示图片的路径 if(savePath.equals(/img) savePath=sc.getRealPath(/)+savePath;int userId = AppHelper.getUserId(request);String userName=AppHelper.getUserName(request);Msg msg = new Msg(); msg.setCode(204); msg.setMsg(剪切图片失败！)； if (userId = 1) msg.setCode(200);msg.se
20、tMsg(剪切图片成功!)； log.info(剪切图片成功!”)； 记录日志，更新session log(showPath+imgName,userName);UserObject userObject= userService.getUserObject(userName);request.getSession().setAttribute(userObject, userObject);if (userObject != null & Strings.isNullOrEmpty(userObject.getHeadDir ()userObject.setHeadDir(/images/g
21、eren_right_01.jpg); else msg.setCode(204);msg.setMsg(剪切图片失败!)； log.info(剪切图片失败!”)；AppHelper.returnJson(response, msg);File file = new File(oldImgPath);boolean deleteFile= file.delete();if(deleteFile=true)log.info(删除原来图片成功);/*图像切割（改）* param srcImageFile 源图像地址* param dirImageFile 新图像地址* param x目标切片起点x
22、坐标* param y目标切片起点y坐标* param destWidth 目标切片宽度* param destHeight 目标切片高度*/public static void abscut(String srcImageFile, String dirImageFile, int x, int y, int destWidth, int destHeight) try Image img;ImageFilter cropFilter;/读取源图像BufferedImage bi = ImageIO.read(new File(srcImageFile);int srcWidth = bi.
23、getWidth(); / 源图宽度int srcHeight = bi.getHeight(); / 源图高度if (srcWidth = destWidth & srcHeight = destHeight) Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE _DEFAULT);/改进的想法:是否可用多线程加快切割速度/四个参数分别为图像起点坐标和宽高/ 即：CropImageFilter(int x,int y,int width,int height) cropFilter = new CropIma
24、geFilter(x, y, destWidth, destHeight);img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource (image.getSource(), cropFilter);BufferedImage tag = new BufferedImage(destWidth, destHeight, Buffer edImage.TYPE_INT_RGB);Graphics g = tag.getGraphics();g.drawImage(img, 0, 0, null); / 绘制缩小后的图
25、 g.dispose();/输出为文件ImageIO.write(tag, JPEG, new File(dirImageFile); catch (Exception e) e.printStackTrace();最后一个处理的比较好的地方就是图片的存储路径问题：我在服务器端的nginx中做了一个图片的地址映射，把图片放到了跟程序不同的路径中，每次存储图片都 是存到图片路径中，客户端拿到图片的地址确实经过nginx映射过的地址。还有就是关于限制上传图片的大小的问题： 我在服务器端显示了资源的最大大小为1M，当上传的资源超过1M，服务器自动报错413,通过异常处理， 可以在客户端得到正确的提示信息。4,总结优点和不足。关于修改头像，这么做下来确实达到了目的，用户可以从容的修改头像，性能也还可以。但是，上传图 片的大小判断是依靠服务器端来判断的，等待的时间比较久，改进的方向是使用flash控件来限制，使用f lash来上传，也不会出现弹出层，这样比较大众化，更容易为用户接受一点。我会不断改进。
