| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Insert title here</title>
- <style type="text/css">
- img {
- max-width: 100%; /* This rule is very important, please do not ignore this! */
- }
- </style>
- <script type="text/javascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.min.js"></script>
- <link href="${ctx}/assets/lib/cropper/cropper.css" rel="stylesheet">
- <script src="${ctx}/assets/lib/cropper/cropper.js"></script>
- <script type="text/javascript">
- var region;
- $(function() {
- $.init=function(){
- var ratio=eval($("#ratio").val());
- $('#cropimg').cropper({
- aspectRatio: ratio,
- viewMode:1,
- crop: function(e) {
- // Output the result data for cropping image.
- //console.log(e);
- region=e;
- }
- });
- }
- $.init();
- $("#ratio").change(function(){
- $('#cropimg').cropper("destroy");
- $.init();
- })
- $("#saveimg").click(function(){
- var imgSrc=$("#cropimg").attr("src");
- $.post("${ctx}/myconsole/cropimg/save",{imgSrc:imgSrc,x:Math.round(region.x),y:Math.round(region.y),x2:Math.round(region.width+region.x),y2:Math.round(region.height+region.y)},function(){
- parent.layer.closeAll();
- });
- })
- })
- </script>
- </head>
- <body>
- <div style="text-align: center">
- <div>
- <img id="cropimg" border="0" src="${imgSrc!}">
- </div>
- <div>
- 裁剪比例<input id="ratio" value="2.58/1" />
- <button id="saveimg">保存</button>
- </div>
- </div>
- </body>
- </html>
|
