头像上传和修改

src/main/webapp/WEB-INF/common/_container.html

@@ -165,6 +165,7 @@
     @}
     @}
     @if(array.contain(plugins,"cropper")){
     @if(array.contain(plugins,"cropper")){
     <script src="${ctxPath}/assets/common/plugins/cropper/cropper.min.js"></script>
     <script src="${ctxPath}/assets/common/plugins/cropper/cropper.min.js"></script>
+    <script src="${ctxPath}/assets/common/plugins/cropper/cropper.jquery.min.js"></script>
     @}
     @}
 @}
 @}
 
 

src/main/webapp/assets/common/plugins/cropper/cropper.jquery.min.js

+/*!
+ * jQuery Cropper v1.0.0
+ * https://github.com/fengyuanchen/jquery-cropper
+ *
+ * Copyright (c) 2018 Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2018-04-01T06:20:13.168Z
+ */
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r(e.jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c.fn){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u=void 0;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});
\ No newline at end of file

src/main/webapp/assets/modular/system/user/user_view.js

-/**
- * 用户详情对话框（可用于添加和修改对话框）
- */
-var UserViewPage = {
-    data: {
-        id: "",
-        account: "",
-        sex: "",
-        password: "",
-        rePassword: "",
-        avatar: "",
-        email: "",
-        name: "",
-        birthday: "",
-        deptid: "",
-        deptName: "",
-        phone: ""
-    }
-};
-
-/**
- * 关闭此对话框
- */
-UserViewPage.close = function () {
+$(function () {
+    'use strict';
 
 
-};
+    var console = window.console || { log: function () {} };
+    var URL = window.URL || window.webkitURL;
+    var $image = $('#image');
+    var $download = $('#download');
+    var $dataX = $('#dataX');
+    var $dataY = $('#dataY');
+    var $dataHeight = $('#dataHeight');
+    var $dataWidth = $('#dataWidth');
+    var $dataRotate = $('#dataRotate');
+    var $dataScaleX = $('#dataScaleX');
+    var $dataScaleY = $('#dataScaleY');
+    var options = {
+        aspectRatio: 16 / 9,
+        preview: '.img-preview',
+        crop: function (e) {
+            $dataX.val(Math.round(e.detail.x));
+            $dataY.val(Math.round(e.detail.y));
+            $dataHeight.val(Math.round(e.detail.height));
+            $dataWidth.val(Math.round(e.detail.width));
+            $dataRotate.val(e.detail.rotate);
+            $dataScaleX.val(e.detail.scaleX);
+            $dataScaleY.val(e.detail.scaleY);
+        }
+    };
+    var originalImageURL = $image.attr('src');
+    var uploadedImageName = 'cropped.jpg';
+    var uploadedImageType = 'image/jpeg';
+    var uploadedImageURL;
 
 
-/**
- * 验证表单
- */
-UserViewPage.validateForm = function () {
+    // Tooltip
+    $('[data-toggle="tooltip"]').tooltip();
 
 
-    var data = UserViewPage.data;
+    // Cropper
+    $image.on({
+        ready: function (e) {
+            console.log(e.type);
+        },
+        cropstart: function (e) {
+            console.log(e.type, e.detail.action);
+        },
+        cropmove: function (e) {
+            console.log(e.type, e.detail.action);
+        },
+        cropend: function (e) {
+            console.log(e.type, e.detail.action);
+        },
+        crop: function (e) {
+            console.log(e.type);
+        },
+        zoom: function (e) {
+            console.log(e.type, e.detail.ratio);
+        }
+    }).cropper(options);
 
 
-    if (data.account && data.password && data.name && data.deptid) {
-        return true;
+    // Buttons
+    if (!$.isFunction(document.createElement('canvas').getContext)) {
+        $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
     }
     }
 
 
-    if (!data.account) {
-        return "请输入账号";
-    }
-    if (!(data.password === data.rePassword)) {
-        return "两次密码输入不一致";
-    }
-    if (!data.name) {
-        return "请输入姓名";
+    if (typeof document.createElement('cropper').style.transition === 'undefined') {
+        $('button[data-method="rotate"]').prop('disabled', true);
+        $('button[data-method="scale"]').prop('disabled', true);
     }
     }
-    if (!data.deptid) {
-        return "请选择部门";
+
+    // Download
+    if (typeof $download[0].download === 'undefined') {
+        $download.addClass('disabled');
     }
     }
-};
 
 
-$(function () {
+    // Options
+    $('.docs-toggles').on('change', 'input', function () {
+        var $this = $(this);
+        var name = $this.attr('name');
+        var type = $this.prop('type');
+        var cropBoxData;
+        var canvasData;
 
 
-    var image = document.getElementById('cropperImage');
-    var cropper = new Cropper(image, {
-        aspectRatio: 16 / 9,
-        crop(event) {
-            console.log(event.detail.x);
-            console.log(event.detail.y);
-            console.log(event.detail.width);
-            console.log(event.detail.height);
-            console.log(event.detail.rotate);
-            console.log(event.detail.scaleX);
-            console.log(event.detail.scaleY);
-        },
+        if (!$image.data('cropper')) {
+            return;
+        }
+
+        if (type === 'checkbox') {
+            options[name] = $this.prop('checked');
+            cropBoxData = $image.cropper('getCropBoxData');
+            canvasData = $image.cropper('getCanvasData');
+
+            options.ready = function () {
+                $image.cropper('setCropBoxData', cropBoxData);
+                $image.cropper('setCanvasData', canvasData);
+            };
+        } else if (type === 'radio') {
+            options[name] = $this.val();
+        }
+
+        $image.cropper('destroy').cropper(options);
+    });
+
+    // Methods
+    $('.docs-buttons').on('click', '[data-method]', function () {
+        var $this = $(this);
+        var data = $this.data();
+        var cropper = $image.data('cropper');
+        var cropped;
+        var $target;
+        var result;
+
+        if ($this.prop('disabled') || $this.hasClass('disabled')) {
+            return;
+        }
+
+        if (cropper && data.method) {
+            data = $.extend({}, data); // Clone a new one
+
+            if (typeof data.target !== 'undefined') {
+                $target = $(data.target);
+
+                if (typeof data.option === 'undefined') {
+                    try {
+                        data.option = JSON.parse($target.val());
+                    } catch (e) {
+                        console.log(e.message);
+                    }
+                }
+            }
+
+            cropped = cropper.cropped;
+
+            switch (data.method) {
+                case 'rotate':
+                    if (cropped && options.viewMode > 0) {
+                        $image.cropper('clear');
+                    }
+
+                    break;
+
+                case 'getCroppedCanvas':
+                    if (uploadedImageType === 'image/jpeg') {
+                        if (!data.option) {
+                            data.option = {};
+                        }
+
+                        data.option.fillColor = '#fff';
+                    }
+
+                    break;
+            }
+
+            result = $image.cropper(data.method, data.option, data.secondOption);
+
+            switch (data.method) {
+                case 'rotate':
+                    if (cropped && options.viewMode > 0) {
+                        $image.cropper('crop');
+                    }
+
+                    break;
+
+                case 'scaleX':
+                case 'scaleY':
+                    $(this).data('option', -data.option);
+                    break;
+
+                case 'getCroppedCanvas':
+                    if (result) {
+                        // Bootstrap's Modal
+                        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
+
+                        if (!$download.hasClass('disabled')) {
+                            download.download = uploadedImageName;
+                            $download.attr('href', result.toDataURL(uploadedImageType));
+                        }
+                    }
+
+                    break;
+
+                case 'destroy':
+                    if (uploadedImageURL) {
+                        URL.revokeObjectURL(uploadedImageURL);
+                        uploadedImageURL = '';
+                        $image.attr('src', originalImageURL);
+                    }
+
+                    break;
+            }
+
+            if ($.isPlainObject(result) && $target) {
+                try {
+                    $target.val(JSON.stringify(result));
+                } catch (e) {
+                    console.log(e.message);
+                }
+            }
+        }
     });
     });
+
+    // Keyboard
+    $(document.body).on('keydown', function (e) {
+        if (e.target !== this || !$image.data('cropper') || this.scrollTop > 300) {
+            return;
+        }
+
+        switch (e.which) {
+            case 37:
+                e.preventDefault();
+                $image.cropper('move', -1, 0);
+                break;
+
+            case 38:
+                e.preventDefault();
+                $image.cropper('move', 0, -1);
+                break;
+
+            case 39:
+                e.preventDefault();
+                $image.cropper('move', 1, 0);
+                break;
+
+            case 40:
+                e.preventDefault();
+                $image.cropper('move', 0, 1);
+                break;
+        }
+    });
+
+    // Import image
+    var $inputImage = $('#inputImage');
+
+    if (URL) {
+        $inputImage.change(function () {
+            var files = this.files;
+            var file;
+
+            if (!$image.data('cropper')) {
+                return;
+            }
+
+            if (files && files.length) {
+                file = files[0];
+
+                if (/^image\/\w+$/.test(file.type)) {
+                    uploadedImageName = file.name;
+                    uploadedImageType = file.type;
+
+                    if (uploadedImageURL) {
+                        URL.revokeObjectURL(uploadedImageURL);
+                    }
+
+                    uploadedImageURL = URL.createObjectURL(file);
+                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
+                    $inputImage.val('');
+                } else {
+                    window.alert('Please choose an image file.');
+                }
+            }
+        });
+    } else {
+        $inputImage.prop('disabled', true).parent().addClass('disabled');
+    }
 });
 });