174 lines
6.6 KiB
HTML
174 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
<head>
|
|
<base th:href="${#request.getContextPath() + '/'} ">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta charset="UTF-8"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/bootstrap/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" type="text/css" href="assets/js/vendor/cropper/cropper.min.css"/>
|
|
<style>
|
|
.upload-image {height: 100%; opacity: 0;}
|
|
.upload-image-preview {width: 200px;height: 200px;overflow: hidden;margin: 0 20px;display: inline-block;}
|
|
#imageBox {height: 418px;overflow: auto;background-color: #F1F1F1;}
|
|
#imagePreviewBox .upload-image-preview {background-color: #F1F1F1;}
|
|
</style>
|
|
</head>
|
|
<div>
|
|
<div id="content" class="edit-content" style="padding: 5px; opacity: 0;">
|
|
<div id="imageBox" class="col-xs-8">
|
|
<img id="image" class="upload-image" src="assets/images/profile-photo.jpg" th:if="${fileId eq null or fileId eq ''}">
|
|
<img id="image" class="upload-image" th:src="${'route/file/download/false/'+ fileId}" th:if="${fileId ne null and fileId ne ''}">
|
|
</div>
|
|
<div id="imagePreviewBox" class="col-xs-4">
|
|
<div class="upload-image-preview"></div>
|
|
</div>
|
|
<div class="col-xs-4" style="text-align: center;">
|
|
<button id="dragBtn" type="button" class="btn btn-danger fa fa-arrows" onclick="dragImage()" title="移动"></button>
|
|
<button type="button" class="btn btn-danger fa fa-search-plus" onclick="zoomPlus()" title="放大图片"></button>
|
|
<button type="button" class="btn btn-danger fa fa-search-minus" onclick="zoomMinus()" title="缩小图片"></button>
|
|
<button type="button" class="btn btn-danger fa fa-refresh" onclick="reset()" title="重置图片"></button>
|
|
</div>
|
|
<div class="col-xs-4" style="margin-top: 5px; text-align: center;">
|
|
<div class="btn-group">
|
|
<button class="btn btn-danger fa fa-undo" onclick="rateLeft()" type="button" title="向左旋转90°"> 向左旋转
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-danger fa fa-repeat" onclick="rateRight()" type="button" title="向右旋转90°"> 向右旋转
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-4" style="margin-top: 5px; text-align: center;">
|
|
<div class="btn-group">
|
|
<form id="uploadFileForm" action="#" style="display: none;">
|
|
<input type="file" id="uploadImage" name="image" accept="image/jpeg,image/gif,image/png,image/jpg"
|
|
onchange="doUploadFile()"/>
|
|
</form>
|
|
<button class="btn btn-primary btn-block fa fa-upload" type="button" onclick="openUploadImage()"> 上传图片
|
|
</button>
|
|
</div>
|
|
<div class="btn-group">
|
|
<button class="btn btn-primary btn-block fa fa-save" type="button" onclick="doCrop()"> 裁剪上传</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="assets/js/jquery-3.5.1.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/vendor/cropper/cropper.min.js"></script>
|
|
<script type="text/javascript" src="assets/js/common.js"></script>
|
|
<script type="text/javascript">
|
|
var fileArray = [];
|
|
|
|
function closeBox() {
|
|
top.dialog.closeBox();
|
|
}
|
|
|
|
function doSubmitForm() {
|
|
return false;
|
|
}
|
|
|
|
var cropper;
|
|
|
|
// 放大
|
|
function zoomPlus() {
|
|
cropper.zoom(0.1);
|
|
}
|
|
|
|
// 缩小
|
|
function zoomMinus() {
|
|
cropper.zoom(-0.1);
|
|
|
|
}
|
|
|
|
// 逆时针90
|
|
function rateLeft() {
|
|
cropper.rotate(-90);
|
|
}
|
|
|
|
// 顺时针90
|
|
function rateRight() {
|
|
cropper.rotate(90);
|
|
}
|
|
|
|
// 重置
|
|
function reset() {
|
|
cropper.reset();
|
|
}
|
|
|
|
// 图片移动
|
|
var isDrag = false;
|
|
|
|
function dragImage() {
|
|
if (!isDrag) {
|
|
cropper.setDragMode('move');
|
|
isDrag = true;
|
|
$('#dragBtn').addClass('btn-default');
|
|
$('#dragBtn').removeClass('btn-danger');
|
|
} else {
|
|
cropper.setDragMode('crop');
|
|
isDrag = false;
|
|
$('#dragBtn').addClass('btn-danger');
|
|
$('#dragBtn').removeClass('btn-default');
|
|
}
|
|
}
|
|
|
|
// 打开上传图片
|
|
function openUploadImage() {
|
|
$('#uploadImage').click();
|
|
}
|
|
|
|
// 上传文件
|
|
function doUploadFile() {
|
|
var loadLayerIndex;
|
|
var formData = new FormData($('#uploadFileForm')[0]);
|
|
top.restAjax.postFile('api/file/uploadimage', formData, {}, function (code, data) {
|
|
top.dialog.msg('上传成功');
|
|
cropper.replace('route/file/download/false/' + data.data, false);
|
|
top.dialog.dialogData.uploadImage = data.data;
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.uploading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
}
|
|
|
|
// 裁剪
|
|
function doCrop() {
|
|
cropper.getCroppedCanvas().toBlob(function (cropBlob) {
|
|
var formData = new FormData();
|
|
formData.append("image", cropBlob);
|
|
var loadLayerIndex;
|
|
top.restAjax.postFile('api/file/uploadimage', formData, {}, function (code, data) {
|
|
top.dialog.msg('裁剪成功');
|
|
cropper.replace('route/file/download/false/' + data.data, false);
|
|
top.dialog.dialogData.uploadImage = data.data;
|
|
}, function(code, data) {
|
|
top.dialog.msg(data.msg);
|
|
}, function() {
|
|
loadLayerIndex = top.dialog.msg(top.dataMessage.uploading, {icon: 16, time: 0, shade: 0.3});
|
|
}, function() {
|
|
top.dialog.close(loadLayerIndex);
|
|
});
|
|
});
|
|
}
|
|
|
|
$(function () {
|
|
top.dialog.dialogData.uploadImage = '';
|
|
var image = document.getElementById('image');
|
|
cropper = new Cropper(image, {
|
|
aspectRatio: 1 / 1,
|
|
viewMode: 1,
|
|
preview: '.upload-image-preview',
|
|
minContainerHeight: 430,
|
|
maxContainerHeight: 430,
|
|
crop(event) {},
|
|
});
|
|
$('#content').fadeTo(1000, 1);
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |