使用jquery.imgareaselect在页面进行截图操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 88 / selection.width;
var scaleY = 88 / selection.height;
$('#preview1 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 64 / selection.width;
scaleY = 64 / selection.height;
$('#preview2 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 40 / selection.width;
scaleY = 40 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(function () {
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
fadeSpeed: 200, onSelectChange: preview, show: true,x1:0,y1:0, x2:88,y2:88});
});
</script>
</head>
<body>
<h2>Live Example</h2>
<div class="container demo">
<div style="float: left; width: 50%;">
<p class="instructions">
Click and drag on the image to select an area.
</p>
<input type="file" id="upload" onchange="PreviewImage('Preview',this,300,300);" />
<p></p>
<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
<img id="photo" src="image/flower2.jpg" />
</div>
</div>
<div style="float: left; width: 50%;">
<p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
Selection Preview
</p>
<div class="frame"
style="margin: 0 1em; width: 88px; height: 88px;">
<div id="preview1" style="width: 88px; height: 88px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 88px; height: 88px;" />
</div>
</div>
<br/>
<div class="frame"
style="margin: 0 1em; width: 64px; height: 64px;">
<div id="preview2" style="width: 64px; height: 64px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 64px; height: 64px;" />
</div>
</div>
<br />
<div class="frame"
style="margin: 0 1em; width: 40px; height: 40px;">
<div id="preview" style="width: 40px; height: 40px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 40px; height: 40px;" />
</div>
</div>
<br/>
<table style="margin-top: 1em;">
<thead>
<tr>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Coordinates
</th>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Dimensions
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
<td style="width: 20%;"><b>Width:</b></td>
<td><input type="text" value="-" id="w" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
<td><b>Height:</b></td>
<td><input type="text" id="h" value="-" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript">
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 88 / selection.width;
var scaleY = 88 / selection.height;
$('#preview1 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 64 / selection.width;
scaleY = 64 / selection.height;
$('#preview2 img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
scaleX = 40 / selection.width;
scaleY = 40 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(function () {
$('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
fadeSpeed: 200, onSelectChange: preview, show: true,x1:0,y1:0, x2:88,y2:88});
});
</script>
</head>
<body>
<h2>Live Example</h2>
<div class="container demo">
<div style="float: left; width: 50%;">
<p class="instructions">
Click and drag on the image to select an area.
</p>
<input type="file" id="upload" onchange="PreviewImage('Preview',this,300,300);" />
<p></p>
<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
<img id="photo" src="image/flower2.jpg" />
</div>
</div>
<div style="float: left; width: 50%;">
<p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
Selection Preview
</p>
<div class="frame"
style="margin: 0 1em; width: 88px; height: 88px;">
<div id="preview1" style="width: 88px; height: 88px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 88px; height: 88px;" />
</div>
</div>
<br/>
<div class="frame"
style="margin: 0 1em; width: 64px; height: 64px;">
<div id="preview2" style="width: 64px; height: 64px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 64px; height: 64px;" />
</div>
</div>
<br />
<div class="frame"
style="margin: 0 1em; width: 40px; height: 40px;">
<div id="preview" style="width: 40px; height: 40px; overflow: hidden;">
<img src="image/flower2.jpg" style="width: 40px; height: 40px;" />
</div>
</div>
<br/>
<table style="margin-top: 1em;">
<thead>
<tr>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Coordinates
</th>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Dimensions
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
<td style="width: 20%;"><b>Width:</b></td>
<td><input type="text" value="-" id="w" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type="text" id="y1" value="-" /></td>
<td><b>Height:</b></td>
<td><input type="text" id="h" value="-" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type="text" id="x2" value="-" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type="text" id="y2" value="-" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>