jQuery+Jcrop 实现图片裁剪预览功能，jqueryjcrop,在项目中，我们需要做些类
jQuery+Jcrop 实现图片裁剪预览功能，jqueryjcrop,在项目中，我们需要做些类
在项目中，我们需要做些类似头像上传，图片裁剪的功能，ok看下面文章！
需要插件：jQuery Jcrop
后端代码：
None```访问代码：```java <%@ page language="java" import="java.util.*,org.csg.upload.*" pageEncoding="utf-8"%> <% //图片的相对路径 String imagPath=request.getParameter("imgPath"); String relPath=request.getRealPath("/");//获取图片服务器绝对地址 String newFileName=new Date().getTime()+".jpg"; //实际图片路径 String path1=relPath+imagPath; //裁剪后存储到服务器的图片路径 String path2=relPath+"/images/"+newFileName; int x=Integer.parseInt(request.getParameter("x")); int y=Integer.parseInt(request.getParameter("y")); int w=Integer.parseInt(request.getParameter("w")); int h=Integer.parseInt(request.getParameter("h")); try{ Upload.CutImage(path1, path2, x, y, w, h); out.print("<img src='images/"+newFileName+"'/>"); }catch(Exception e){ e.printStackTrace(); out.print("图片裁剪失败"); } %> jsp代码：```java <%@ page language="java" import="java.util." pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jsp开发头像裁剪</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<style type="text/css">
.cut{
margin-top: 20px;
}
#preview-pane {
display: block;
position: absolute;
z-index: 2000;
top: 10px;
right: -280px;
padding: 6px;
border: 1px rgba(0,0,0,.4) solid;
background-color: white;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
}
#preview-pane .preview-container { width: 250px; height: 170px; overflow: hidden; } </style> <script type="text/javascript"> $(function(){ var jcrop_api, boundx="", boundy="", $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height(); $('#cutImage').Jcrop({ onChange:showCoords,//获取选中的值 onSelect:showCoords,//获取拖拽的值 aspectRatio: xsize / ysize },function(){ var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; jcrop_api = this; $preview.appendTo(jcrop_api.ui.holder); }); function showCoords(c){ var x=c.x; var y=c.y; var w=c.w; var h=c.h; $("#x1").val(parseInt(x)); $("#y1").val(parseInt(y)); $("#w").val(parseInt(w)); $("#h").val(parseInt(h)); if (parseInt(c.w) > 0){ var rx = xsize / c.w; var ry = ysize / c.h; $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } } }); </script> </head> <body> <h1>Java开发QQ头像裁剪系统</h1> <div class="cut"> <img id="cutImage" alt="" src="images/1.jpg" > <div id="preview-pane"> <div class="preview-container"> <img src="images/1.jpg" class="jcrop-preview" alt="Preview" /> </div> </div> </div> <form action="success.jsp" method="post" > <input type="text" value="images/1.jpg" name="imgPath"> x轴:<input type="text" size="4" id="x1" name="x" /> y轴:<input type="text" size="4" id="y1" name="y"/> 宽度:<input type="text" size="4" id="w" name="w"/> 高度:<input type="text" size="4" id="h" name="h"/> <input type="submit" value="裁剪"/> </form> </body> </html>```
用户点评