mirror of https://gitee.com/y_project/RuoYi.git
更换图片裁剪工具为cropper
RuoYi
parent
d56d6ac5ac
commit
e7838317d0
|
|
@ -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;}
|
|
||||||
|
|
@ -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);
|
|
||||||
};
|
|
||||||
}));
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
||||||
|
/*!
|
||||||
|
* 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-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{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:.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:.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:.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}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -97,12 +97,12 @@
|
||||||
<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
|
<script th:src="@{/ajax/libs/summernote/summernote-zh-CN.js}"></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- cropbox图像裁剪插件 -->
|
<!-- cropper图像裁剪插件 -->
|
||||||
<div th:fragment="cropbox-css">
|
<div th:fragment="cropper-css">
|
||||||
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
|
<link th:href="@{/ajax/libs/cropper/cropper.min.css}" rel="stylesheet"/>
|
||||||
</div>
|
</div>
|
||||||
<div th:fragment="cropbox-js">
|
<div th:fragment="cropper-js">
|
||||||
<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
|
<script th:src="@{/ajax/libs/cropper/cropper.min.js}"></script>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- jasny功能扩展插件 -->
|
<!-- jasny功能扩展插件 -->
|
||||||
|
|
|
||||||
|
|
@ -2,83 +2,241 @@
|
||||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||||
<head>
|
<head>
|
||||||
<th:block th:include="include :: header('修改用户头像')" />
|
<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>
|
</head>
|
||||||
<body class="white-bg">
|
<body class="white-bg">
|
||||||
<div class="container">
|
<div class="row container">
|
||||||
<div class="imageBox">
|
<div class="col-md-10">
|
||||||
<div class="thumbBox"></div>
|
<div class="imageBox">
|
||||||
<div class="spinner" style="display: none">Loading...</div>
|
<img id="avatar" th:src="(${user.avatar} == '') ? @{/img/profile.jpg} : @{${user.avatar}}" >
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="action">
|
||||||
<div class="new-contentarea tc">
|
<div class="new-contentarea tc">
|
||||||
<a href="javascript:void(0)" class="upload-img"> <label for="avatar">上传图像</label> </a>
|
<a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
|
||||||
<input type="file" class="" name="avatar" id="avatar" accept="image/*"/>
|
<input type="file" name="avatar" id="inputImage" accept="image/*"/>
|
||||||
</div>
|
</div>
|
||||||
<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
|
<button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
|
||||||
<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
|
<button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
|
||||||
<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
|
<button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
|
||||||
</div>
|
<button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
|
||||||
<div class="cropped"></div>
|
<button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
|
||||||
</div>
|
<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 :: footer" />
|
||||||
<th:block th:include="include :: cropbox-js" />
|
<th:block th:include="include :: cropper-js" />
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var cropper;
|
var cropper;
|
||||||
|
var croppable = false;
|
||||||
$(window).load(function() {
|
$(window).load(function() {
|
||||||
var avatar = '[[${user.avatar}]]';
|
var image = document.getElementById('avatar');
|
||||||
var options = {
|
cropper = new Cropper(image, {
|
||||||
thumbBox: '.thumbBox',
|
aspectRatio: 1,
|
||||||
spinner: '.spinner',
|
viewMode: 1,
|
||||||
imgSrc: $.common.isEmpty(avatar) ? ctx + 'img/profile.jpg' : ctx + avatar.substr(1)
|
autoCropArea: 0.9,
|
||||||
}
|
preview: '.img-preview',
|
||||||
cropper = $('.imageBox').cropbox(options);
|
ready: function () {
|
||||||
$('#avatar').on('change', function() {
|
croppable = true;
|
||||||
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(){
|
$('#inputImage').on('change', function() {
|
||||||
cropper.zoomIn();
|
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('请选择一个图片文件。');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$('#btnZoomOut').on('click', function(){
|
$('.btn-custom').on('click',function (e) {
|
||||||
cropper.zoomOut();
|
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() {
|
function submitHandler() {
|
||||||
var img = cropper.getBlob();
|
if(!croppable){
|
||||||
var formdata = new FormData();
|
$.modal.alertWarning("裁剪框加载中,请稍后...");
|
||||||
formdata.append("avatarfile", img);
|
return
|
||||||
$.ajax({
|
}
|
||||||
url: ctx + "system/user/profile/updateAvatar",
|
cropper.getCroppedCanvas().toBlob(function(img){
|
||||||
data: formdata,
|
var formdata = new FormData();
|
||||||
type: "post",
|
formdata.append("avatarfile", img);
|
||||||
processData: false,
|
$.ajax({
|
||||||
contentType: false,
|
url: ctx + "system/user/profile/updateAvatar",
|
||||||
success: function(result) {
|
data: formdata,
|
||||||
$.operate.saveSuccess(result);
|
type: "post",
|
||||||
}
|
processData: false,
|
||||||
})
|
contentType: false,
|
||||||
|
success: function(result) {
|
||||||
|
$.operate.saveSuccess(result);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$(window).resize(function(){
|
||||||
|
$('.imageBox').height($(window).height()-80);
|
||||||
|
}).resize();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -143,7 +143,26 @@
|
||||||
/*用户管理-头像*/
|
/*用户管理-头像*/
|
||||||
function avatar() {
|
function avatar() {
|
||||||
var url = ctx + 'system/user/profile/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;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/*用户信息-修改*/
|
/*用户信息-修改*/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue