头像的裁剪修改(可使用摄像头)与上…

在网上有很多类似的头像修改程序，其实里面的一些信息基本都是一致的。都是简单的在jsp界面进行头像的设置。在学习过程中，我试把这些方法使用在SSM中去。

效果：

下载地址：http://download.csdn.net/detail/qq_16553359/9501011

首先需要三个js文件和一些flash文件：

crossdomain.xml //Flash跨域策略配置文件

expressInstall.swf //用于在SWFObject插件中快速安装/升级的flash的插件

fullAvatarEditor.swf //富头像上传编辑器插件的flash文件

upload //默认演示中头像图片文件上传保存的目录

swfobject.js     这个js文件中有很多不清楚的地方

fullAvatarEditor.js

function fullAvatarEditor() {

var id = 'fullAvatarEditor' //flash文件的ID

var file = 'js/fullAvatarEditor.swf'; //flash文件的路径

var version = "10.1.0"; //播放该flash所需的最低版本

var expressInstall = 'js/expressInstall.swf';//expressInstall.swf的路径

var width = 630; //flash文件的宽度

var height = 430; //flash文件的高度

var container = id; //装载flash文件的容器(如div)的id

var flashvars = {};

var callback = function(){};

var heightChanged = false;

//智能获取参数，字符类型为装载flash文件的容器(如div)的id，第一个数字类型的为高度，第二个为宽度，第一个object类型的为参数对象，如此4个参数的顺序可随意。

for(var i = 0; i < arguments.length; i++)

{

if(typeof arguments[i] == 'string')

{

container = arguments[i];

}

else if(typeof arguments[i] == 'number')

{

if(heightChanged)

{

width = arguments[i];

}

else

{

height = arguments[i];

heightChanged = true;

}

}

else if(typeof arguments[i] == 'function')

{

callback = arguments[i];

}

else

{

flashvars = arguments[i];

}

}

var vars = {

id : id

};

//合并参数

for (var name in flashvars)

{

if(flashvars[name] != null)

{

if(name == 'upload_url' || name == 'src_url')

{

vars[name] = encodeURIComponent(flashvars[name]);

}

else

{

vars[name] = flashvars[name];

}

}

}

var params = {

menu : 'true',

scale : 'noScale',

allowFullscreen : 'true',

allowScriptAccess : 'always',

wmode : 'transparent'

};

var attributes = {

id : vars.id,

name: vars.id

};

var swf = null;

var callbackFn = function (e) {

swf = e.ref;

swf.eventHandler = function(json){

callback.call(swf, json);

};

};

swfobject.embedSWF(

file, 

container,

width,

height,

version,

expressInstall,

vars,

params, 

attributes,

callbackFn

);

return swf;

}

imagecut.js

swfobject.addDomLoadEvent(function () {

              var swf = newfullAvatarEditor("swfContainer", {

   id: 'swf',

upload_url: 'user/upload.action',

src_upload:2

}, function (msg) {

switch(msg.code)

{

case 1 :break;

case 2 :break;

case 3 :

if(msg.type == 0)

{

alert("摄像头已准备就绪且用户已允许使用。");

}

else if(msg.type == 1)

{

alert("摄像头已准备就绪但用户未允许使用！");

}

else

{

alert("摄像头被占用！");

}

break;

case 5 : 

if(msg.type == 0)

{

alert("头像已成功保存成功！");

}

break;

}

}

);

document.getElementByIdx_x("upload").onclick=function(){

swf.call("upload");

};

           });

jsp文件：

《div style="float: left;"》

   《divstyle="width:630px;margin: 0 auto;"》

《h1 style="text-align:center"》富头像上传编辑器演示《/h1》

《div》

《p id="swfContainer"》

                 本组件需要安装Flash Player后才可使用，请从《ahref="http://www.adobe.com/go/getflashplayer"》这里《/a》下载安装。

《/p》

《/div》

       《/div》

    《/div》

upload.action：

@RequestMapping("/upload")

public String upload(HttpServletRequest request) throwsException{

String contentType = request.getContentType();

UserImageCustom userImageCustom = new UserImageCustom();

if ( contentType.indexOf("multipart/form-data") >= 0)

{

Result result = new Result();

result.avatarUrls = new ArrayList();

result.success = false;

result.msg = "Failure!";

FileItemFactory factory = new DiskFileItemFactory();

ServletFileUpload upload = newServletFileUpload(factory);

FileItemIterator fileItems =upload.getItemIterator(request);

//定义一个变量用以储存当前头像的序号

int avatarNumber = 1;

//取服务器时间+8位随机码作为部分文件名，确保文件名无重复。

SimpleDateFormat simpleDateFormat = newSimpleDateFormat("yyyyMMddHHmmssS"); 

String fileName = simpleDateFormat.format(new Date());

Random random = new Random();

String randomCode = "";

for ( int i = 0; i < 8; i++ )

{

randomCode += Integer.toString(random.nextInt(36), 36);

}

fileName = fileName + randomCode;

//基于原图的初始化参数

String initParams = "";

BufferedInputStream inputStream;

BufferedOutputStream outputStream;

//遍历表单域

while( fileItems.hasNext() )

{

FileItemStream fileItem = fileItems.next();

String fieldName = fileItem.getFieldName();

//是否是原始图片 file 域的名称（默认的 file域的名称是__source，可在插件配置参数中自定义。参数名：src_field_name）

Boolean isSourcePic = fieldName.equals("__source");

//文件名，如果是本地或网络图片为原始文件名（不含扩展名）、如果是摄像头拍照则为 *FromWebcam

//String name = fileItem.getName();

//当前头像基于原图的初始化参数（即只有上传原图时才会发送该数据），用于修改头像时保证界面的视图跟保存头像时一致，提升用户体验度。

//修改头像时设置默认加载的原图url为当前原图url+该参数即可，可直接附加到原图url中储存，不影响图片呈现。

if ( fieldName.equals("__initParams") )

{

inputStream = newBufferedInputStream(fileItem.openStream());

byte[] bytes = new byte [inputStream.available()];

inputStream.read(bytes); 

initParams = new String(bytes, "UTF-8");

inputStream.close();

}

//如果是原始图片 file 域的名称或者以默认的头像域名称的部分“__avatar”打头

else if ( isSourcePic || fieldName.startsWith("__avatar"))

{

String virtualPath = "/upload/jsp_avatar" + avatarNumber + "_"+ fileName + ".jpg";

//原始图片（默认的 file域的名称是__source，可在插件配置参数中自定义。参数名：src_field_name）。

if( isSourcePic )

{

result.sourceUrl = virtualPath = "/upload/jsp_source_" +fileName + ".jpg";

}

//头像图片（默认的 file域的名称：__avatar1,2,3...，可在插件配置参数中自定义，参数名：avatar_field_names）。

else

{

result.avatarUrls.add(virtualPath);

avatarNumber++;

}

inputStream = newBufferedInputStream(fileItem.openStream());

ServletContext application=request.getServletContext();

outputStream = new BufferedOutputStream(newFileOutputStream(application.getRealPath("/") +virtualPath.replace("/", "\\")));

Streams.copy(inputStream, outputStream, true);

inputStream.close();

         outputStream.flush();

         outputStream.close();

}

}

if ( result.sourceUrl != null )

{

result.sourceUrl += initParams;

}

result.success = true;

result.msg = "Success!";

userImageCustom.setImage(result.sourceUrl);

userImageCustom.setImage1(result.avatarUrls.get(0).toString());

userImageCustom.setImage2(result.avatarUrls.get(1).toString());

userImageCustom.setImage3(result.avatarUrls.get(2).toString());

UserCustom userCustom = (UserCustom)request.getSession().getAttribute("userCustom");

userImageCustom.setUid(userCustom.getUid());

userService.updateUserImage(userImageCustom);

userCustom =userService.findUserByUid(userCustom.getUid());

request.getSession().setAttribute("userCustom",userCustom);

if(result.avatarUrls.size() > 0){

request.getSession().setAttribute("success", "success");

}

}

return "/jsp/index";

}

result类：

public class Result {

public Boolean success;

public String msg;

public String sourceUrl;

public ArrayList avatarUrls;

}