更换图片裁剪工具为cropper

ruoyi-admin/src/main/resources/static/ajax/libs/cropbox/cropbox.css

@@ -1,127 +0,0 @@
-@charset "utf-8";
-.container {
-	margin: 10px auto 0 auto;
-	position: relative;
-	font-family: 微软雅黑;
-	font-size: 12px;
-}
-.container p {
-	line-height: 12px;
-	line-height: 0px;
-	height: 0px;
-	margin: 10px;
-	color: #bbb
-}
-.action {
-	width: 400px;
-	height: 30px;
-	margin: 10px 0;
-}
-.cropped {
-	position: absolute;
-	left: 500px;
-	top: 0;
-	width: 200px;
-	border: 1px #ddd solid;
-	height: 450px;
-	padding: 4px;
-	box-shadow: 0px 0px 12px #ddd;
-	text-align: center;
-}
-.imageBox {
-	position: relative;
-	height: 400px;
-	width: 400px;
-	border: 1px solid #aaa;
-	background: #fff;
-	overflow: hidden;
-	background-repeat: no-repeat;
-	cursor: move;
-	box-shadow: 4px 4px 12px #B0B0B0; 
-}
-.imageBox .thumbBox {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 200px;
-	height: 200px;
-	margin-top: -100px;
-	margin-left: -100px;
-	box-sizing: border-box;
-	border: 1px solid rgb(102, 102, 102);
-	box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
-	background: none repeat scroll 0% 0% transparent;
-}
-.imageBox .spinner {
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	text-align: center;
-	line-height: 400px;
-	background: rgba(0,0,0,0.7);
-}
-.Btnsty_peyton{ float: right;
-  width: 46px;
-  display: inline-block;
-  margin-bottom: 10px;
-  height: 37px;
-  line-height: 37px;
-  font-size: 14px;
-  color: #FFFFFF;
-  margin:0px 2px;
-  background-color: #f38e81;
-  border-radius: 3px;
-  text-decoration: none;
-  cursor: pointer;
-  box-shadow: 0px 0px 5px #B0B0B0;
-  border: 0px #fff solid;}
-/*选择文件上传*/
-.new-contentarea {
-	width: 165px;
-	overflow:hidden;
-	margin: 0 auto;
-	position:relative;float:left;
-}
-.new-contentarea label {
-	width:100%;
-	height:100%;
-	display:block;
-}
-.new-contentarea input[type=file] {
-	width:188px;
-	height:60px;
-	background:#333;
-	margin: 0 auto;
-	position:absolute;
-	right:50%;
-	margin-right:-94px;
-	top:0;
-	right/*\**/:0px\9;
-	margin-right/*\**/:0px\9;
-	width/*\**/:10px\9;
-	opacity:0;
-	filter:alpha(opacity=0);
-	z-index:2;
-}
-a.upload-img{
-	width:165px;
-	display: inline-block;
-	margin-bottom: 10px;
-	height:37px;
-	line-height: 37px;
-	font-size: 14px;
-	color: #FFFFFF;
-	background-color: #f38e81;
-	border-radius: 3px;
-	text-decoration:none;
-	cursor:pointer;
-	border: 0px #fff solid;
-	box-shadow: 0px 0px 5px #B0B0B0;
-}
-a.upload-img:hover{
-	background-color: #ec7e70;
-}
-
-.tc{text-align:center;}

ruoyi-admin/src/main/resources/static/ajax/libs/cropbox/cropbox.js

@@ -1,136 +0,0 @@
-"use strict";
-(function (factory) {
-    if (typeof define === 'function' && define.amd) {
-        define(['jquery'], factory);
-    } else {
-        factory(jQuery);
-    }
-}(function ($) {
-    var cropbox = function(options, el){
-        var el = el || $(options.imageBox),
-            obj =
-            {
-                state : {},
-                ratio : 1,
-                options : options,
-                imageBox : el,
-                thumbBox : el.find(options.thumbBox),
-                spinner : el.find(options.spinner),
-                image : new Image(),
-                getDataURL: function ()
-                {
-                    var width = this.thumbBox.width(),
-                        height = this.thumbBox.height(),
-                        canvas = document.createElement("canvas"),
-                        dim = el.css('background-position').split(' '),
-                        size = el.css('background-size').split(' '),
-                        dx = parseInt(dim[0]) - el.width()/2 + width/2,
-                        dy = parseInt(dim[1]) - el.height()/2 + height/2,
-                        dw = parseInt(size[0]),
-                        dh = parseInt(size[1]),
-                        sh = parseInt(this.image.height),
-                        sw = parseInt(this.image.width);
-
-                    canvas.width = width;
-                    canvas.height = height;
-                    var context = canvas.getContext("2d");
-                    context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
-                    var imageData = canvas.toDataURL('image/png');
-                    return imageData;
-                },
-                getBlob: function()
-                {
-                    var imageData = this.getDataURL();
-                    var b64 = imageData.replace('data:image/png;base64,','');
-                    var binary = atob(b64);
-                    var array = [];
-                    for (var i = 0; i < binary.length; i++) {
-                        array.push(binary.charCodeAt(i));
-                    }
-                    return  new Blob([new Uint8Array(array)], {type: 'image/png'});
-                },
-                zoomIn: function ()
-                {
-                    this.ratio*=1.1;
-                    setBackground();
-                },
-                zoomOut: function ()
-                {
-                    this.ratio*=0.9;
-                    setBackground();
-                }
-            },
-            setBackground = function()
-            {
-                var w =  parseInt(obj.image.width)*obj.ratio;
-                var h =  parseInt(obj.image.height)*obj.ratio;
-
-                var pw = (el.width() - w) / 2;
-                var ph = (el.height() - h) / 2;
-
-                el.css({
-                    'background-image': 'url(' + obj.image.src + ')',
-                    'background-size': w +'px ' + h + 'px',
-                    'background-position': pw + 'px ' + ph + 'px',
-                    'background-repeat': 'no-repeat'});
-            },
-            imgMouseDown = function(e)
-            {
-                e.stopImmediatePropagation();
-
-                obj.state.dragable = true;
-                obj.state.mouseX = e.clientX;
-                obj.state.mouseY = e.clientY;
-            },
-            imgMouseMove = function(e)
-            {
-                e.stopImmediatePropagation();
-
-                if (obj.state.dragable)
-                {
-                    var x = e.clientX - obj.state.mouseX;
-                    var y = e.clientY - obj.state.mouseY;
-
-                    var bg = el.css('background-position').split(' ');
-
-                    var bgX = x + parseInt(bg[0]);
-                    var bgY = y + parseInt(bg[1]);
-
-                    el.css('background-position', bgX +'px ' + bgY + 'px');
-
-                    obj.state.mouseX = e.clientX;
-                    obj.state.mouseY = e.clientY;
-                }
-            },
-            imgMouseUp = function(e)
-            {
-                e.stopImmediatePropagation();
-                obj.state.dragable = false;
-            },
-            zoomImage = function(e)
-            {
-                e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0 ? obj.ratio*=1.1 : obj.ratio*=0.9;
-                setBackground();
-            }
-
-        obj.spinner.show();
-        obj.image.onload = function() {
-            obj.spinner.hide();
-            setBackground();
-
-            el.bind('mousedown', imgMouseDown);
-            el.bind('mousemove', imgMouseMove);
-            $(window).bind('mouseup', imgMouseUp);
-            el.bind('mousewheel DOMMouseScroll', zoomImage);
-        };
-        obj.image.crossOrigin = 'Anonymous';
-        obj.image.src = options.imgSrc;
-        el.on('remove', function(){$(window).unbind('mouseup', imgMouseUp)});
-
-        return obj;
-    };
-
-    jQuery.fn.cropbox = function(options){
-        return new cropbox(options, this);
-    };
-}));

ruoyi-admin/src/main/resources/static/ajax/libs/cropper/cropper.css

@@ -0,0 +1,304 @@
+/*!
+ * Cropper.js v1.5.7
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2020-05-23T05:22:57.283Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}

ruoyi-admin/src/main/resources/templates/include.html

@@ -97,12 +97,12 @@
 	<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
 </div>
 
-<!-- cropbox图像裁剪插件 -->
-<div th:fragment="cropbox-css">
-    <link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
+<!-- cropper图像裁剪插件 -->
+<div th:fragment="cropper-css">
+    <link th:href="@{/ajax/libs/cropper/cropper.min.css}" rel="stylesheet"/>
 </div>
-<div th:fragment="cropbox-js">
-    <script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
+<div th:fragment="cropper-js">
+    <script th:src="@{/ajax/libs/cropper/cropper.min.js}"></script>
 </div>
 
 <!-- jasny功能扩展插件 -->

ruoyi-admin/src/main/resources/templates/system/user/profile/avatar.html

@@ -2,83 +2,241 @@
 <html lang="zh" xmlns:th="http://www.thymeleaf.org" >
 <head>
 	<th:block th:include="include :: header('修改用户头像')" />
-	<th:block th:include="include :: cropbox-css" />
+	<th:block th:include="include :: cropper-css" />
+	<style type='text/css'>
+	/* avator css start */
+	.container {
+		margin: 10px 5px 5px 5px;
+	}
+	
+	.action {
+		padding: 5px 0px;
+	}
+	
+	.cropped {
+		width: 200px;
+		height: 345px;
+		border: 1px #ddd solid;
+		box-shadow: 0px 0px 12px #ddd;
+	}
+	
+	.img-preview {
+		border-radius: 50%;
+		box-shadow: 0px 0px 12px #7e7e7e;
+		display: inline-block;
+	}
+	
+	.preview-box {
+		text-align: center;
+		margin: 0px auto;
+		margin-top: 10px;
+		color: #bbb;
+	}
+	
+	.preview-md {
+		width: 128px;
+		height: 128px;
+	}
+	
+	.preview-sm {
+		width: 96px;
+		height: 96px;
+	}
+	
+	.preview-xs {
+		width: 64px;
+		height: 64px;
+	}
+	
+	.imageBox {
+		border: 1px solid #aaa;
+		overflow: hidden;
+		cursor: move;
+		box-shadow: 4px 4px 12px #B0B0B0;
+		margin: 0px auto;
+	}
+	
+	.btn-custom {
+		float: right;
+		width: 46px;
+		display: inline-block;
+		margin-bottom: 10px;
+		height: 37px;
+		line-height: 37px;
+		font-size: 14px;
+		color: #FFFFFF;
+		margin: 0px 2px;
+		background-color: #f38e81;
+		border-radius: 3px;
+		text-decoration: none;
+		cursor: pointer;
+		box-shadow: 0px 0px 5px #B0B0B0;
+		border: 0px #fff solid;
+	}
+    /*选择文件上传*/
+	.new-contentarea {
+		width: 165px;
+		overflow: hidden;
+		margin: 0 auto;
+		position: relative;
+		float: left;
+	}
+	
+	.new-contentarea label {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+	
+	.new-contentarea input[type=file] {
+		width: 188px;
+		height: 60px;
+		background: #333;
+		margin: 0 auto;
+		position: absolute;
+		right: 50%;
+		margin-right: -94px;
+		top: 0;
+		right/*\**/: 0px\9;
+		margin-right/*\**/: 0px\9;
+		width/*\**/: 10px\9;
+		opacity: 0;
+		filter: alpha(opacity=0);
+		z-index: 2;
+	}
+	
+	a.upload-img {
+		width: 165px;
+		display: inline-block;
+		margin-bottom: 10px;
+		height: 37px;
+		line-height: 37px;
+		font-size: 14px;
+		color: #FFFFFF;
+		background-color: #f38e81;
+		border-radius: 3px;
+		text-decoration: none;
+		cursor: pointer;
+		border: 0px #fff solid;
+		box-shadow: 0px 0px 5px #B0B0B0;
+	}
+	
+	a.upload-img:hover {
+		background-color: #ec7e70;
+	}
+	
+	.tc {
+		text-align: center;
+	}
+    /* avator css end */
+	</style>
 </head>
 <body class="white-bg">
-    <div class="container"> 
-        <div class="imageBox"> 
-	        <div class="thumbBox"></div> 
-	        <div class="spinner" style="display: none">Loading...</div> 
-	   </div> 
-	   <div class="action"> 
-	       <div class="new-contentarea tc">
-	           <a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a> 
-	           <input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
-	       </div> 
-	   <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" /> 
-	   <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" /> 
-	   <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" /> 
-	   </div> 
-	   <div class="cropped"></div> 
-    </div>
+	<div class="row container">
+		<div class="col-md-10">
+			<div class="imageBox">
+				<img id="avatar" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" >
+			</div>
+			<div class="action">
+				<div class="new-contentarea tc">
+					<a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
+					<input type="file" name="avatar" id="inputImage" accept="image/*"/>
+				</div>
+				<button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
+				<button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
+				<button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
+				<button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
+				<button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
+				<button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
+				<button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
+			</div>
+		</div>
+		<div class="col-md-2">
+			<div class="cropped">
+				<div class="preview-box">
+					<div class="img-preview preview-xs"></div>
+				</div>
+				<div class="preview-box">
+					<div class="img-preview preview-sm"></div>
+				</div>
+				<div class="preview-box">
+					<div class="img-preview preview-md"></div>
+				</div>
+			</div>
+		</div>
+	</div>
 <th:block th:include="include :: footer" />
-<th:block th:include="include :: cropbox-js" />
+<th:block th:include="include :: cropper-js" />
 <script type="text/javascript">
 var cropper;
+var croppable = false;
 $(window).load(function() {
-	var avatar = '[[${user.avatar}]]';
-    var options = {
-        thumbBox: '.thumbBox',
-        spinner: '.spinner',
-        imgSrc: $.common.isEmpty(avatar) ? ctx + 'img/profile.jpg' : ctx + avatar.substr(1)
-    }
-    cropper = $('.imageBox').cropbox(options);
-    $('#avatar').on('change', function() {
-        var reader = new FileReader();
-        reader.onload = function(e) {
-            options.imgSrc = e.target.result;
-            //根据MIME判断上传的文件是不是图片类型
-            if((options.imgSrc).indexOf("image/")==-1){
-                $.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
-            } else {
-                cropper = $('.imageBox').cropbox(options);
-            }
-        }
-        reader.readAsDataURL(this.files[0]);
-    })
-    
-	$('#btnCrop').on('click', function(){
-		var img = cropper.getDataURL();
-		$('.cropped').html('');
-		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:64px;margin-top:4px;border-radius:64px;box-shadow:0px 0px 12px #7E7E7E;" ><p>64px*64px</p>');
-		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:128px;margin-top:4px;border-radius:128px;box-shadow:0px 0px 12px #7E7E7E;"><p>128px*128px</p>');
-		$('.cropped').append('<img src="'+img+'" align="absmiddle" style="width:180px;margin-top:4px;border-radius:180px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
-	})
-	
-	$('#btnZoomIn').on('click', function(){
-		cropper.zoomIn();
+	var image = document.getElementById('avatar');
+	cropper = new Cropper(image, {
+		aspectRatio: 1,
+		viewMode: 1,
+		autoCropArea: 0.9,
+		preview: '.img-preview',
+		ready: function () {
+			croppable = true;
+		}
 	})
-	
-	$('#btnZoomOut').on('click', function(){
-		cropper.zoomOut();
+
+	$('#inputImage').on('change', function() {
+		var reader = new FileReader();
+		var file = $('#inputImage')[0].files[0];
+		if (/^image\/\w+$/.test(file.type)) {
+			reader.onload = function(e) {
+				if(croppable){
+					cropper.replace(e.target.result)
+				}
+			}
+			reader.readAsDataURL(this.files[0]);
+		} else {
+			$.modal.alertWarning('请选择一个图片文件。');
+		}
+	});
+
+	$('.btn-custom').on('click',function (e) {
+		if (!croppable) {
+			$.modal.alertWarning("裁剪框加载中,请稍后...");
+			return;
+		}
+		var data = {
+			method: $(this).data('method'),
+			option: $(this).data('option') || undefined,
+		};
+		var result = cropper[data.method](data.option, data.secondOption);
+		if(['scaleX','scaleY'].indexOf(data.method) !== -1){
+			$(this).data('option', -data.option)
+		}
 	})
 });
 
 function submitHandler() {
-    var img = cropper.getBlob();
-    var formdata = new FormData();
-    formdata.append("avatarfile", img);
-    $.ajax({
-        url: ctx + "system/user/profile/updateAvatar",
-        data: formdata,
-        type: "post",
-        processData: false,
-        contentType: false,
-        success: function(result) {
-        	$.operate.saveSuccess(result);
-        }
-    })
+	if(!croppable){
+		$.modal.alertWarning("裁剪框加载中,请稍后...");
+		return
+	}
+    cropper.getCroppedCanvas().toBlob(function(img){
+		var formdata = new FormData();
+		formdata.append("avatarfile", img);
+		$.ajax({
+			url: ctx + "system/user/profile/updateAvatar",
+			data: formdata,
+			type: "post",
+			processData: false,
+			contentType: false,
+			success: function(result) {
+				$.operate.saveSuccess(result);
+			}
+		})
+	});
 }
+
+$(window).resize(function(){
+	$('.imageBox').height($(window).height()-80);
+}).resize();
 </script>
 </body>
 </html>

ruoyi-admin/src/main/resources/templates/system/user/profile/profile.html

@@ -143,9 +143,28 @@
 	    /*用户管理-头像*/
 	    function avatar() {
 	        var url = ctx + 'system/user/profile/avatar';
-	        $.modal.open("修改头像", url);
+	        top.layer.open({
+        		type: 2,
+        		area: [$(window).width() + 'px', $(window).height() + 'px'],
+        		fix: false,
+        		//不固定
+        		maxmin: true,
+        		shade: 0.3,
+        		title: "修改头像",
+        		content: url,
+        		btn: ['确定', '关闭'],
+        	    // 弹层外区域关闭
+        		shadeClose: true,
+        		yes: function(index, layero) {
+                    var iframeWin = layero.find('iframe')[0];
+                    iframeWin.contentWindow.submitHandler(index, layero);
+                },
+        	    cancel: function(index) {
+        	        return true;
+        	    }
+        	});
 	    }
-	    
+
 	    /*用户信息-修改*/
 	    $("#form-user-edit").validate({
 			onkeyup: false,