Skip to content

G
guns-vip
Commit 8daacf2b by fengshuonan
Options

上传头像修改

parent 149354e4
Showing with 100 additions and 91 deletions
src/main/webapp/WEB-INF/system/user/user_view.html
...@@ -113,167 +113,167 @@ ...@@ -113,167 +113,167 @@
@ **/ @ **/
<div class="tab-pane" id="avatar" role="tabpanel"> <div class="tab-pane" id="avatar" role="tabpanel">
<div class="card-block"> <div class="card-block">
<div class="container"> <div class="row">
<div class="row"> <div class="col-md-12">
<div class="col-md-12"> <div class="img-container">
<div class="img-container"> <img id="image" style="max-width: 100%;" src="${avatar}" alt="Picture">
<img id="image" style="max-width: 100%;" src="${avatar}" alt="Picture">
</div>
</div> </div>
</div> </div>
<div class="row"> </div>
<div class="col-md-12 docs-buttons"> <div class="row p-t-10">
<div class="btn-group"> <div class="col-md-12 docs-buttons">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;move&quot;)">
<span class="fa fa-arrows"></span> <span class="fa fa-arrows"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop"> <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;setDragMode&quot;, &quot;crop&quot;)">
<span class="fa fa-crop"></span> <span class="fa fa-crop"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In"> <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, 0.1)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, 0.1)">
<span class="fa fa-search-plus"></span> <span class="fa fa-search-plus"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out"> <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, -0.1)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;zoom&quot;, -0.1)">
<span class="fa fa-search-minus"></span> <span class="fa fa-search-minus"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, -10, 0)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, -10, 0)">
<span class="fa fa-arrow-left"></span> <span class="fa fa-arrow-left"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 10, 0)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 10, 0)">
<span class="fa fa-arrow-right"></span> <span class="fa fa-arrow-right"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, -10)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, -10)">
<span class="fa fa-arrow-up"></span> <span class="fa fa-arrow-up"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, 10)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;move&quot;, 0, 10)">
<span class="fa fa-arrow-down"></span> <span class="fa fa-arrow-down"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left"> <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, -45)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, -45)">
<span class="fa fa-rotate-left"></span> <span class="fa fa-rotate-left"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right"> <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, 45)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;rotate&quot;, 45)">
<span class="fa fa-rotate-right"></span> <span class="fa fa-rotate-right"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal"> <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleX&quot;, -1)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleX&quot;, -1)">
<span class="fa fa-arrows-h"></span> <span class="fa fa-arrows-h"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical"> <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleY&quot;, -1)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;scaleY&quot;, -1)">
<span class="fa fa-arrows-v"></span> <span class="fa fa-arrows-v"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="crop" title="Crop"> <button type="button" class="btn btn-primary" data-method="crop" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;crop&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;crop&quot;)">
<span class="fa fa-check"></span> <span class="fa fa-check"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="clear" title="Clear"> <button type="button" class="btn btn-primary" data-method="clear" title="Clear">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;clear&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;clear&quot;)">
<span class="fa fa-remove"></span> <span class="fa fa-remove"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="disable" title="Disable"> <button type="button" class="btn btn-primary" data-method="disable" title="Disable">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;disable&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;disable&quot;)">
<span class="fa fa-lock"></span> <span class="fa fa-lock"></span>
</span> </span>
</button> </button>
<button type="button" class="btn btn-primary" data-method="enable" title="Enable"> <button type="button" class="btn btn-primary" data-method="enable" title="Enable">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;enable&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;enable&quot;)">
<span class="fa fa-unlock"></span> <span class="fa fa-unlock"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;reset&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;reset&quot;)">
<span class="fa fa-refresh"></span> <span class="fa fa-refresh"></span>
</span> </span>
</button> </button>
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file"> <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs">
<span class="fa fa-upload"></span> <span class="fa fa-upload"></span>
</span> </span>
</label> </label>
<button type="button" class="btn btn-primary" data-method="destroy" title="Destroy"> <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;destroy&quot;)"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;destroy&quot;)">
<span class="fa fa-power-off"></span> <span class="fa fa-power-off"></span>
</span> </span>
</button> </button>
</div> </div>
<div class="btn-group btn-group-crop"> <div class="btn-group btn-group-crop">
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }"> <button type="button" class="btn btn-info" data-method="getCroppedCanvas" data-option="{ &quot;maxWidth&quot;: 4096, &quot;maxHeight&quot;: 4096 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { maxWidth: 4096, maxHeight: 4096 })">上传头像</span>
Get Cropped Canvas </button>
</span> </div>
</button>
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }"> <div class="btn-group btn-group-crop">
<button type="button" class="btn btn-info" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 160, &quot;height&quot;: 90 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 160, height: 90 })">
160&times;90 160&times;90
</span> </span>
</button> </button>
<button type="button" class="btn btn-success" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }"> <button type="button" class="btn btn-info" data-method="getCroppedCanvas" data-option="{ &quot;width&quot;: 320, &quot;height&quot;: 180 }">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })"> <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="$().cropper(&quot;getCroppedCanvas&quot;, { width: 320, height: 180 })">
320&times;180 320&times;180
</span> </span>
</button> </button>
</div> </div>
<div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-dialog"> <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
<div class="modal-content"> <div class="modal-dialog">
<div class="modal-header"> <div class="modal-content">
<h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <h5 class="modal-title" id="getCroppedCanvasTitle">Cropped</h5>
<span aria-hidden="true">&times;</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button> <span aria-hidden="true">&times;</span>
</div> </button>
<div class="modal-body"></div> </div>
<div class="modal-footer"> <div class="modal-body"></div>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <div class="modal-footer">
<a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">Download</a>
</div> </div>
</div> </div>
</div> </div>
......
src/main/webapp/assets/common/static/stylefeng/feng.css
...@@ -36,6 +36,13 @@ ...@@ -36,6 +36,13 @@
text-decoration: none; text-decoration: none;
} }
.fixed-table-pagination .btn{ .fixed-table-pagination .btn {
border-color: #DDDDDD; border-color: #DDDDDD;
}
.div-center {
width: auto;
display: table;
margin-left: auto;
margin-right: auto;
} }
\ No newline at end of file
src/main/webapp/assets/modular/system/user/user_view.js
...@@ -13,8 +13,9 @@ $(function () { ...@@ -13,8 +13,9 @@ $(function () {
var $dataScaleX = $('#dataScaleX'); var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY'); var $dataScaleY = $('#dataScaleY');
var options = { var options = {
aspectRatio: 16 / 9,
preview: '.img-preview', preview: '.img-preview',
minContainerWidth: 500,
minContainerHeight: 500,
crop: function (e) { crop: function (e) {
$dataX.val(Math.round(e.detail.x)); $dataX.val(Math.round(e.detail.x));
$dataY.val(Math.round(e.detail.y)); $dataY.val(Math.round(e.detail.y));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment