头像的裁剪修改(可使用摄像头)与上传服务器(SSM实现)

本文链接：https://blog.csdn.net/wszcy199503/article/details/54861509

在网上有很多类似的头像修改程序，其实里面的一些信息基本都是一致的。都是简单的在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;
}