效果如下：
jsp代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
String basePath = request.getScheme() + ":/" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>图片切割</title>
<script src="<%=path %>/js/jquery.min.js" type="text/javascript"></script>
<script src="<%=path %>/js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=path %>/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="<%=path %>/css/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
var sourceImage = document.getElementById("target");
$('#iw').val(sourceImage.width);
$('#ih').val(sourceImage.height);
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#preview').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>
<div id="outer">
<div class="jcExample">
<div class="article">
<form action="cis" method="post" enctype="application/x-www-form-urlencoded" target="rightFrame" >
<div>
<label>F0-X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>F0-Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>S0-X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>S0-Y2 <input type="text" size="4" id="y2" name="y2" /></label><br />
<label>CutW <input type="text" size="4" id="w" name="cutWidth" /></label>
<label>CutH <input type="text" size="4" id="h" name="cutHeight" /></label>
<label>ImgW <input type="text" size="4" id="iw" name="imgWidth" /></label>
<label>ImgH <input type="text" size="4" id="ih" name="imgHeight" /></label>
<input type="submit" value="submit" />
</div>
<table>
<tr>
<td>
<img name="sourceImage" src="<%=path %>/css/flowers.jpg" id="target" alt="Flowers" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;">
<img src="<%=path %>/css/flowers.jpg" id="preview" alt="Preview" />
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
服务端切割图片工具类代码：
private static void saveSubImage(BufferedImage image,
Rectangle subImageBounds, File subImageFile) throws IOException {
try {
String fileName = subImageFile.getName();
String formatName = fileName.substring(fileName.lastIndexOf('.') + 1);// 图片格式名
BufferedImage subImage = new BufferedImage(
subImageBounds.width,
subImageBounds.height,
BufferedImage.TYPE_INT_RGB);
Graphics g = subImage.getGraphics();
if (subImageBounds.width > image.getWidth()
|| subImageBounds.height > image.getHeight()) {
int left = subImageBounds.x;
int top = subImageBounds.y;
if (image.getWidth() < subImageBounds.width)
left = (int) ((subImageBounds.width - image.getWidth()) / 2);
if (image.getHeight() < subImageBounds.height)
top = (int) ((subImageBounds.height - image.getHeight()) / 2);
g.setColor(Color.white);
g.fillRect(0, 0, subImageBounds.width, subImageBounds.height);
g.drawImage(image, left, top, null);
ImageIO.write(image, formatName, subImageFile);
System.out.println("if is running left:" + left + " top: " + top);
} else {
System.out.println(
image.getWidth() + ", " + image.getHeight() + " === " +
subImageBounds.x + ", " +
subImageBounds.y + ", " +
subImageBounds.width + ", " +
subImageBounds.height);
g.drawImage(image.getSubimage(
subImageBounds.x,
subImageBounds.y,
subImageBounds.width,
subImageBounds.height),
0, 0, null);
System.out.println("else is running");
}
ImageIO.write(subImage, formatName, subImageFile);
g.dispose();
} catch (Exception e) {
e.printStackTrace();
}
}
jsp代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String path = request.getContextPath() + "/";
String basePath = request.getScheme() + ":/" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath %>" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>图片切割</title>
<script src="<%=path %>/js/jquery.min.js" type="text/javascript"></script>
<script src="<%=path %>/js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="<%=path %>/css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="<%=path %>/css/demos.css" type="text/css" />
<script type="text/javascript">
jQuery(function($){
var jcrop_api, boundx, boundy;
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: 1
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
$('#x1').val(c.x);
$('#y1').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
var sourceImage = document.getElementById("target");
$('#iw').val(sourceImage.width);
$('#ih').val(sourceImage.height);
var rx = 100 / c.w;
var ry = 100 / c.h;
$('#preview').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>
<div id="outer">
<div class="jcExample">
<div class="article">
<form action="cis" method="post" enctype="application/x-www-form-urlencoded" target="rightFrame" >
<div>
<label>F0-X1 <input type="text" size="4" id="x1" name="x1" /></label>
<label>F0-Y1 <input type="text" size="4" id="y1" name="y1" /></label>
<label>S0-X2 <input type="text" size="4" id="x2" name="x2" /></label>
<label>S0-Y2 <input type="text" size="4" id="y2" name="y2" /></label><br />
<label>CutW <input type="text" size="4" id="w" name="cutWidth" /></label>
<label>CutH <input type="text" size="4" id="h" name="cutHeight" /></label>
<label>ImgW <input type="text" size="4" id="iw" name="imgWidth" /></label>
<label>ImgH <input type="text" size="4" id="ih" name="imgHeight" /></label>
<input type="submit" value="submit" />
</div>
<table>
<tr>
<td>
<img name="sourceImage" src="<%=path %>/css/flowers.jpg" id="target" alt="Flowers" />
</td>
<td>
<div style="width:100px;height:100px;overflow:hidden;">
<img src="<%=path %>/css/flowers.jpg" id="preview" alt="Preview" />
</div>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</body>
</html>
服务端切割图片工具类代码：
private static void saveSubImage(BufferedImage image,
Rectangle subImageBounds, File subImageFile) throws IOException {
try {
String fileName = subImageFile.getName();
String formatName = fileName.substring(fileName.lastIndexOf('.') + 1);// 图片格式名
BufferedImage subImage = new BufferedImage(
subImageBounds.width,
subImageBounds.height,
BufferedImage.TYPE_INT_RGB);
Graphics g = subImage.getGraphics();
if (subImageBounds.width > image.getWidth()
|| subImageBounds.height > image.getHeight()) {
int left = subImageBounds.x;
int top = subImageBounds.y;
if (image.getWidth() < subImageBounds.width)
left = (int) ((subImageBounds.width - image.getWidth()) / 2);
if (image.getHeight() < subImageBounds.height)
top = (int) ((subImageBounds.height - image.getHeight()) / 2);
g.setColor(Color.white);
g.fillRect(0, 0, subImageBounds.width, subImageBounds.height);
g.drawImage(image, left, top, null);
ImageIO.write(image, formatName, subImageFile);
System.out.println("if is running left:" + left + " top: " + top);
} else {
System.out.println(
image.getWidth() + ", " + image.getHeight() + " === " +
subImageBounds.x + ", " +
subImageBounds.y + ", " +
subImageBounds.width + ", " +
subImageBounds.height);
g.drawImage(image.getSubimage(
subImageBounds.x,
subImageBounds.y,
subImageBounds.width,
subImageBounds.height),
0, 0, null);
System.out.println("else is running");
}
ImageIO.write(subImage, formatName, subImageFile);
g.dispose();
} catch (Exception e) {
e.printStackTrace();
}
}
