1,背景

博客停了好久，主要是最近工作太忙了，还有就是身体状况没有以前那么好了，乘着国庆长假的空档，写下这篇一直想写的文章。

运营平台是我主要致力的一个项目，这个项目分为四个大部分，个人中心，充值中心，客服中心，家长监护，最近主要忙着个人中心的重写和丰富，关于个人中心，无非就是对平台用户信息的自我管理，以及一些对用户帐号的安全保护措施，下图的菜单非常简要的说明了个人中心的功能。个人觉得最值得关注的就是密保设置和修改头像，因为之前没有处理过类似的问题，本文主要记录对头像的处理过程以及思考，希望给碰到类似问题的苦逼程序员一点借鉴。

个人中心整体功能一览

2，头像处理xmind

叽歪一句，个人碰到问题的时候，首先会分析问题，在分析问题的基础上，得到整体的解决方案，然后一步步分解步骤，去实现，首先奉上我的解决方案，也许不是最优的，但是按照个人的知识和技能水平，绝对是可以实现的。

修改头像mind

3,实现步骤

按照我的mind，首先是上传图片，先上效果图，然后给出实现的代码。首先是整体的结构图，做的比较丑，别喷哥···

修改头像整体效果图

下面按照mind一步步实现，

首先：点击修改头像，弹出一个层，

第一步：弹出上传图片的层，上传图片到服务器

对实现细节不感冒的屌丝可以看看代码(结合哥的mind看可以事半功倍)：

分层实现细节

Html结构层这个可以免了，一般都可以弄出来

Js连接层

首先是弹出一个上传图片的层，然后上传图片到服务器端。 $("#editHead").bind("click", function () {

showUploadDiv();

});

function showUploadDiv() {

$("#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{

var msg = $.parseJSON(data);

if (msg.code == 200)

{ //如果成功提交

javascript:$.fancybox.close();

$("#uploadUserHead").hide();

var data = 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);

var api, 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');

var bounds = this.getBounds();

boundx = bounds[0];

boundy = bounds[1];

jcrop_api = this;

});

function updatePreview(c) {

if (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('#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"); //用户保存的头像路径

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 = new 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 = new File(item.getName());

File saveTemp = new File(tempSavePath+"/tempImg/");

String getItemName=tempFile.getName();

String fileName = UUID.randomUUID()+"." +getItemName.substring(getItemName.lastIndexOf(".") + 1, getItemName.length());

File saveDir = new File(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("上传头像成功!");

Image image = new Image();

BufferedImage 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+"/tempImg/"+ 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);

}

}

上传成功后，可以看到照片和照片的预览效果。看图：

上传头像之后的效果

Friday, October 05, 2012

第二步：编辑和保存头像

选中图中的区域，保存头像，就完成头像的修改。

修改之后的效果入下：

修改之后的头像(因为传了一张动态图片，得到的跟上图有些不同)

实现细节：

首先用了一个js控件：Jcrop，有兴趣的屌丝可以去搜一下，然后，利用上传之后的图片和之前的选定区域，完成了一个截图，保存为用户的头像。

连接层的js：

$("#saveHead").bind("click", function () {

var width = $("#width").val();

var height = $("#height").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:'json',

success:function (msg) {

if (msg.code == 200) {

$("#avatar").attr("src", msg.object);

forword('/nav', 'index');

}

else {

alert(msg.msg);

}

}

});

});

function checkImg() {

//限制上传文件的大小和后缀名

var filePath = $("input[name='uploadImg']").val();

if (!filePath) {

$("#uploadMsg").html("请选择上传文件!").show();

return false;

}

else {

var extStart = filePath.lastIndexOf(".");

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 =  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 <= 0) {

msg.setMsg("请先登录");

return;

}

// 用户经过剪辑后的图片的大小

Integer x = (int)Float.parseFloat(request.getParameter("x"));

Integer y = (int)Float.parseFloat(request.getParameter("y"));

Integer w = (int)Float.parseFloat(request.getParameter("w"));

Integer h = (int)Float.parseFloat(request.getParameter("h"));

//获取原显示图片路径 和大小

String oldImgPath = request.getParameter("oldImgPath");

Integer width = (int)Float.parseFloat(request.getParameter("width"));

Integer height = (int)Float.parseFloat(request.getParameter("height"));

//图片后缀

String imgFileExt = request.getParameter("fileExt");

String foldName="/"+ DateUtils.nowDatetoStrToMonth()+"/";

String imgName = foldName + UUID.randomUUID()+userName + "." + imgFileExt;

//组装图片真实名称

String createImgPath = savePath + imgName;

//进行剪切图片操作

ImageCut.abscut(oldImgPath,createImgPath, x*width/300, y*height/300, w*width/300, h*height/300);

File f = new File(createImgPath);

if (f.exists()) {

msg.setObject(imgName);

//把显示路径保存到用户信息下面。

UserService userService = userServiceProvider.get();

int rel = userService.updateUserAvatar(userId, showPath+imgName);

if (rel >= 1) {

msg.setCode(200);

msg.setMsg("剪切图片成功!");

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/geren_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坐标

* @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.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 CropImageFilter(x, y, destWidth, destHeight);

img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));

BufferedImage tag = new BufferedImage(destWidth, destHeight, BufferedImage.TYPE_INT_RGB);

Graphics g = tag.getGraphics();

g.drawImage(img, 0, 0, null); // 绘制缩小后的图

g.dispose();

// 输出为文件

ImageIO.write(tag, "JPEG", new File(dirImageFile));

}

} catch (Exception e) {

e.printStackTrace();

}

}

最后一个处理的比较好的地方就是图片的存储路径问题：

我在服务器端的nginx中做了一个图片的地址映射，把图片放到了跟程序不同的路径中，每次存储图片都是存到图片路径中，客户端拿到图片的地址确实经过nginx映射过的地址。

还有就是关于限制上传图片的大小的问题：

我在服务器端显示了资源的最大大小为1M，当上传的资源超过1M，服务器自动报错413，通过异常处理，可以在客户端得到正确的提示信息。

4，总结优点和不足。

关于修改头像，这么做下来确实达到了目的，用户可以从容的修改头像，性能也还可以。但是，上传图片的大小判断是依靠服务器端来判断的，等待的时间比较久，改进的方向是使用flash控件来限制，使用flash来上传，也不会出现弹出层，这样比较大众化，更容易为用户接受一点。我会不断改进。