|
@@ -2,6 +2,7 @@
|
|
|
<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" />
|
|
|
<style>
|
|
<style>
|
|
|
.bg-sm{
|
|
.bg-sm{
|
|
|
width: 124px;
|
|
width: 124px;
|
|
@@ -24,10 +25,61 @@
|
|
|
color: black;
|
|
color: black;
|
|
|
text-align: center
|
|
text-align: center
|
|
|
}
|
|
}
|
|
|
|
|
+ .thumbBox_S{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ width: 238px;
|
|
|
|
|
+ height: 218px;
|
|
|
|
|
+ margin-left: -119px;
|
|
|
|
|
+ margin-top: -109px;
|
|
|
|
|
+ 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;
|
|
|
|
|
+ }
|
|
|
|
|
+ .thumbBox_M{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ width: 360px;
|
|
|
|
|
+ height: 300px;
|
|
|
|
|
+ margin-left:-180px;
|
|
|
|
|
+ margin-top: -150px;
|
|
|
|
|
+ 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;
|
|
|
|
|
+ }
|
|
|
|
|
+ .thumbBox_L{
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 50%;
|
|
|
|
|
+ left: 50%;
|
|
|
|
|
+ width: 730px;
|
|
|
|
|
+ height: 320px;
|
|
|
|
|
+ margin-left: -365px;
|
|
|
|
|
+ margin-top: -160px;
|
|
|
|
|
+ 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_S{
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ width: 400px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .imageBox_M{
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ width: 400px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .imageBox_L{
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ width: 800px;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body class="white-bg">
|
|
<body class="white-bg">
|
|
|
- <div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
|
|
|
|
|
|
+ <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div1">
|
|
|
<form class="form-horizontal m" id="form-magnet-edit" th:object="${wxMagnet}">
|
|
<form class="form-horizontal m" id="form-magnet-edit" th:object="${wxMagnet}">
|
|
|
<input type="hidden" name="magnetId" th:field="*{magnetId}">
|
|
<input type="hidden" name="magnetId" th:field="*{magnetId}">
|
|
|
<div class="form-group">
|
|
<div class="form-group">
|
|
@@ -85,10 +137,34 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</form>
|
|
</form>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="div2" style="display: none">
|
|
|
|
|
+ <div id="imageBox" >
|
|
|
|
|
+ <div id="thumbBox" ></div>
|
|
|
|
|
+ <div class="spinner" style="display: none">Loading...</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="action" style="margin: 10px auto;">
|
|
|
|
|
+ <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" onclick="upBg()" class="btn-info Btnsty_peyton" value="上传" />
|
|
|
|
|
+ <input type="button" onclick="back()" class="btn-info Btnsty_peyton " value="返回" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
</div>
|
|
</div>
|
|
|
<th:block th:include="include :: footer" />
|
|
<th:block th:include="include :: footer" />
|
|
|
|
|
+ <th:block th:include="include :: cropbox-js" />
|
|
|
<script th:inline="javascript">
|
|
<script th:inline="javascript">
|
|
|
var prefix = ctx + "wxportal/magnet";
|
|
var prefix = ctx + "wxportal/magnet";
|
|
|
|
|
+ var cropper;
|
|
|
|
|
+ var size = "S";
|
|
|
|
|
+ var options = {
|
|
|
|
|
+ thumbBox: '.thumbBox_'+size,
|
|
|
|
|
+ spinner: '.spinner',
|
|
|
|
|
+ imgSrc: ctx + 'img/profile.jpg'
|
|
|
|
|
+ }
|
|
|
$(function() {
|
|
$(function() {
|
|
|
$("#form-magnet-edit").validate({
|
|
$("#form-magnet-edit").validate({
|
|
|
onkeyup: false,
|
|
onkeyup: false,
|
|
@@ -127,6 +203,30 @@
|
|
|
focusCleanup: true
|
|
focusCleanup: true
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
|
|
+ $('#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]);
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ $('#btnZoomIn').on('click', function(){
|
|
|
|
|
+ cropper.zoomIn();
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ $('#btnZoomOut').on('click', function(){
|
|
|
|
|
+ cropper.zoomOut();
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
sizeChange();
|
|
sizeChange();
|
|
|
});
|
|
});
|
|
|
|
|
|
|
@@ -136,29 +236,32 @@
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ function back() {
|
|
|
|
|
+ $("#div1").show();
|
|
|
|
|
+ $("#div2").hide();
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
/*上传背景图片*/
|
|
/*上传背景图片*/
|
|
|
function bgUpload() {
|
|
function bgUpload() {
|
|
|
- var size = $("#sel_magnetSize").val();
|
|
|
|
|
- var bgUrl = $("#input_bgUrl").val();
|
|
|
|
|
- //bgUrl = bgUrl.substring(1,bgUrl.length);
|
|
|
|
|
-
|
|
|
|
|
- var w = 500;
|
|
|
|
|
- if(size=="L"){
|
|
|
|
|
- w= 900;
|
|
|
|
|
|
|
+ $("#div1").hide();
|
|
|
|
|
+ $("#div2").show();
|
|
|
|
|
+ var imgUrl =$("#input_bgUrl").val();
|
|
|
|
|
+ if(imgUrl==null||imgUrl==''){
|
|
|
|
|
+ imgUrl = ctx + 'img/profile.jpg';
|
|
|
|
|
+ }else{
|
|
|
|
|
+ imgUrl = ctx+$("#input_bgUrl").val();
|
|
|
|
|
+ }
|
|
|
|
|
+ debugger
|
|
|
|
|
+ options = {
|
|
|
|
|
+ thumbBox: '.thumbBox_'+size,
|
|
|
|
|
+ spinner: '.spinner',
|
|
|
|
|
+ imgSrc:imgUrl
|
|
|
}
|
|
}
|
|
|
- var options = {
|
|
|
|
|
- title: "上传背景图像",
|
|
|
|
|
- width: w,
|
|
|
|
|
- height: 600,
|
|
|
|
|
- url: ctx + 'wxportal/magnet/bgUpload?size='+size+"&bgUrl="+bgUrl,
|
|
|
|
|
- btn:["上传","取消"],
|
|
|
|
|
- callBack :upBg
|
|
|
|
|
- };
|
|
|
|
|
- $.modal.openOptions(options);
|
|
|
|
|
|
|
+ cropper = $('.imageBox').cropbox(options);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- function upBg(index, layero) {
|
|
|
|
|
- var img = window.frames[0].cropper.getBlob();
|
|
|
|
|
|
|
+ function upBg() {
|
|
|
|
|
+ var img = cropper.getBlob();
|
|
|
var formdata = new FormData();
|
|
var formdata = new FormData();
|
|
|
formdata.append("file", img);
|
|
formdata.append("file", img);
|
|
|
$.ajax({
|
|
$.ajax({
|
|
@@ -171,30 +274,43 @@
|
|
|
if(result.code==0){
|
|
if(result.code==0){
|
|
|
$("#input_bgUrl").val(result.data.fileName);
|
|
$("#input_bgUrl").val(result.data.fileName);
|
|
|
$("#div-bgUrl").html("<img src='"+result.data.url+"' style='width;100%;height:100%;'>");
|
|
$("#div-bgUrl").html("<img src='"+result.data.url+"' style='width;100%;height:100%;'>");
|
|
|
- layer.close(index);
|
|
|
|
|
|
|
+ $("#div1").show();
|
|
|
|
|
+ $("#div2").hide();
|
|
|
}else{
|
|
}else{
|
|
|
|
|
+ $("#div1").show();
|
|
|
|
|
+ $("#div2").hide();
|
|
|
$.modal.alertWarning(result.msg);
|
|
$.modal.alertWarning(result.msg);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
function sizeChange(){
|
|
function sizeChange(){
|
|
|
- var size = $("#sel_magnetSize").val();
|
|
|
|
|
|
|
+ size = $("#sel_magnetSize").val();
|
|
|
$("#div-bgUrl").removeClass("bg-sm");
|
|
$("#div-bgUrl").removeClass("bg-sm");
|
|
|
$("#div-bgUrl").removeClass("bg-md");
|
|
$("#div-bgUrl").removeClass("bg-md");
|
|
|
$("#div-bgUrl").removeClass("bg-lg");
|
|
$("#div-bgUrl").removeClass("bg-lg");
|
|
|
|
|
+ $("#imageBox").removeClass();
|
|
|
|
|
+ $("#thumbBox").removeClass();
|
|
|
if(size=="l"||size=="L"){
|
|
if(size=="l"||size=="L"){
|
|
|
$("#div-bgUrl").addClass("bg-lg");
|
|
$("#div-bgUrl").addClass("bg-lg");
|
|
|
|
|
+ size = "L";
|
|
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_L");
|
|
|
|
|
+ $("#thumbBox").addClass("thumbBox_L");
|
|
|
}else if(size=="m"||size=="M"){
|
|
}else if(size=="m"||size=="M"){
|
|
|
$("#div-bgUrl").addClass("bg-md");
|
|
$("#div-bgUrl").addClass("bg-md");
|
|
|
|
|
+ size = "M";
|
|
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_M");
|
|
|
|
|
+ $("#thumbBox").addClass("thumbBox_M");
|
|
|
}else if(size=="s"||size=="S"){
|
|
}else if(size=="s"||size=="S"){
|
|
|
$("#div-bgUrl").addClass("bg-sm");
|
|
$("#div-bgUrl").addClass("bg-sm");
|
|
|
|
|
+ size = "S";
|
|
|
|
|
+ $("#imageBox").addClass("imageBox imageBox_S");
|
|
|
|
|
+ $("#thumbBox").addClass("thumbBox_S");
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
|
|
</html>
|
|
</html>
|