springMVC 头像裁剪上传并等比压

define(function() {
	return {
		timers : [],
		closeImg : {
			before : "",
			after : ""
		},
		loading : "",
		fileImg : "",
		// 获取预览元素
		getElementObject : function(elem) {
			if (elem.nodeType && elem.nodeType === 1) {
				return elem;
			} else {
				return document.getElementById(elem);
			}
		},
		// 開始图片预览
		beginPerview : function(/* 文件上传控件实例 */file, /* 须要显示的元素id或元素实例 */
				perviewElemId,/* 上传页面所在的document对象 */dcmt,/* 文件后缀名 */fileSuf) {
			var imgSufs = ",jpg,jpeg,bmp,png,gif,";
			var isImage = imgSufs.indexOf("," + fileSuf.toLowerCase() + ",") > -1;// 检查是否为图片

			if (isImage) {
				this.imageOperation(file, perviewElemId, dcmt);
			} else {
				this.fileOperation(perviewElemId, fileSuf);
			}
		},
		// 一般文件显示操作
		fileOperation : function(/* 须要显示的元素id或元素实例 */perviewElemId,/* 文件后缀名 */
				fileSuf) {
			var that=this;
			var preview_div = this.getElementObject(perviewElemId);

			var MAXWIDTH = preview_div.clientWidth;
			var MAXHEIGHT = preview_div.clientHeight;
			var img = document.createElement("img");
			preview_div.appendChild(img);
			img.style.visibility = "hidden";
			img.src = this.fileImg;
			img.onload = function() {
				var rect = that.clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
						img.offsetWidth, img.offsetHeight);
				img.style.width = rect.width + 'px';
				img.style.height = rect.height + 'px';
				img.style.marginLeft = rect.left + 'px';
				img.style.marginTop = rect.top + 'px';
				img.style.visibility = "visible";
			}
			var txtTop = 0 - (MAXHEIGHT * 2 / 3);
			$(
					'<div style="text-align:center; position:relative; z-index:100; color:#404040;font: 13px/27px Arial,sans-serif;"></div>')
					.text(fileSuf + "文件").css("top", txtTop + "px").appendTo(
							preview_div);

		},
		// 图片预览操作
		imageOperation : function(/* 文件上传控件实例 */file, /* 须要显示的元素id或元素实例 */
				perviewElemId,/* 上传页面所在的document对象 */dcmt) {
			var that=this;
			for (var t = 0; t < this.timers.length; t++) {
				window.clearInterval(this.timers[t]);
			}
			this.timers.length = 0;

			var preview_div = this.getElementObject(perviewElemId);

			var MAXWIDTH = preview_div.clientWidth;
			var MAXHEIGHT = preview_div.clientHeight;

			if (file.files && file.files[0]) { // 此处为Firefox。Chrome以及IE10的操作
				preview_div.innerHTML = "";
				var img = document.createElement("img");
				preview_div.appendChild(img);
				img.style.visibility = "hidden";
				img.onload = function() {
					var rect = that.clacImgZoomParam(MAXWIDTH,
							MAXHEIGHT, img.offsetWidth, img.offsetHeight);
					img.style.width = rect.width + 'px';
					img.style.height = rect.height + 'px';
					img.style.marginLeft = rect.left + 'px';
					img.style.marginTop = rect.top + 'px';
					img.style.visibility = "visible";
				}
				if(file.isURL){
					img.src=file.files[0];
					return false;
				}
				var reader = new FileReader();
				reader.onload = function(evt) {
					img.src = evt.target.result;
				}
				reader.readAsDataURL(file.files[0]);
			} else {// 此处为IE6，7。8，9的操作
				file.select();
				file.blur();
				var src = dcmt.selection.createRange().text;
				var div_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='"
						+ src + "')";
				var img_sFilter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src='"
						+ src + "')";

				preview_div.innerHTML = "";
				var img = document.createElement("div");
				preview_div.appendChild(img);
				img.style.filter = img_sFilter;
				img.style.visibility = "hidden";
				img.style.width = "100%";
				img.style.height = "100%";

				function setImageDisplay() {
					var rect = that.clacImgZoomParam(MAXWIDTH,
							MAXHEIGHT, img.offsetWidth, img.offsetHeight);
					preview_div.innerHTML = "";
					var div = document.createElement("div");
					div.style.width = rect.width + 'px';
					div.style.height = rect.height + 'px';
					div.style.marginLeft = rect.left + 'px';
					div.style.marginTop = rect.top + 'px';
					div.style.filter = div_sFilter;

					preview_div.appendChild(div);
				}

				// 图片载入计数
				var tally = 0;

				var timer = window.setInterval(function() {
					if (img.offsetHeight != MAXHEIGHT) {
						window.clearInterval(timer);
						setImageDisplay();
					} else {
						tally++;
					}
					// 假设超过两秒钟图片还不能载入，就停止当前的轮询
					if (tally > 20) {
						window.clearInterval(timer);
						setImageDisplay();
					}
				}, 100);

				this.timers.push(timer);
			}
		},
		// 按比例缩放图片
		clacImgZoomParam : function(maxWidth, maxHeight, width, height) {
			var param = {
				width : width,
				height : height
			};
			if (width > maxWidth || height > maxHeight) {
				var rateWidth = width / maxWidth;
				var rateHeight = height / maxHeight;

				if (rateWidth > rateHeight) {
					param.width = maxWidth;
					param.height = Math.round(height / rateWidth);
				} else {
					param.width = Math.round(width / rateHeight);
					param.height = maxHeight;
				}
			}

			param.left = Math.round((maxWidth - param.width) / 2);
			param.top = Math.round((maxHeight - param.height) / 2);
			return param;
		},
		// 创建图片预览元素
		createPreviewElement : function(/* 关闭图片名称 */name,/* 上传时的文件名称 */file, /* 预览时的样式 */
				style) {
			var img = document.createElement("div");
			img.title = file;
			img.style.overflow = "hidden";
			for ( var s in style) {
				img.style[s] = style[s];
			}

			var text = document.createElement("div");
			text.style.width = style.width;
			text.style.overflow = "hidden";
			text.style.textOverflow = "ellipsis";
			text.style.whiteSpace = "nowrap";
			text.innerHTML = file;

			var top = 0 - window.parseInt(style.width) - 15;
			var right = 0 - window.parseInt(style.width) + 14;
			var close = document.createElement("img");
			close.setAttribute("name", name);
			close.src = this.closeImg.before;
			close.style.position = "relative";
			close.style.top = top + "px";
			close.style.right = right + "px";
			close.style.cursor = "pointer";

			var loadtop = (0 - window.parseInt(style.height)) / 2 - 26;
			var loadright = (0 - window.parseInt(style.width)) / 2 + 22;
			var imgloading = document.createElement("img");
			imgloading.src = this.loading;
			imgloading.style.position = "relative";
			imgloading.style.top = loadtop + "px";
			imgloading.style.right = loadright + "px";
			imgloading.style.display = "none";

			var main = document.createElement("div");
			main.appendChild(img);
			main.appendChild(text);
			main.appendChild(close);
			main.appendChild(imgloading);
			return main;
		},

		// 获取预览区域
		getPerviewRegion : function(elem) {
			var perview = $(this.getElementObject(elem));
			if (!perview.find("ul").length) {
				var ul = document.createElement("ul");
				ul.style.listStyleType = "none";
				ul.style.margin = "0px";
				ul.style.padding = "0px";

				var div = document.createElement("div");
				div.style.clear = "both";
				perview.append(ul).append(div);
				return ul;
			} else {
				return perview.children("ul").get(0);
			}
		},
		// 获取上传文件大小
		getFileSize : function(/* 上传控件dom对象 */file, /* 上传控件所在的document对象 */
				dcmt) {
			var fileSize;
			if (file.files && file.files[0]) {
				fileSize = file.files[0].size;
			} else {
				file.select();
				var src = dcmt.selection.createRange().text;
				try {
					var fso = new ActiveXObject("Scripting.FileSystemObject");
					var fileObj = fso.getFile(src);
					fileSize = fileObj.size;
				} catch (e) {
					return "error";
				}
			}
			fileSize = ((fileSize / 1024) + "").split(".")[0];
			return fileSize;
		}
	}
});

<script type="text/html" id="upload_photo_tml">
<div class="upload-photo">
	<div class="photo-lg-pre pre-img">
		<div class="img-border" id="img-border">

		</div>
	</div>
	<div class="photo-up-op">
		<div class="photo-sm-pre" id="preview-pane">
			<img src="${imgPath}header-img2.png" class="headimg-top" />
			<div class="preview-container">
			
			</div>
		</div>
		<div class="photo-up-btn" align="center">
			<input type="file" name="userPhoto" id="userPhoto" /> 
			<span class="file-button" id="upload-file-btn" data-id="userPhoto">选择图片</span>
		</div>
	</div>
</div>
</script>

$(document).on("click","#headImage",function(){
var index=layer.confirm($("#upload_photo_tml").html(), {
       title:"上传头像",
          btn: ['确定','取消'] //button
      }, function(){
       if(opts.selectData.w==undefined)
        return false;
       //确定上传 type 为1 
       opts.uploadType=1;
       var data={
         type:opts.uploadType,
         x:opts.selectData.x,
         y:opts.selectData.y,
         width:opts.selectData.w,
         height:opts.selectData.h
       };
       if(opts.uploadData!=null){
        data.paramString=encodeURI(JSON.stringify(opts.uploadData));
       }
       ajaxfileupload.ajaxFileUpload({
                          url: opts.uploadPhotoURL,
                          type: 'post',
                          secureuri: false,
                          // 一般设置为false
                          data: data,
                          fileElementId: "userPhoto",
                          // 上传文件的id、name属性名
                          dataType: 'json',
                          // 返回值类型，一般设置为json、application/json
                          success: function(data, status) {
                           if(data.responseCode&&data.responseCode==200){
                            $(opts.userHeadPhoto).attr("src",adminBasePath+data.fileURL+data.fileName);
                            layer.alert("上传成功!",{icon:1});
                           }else{
                            layer.alert("上传失败!",{icon:2});
                           }
                          },
                          error: function(data, status, e) {
                              console.log(e);
                          }
                      });
      });
     });
     $(document).on("change",'#userPhoto',function(e) {
      //假设仅仅是预览 type为0
      opts.uploadType=0;
      $(".preview-container").html("");
      var data={
        type:opts.uploadType,
        x:0,
        y:0,
        width:0,
        height:0
      };
      if(opts.uploadData!=null){
       data.paramString=encodeURI(JSON.stringify(opts.uploadData));
      }
      var loadingIndex=layer.load(0, {shade: false});
      var userPhotoHTML=$("#userPhoto").prop("outerHTML");
      ajaxfileupload.ajaxFileUpload({
                         url: opts.uploadPhotoURL,
                         type: 'post',
                         secureuri: false,
                         // 一般设置为false
                         data: data,
                         fileElementId: "userPhoto",
                         // 上传文件的id、name属性名
                         dataType: 'json',
                         // 返回值类型，一般设置为json、application/json
                         success: function(data, status) {
                          opts.uploadType=1;
                          opts.uploadData=data;
                          perviewImage.imageOperation({files:[adminBasePath+data.fileURL+data.fileName+"?date="+ (new Date()).getTime()],isURL:true},"img-border",document);
                          layer.close(loadingIndex);
                          if(opts.jcrop_api!=null)
            opts.jcrop_api.destroy();
            opts.xsize = $(opts.pcnt).width();
            opts.ysize = $(opts.pcnt).height();
           $('#img-border>img').Jcrop({
              bgColor: "#ffffff",
                 onChange: that._updatePreview,
                 onSelect: that._updatePreview,
                 aspectRatio: opts.xsize / opts.ysize
              },function(){
// var _w=$(".jcrop-holder>img").width(),
// _h=$(".jcrop-holder>img").height(),
// _wh=0;
// if(_w>=_h)
// _wh=_w;
// else
// _wh=_h;
                 var bounds = this.getBounds();
                 opts.boundx = bounds[0];
                 opts.boundy = bounds[1];
                 opts.jcrop_api = this;
                 //opts.jcrop_api.setSelect([0,0,_wh,_wh]);
                 $(".preview-container").html($("#img-border").html());
                 $(".photo-up-btn").prepend(userPhotoHTML);
      });
         },
                 error: function(data, status, e) {
                             console.log(e);
                  }
      });
});
//绘制选框
that._updatePreview = function(c) {
var opts=that.opts;
opts.selectData=c;
if (parseInt(c.w) > 0) {
var rx = opts.xsize / c.w;
var ry = opts.ysize / c.h;
$(opts.pimg).css({
width : Math.round(rx * opts.boundx) + 'px',
height : Math.round(ry * opts.boundy) + 'px',
marginLeft : '-' + Math.round(rx * c.x) + 'px',
marginTop : '-' + Math.round(ry * c.y) + 'px'
});
}
};