我有以下代码可以很好地在 Jsp 中显示图像，以便我可以裁剪它。该代码使用静态图像“testpic.jpg”，它运行良好，没有问题。当我尝试使用从 servlet 生成的动态图像时，JCROP 似乎无法初始化，所以我得到了图像，但我不会启用裁剪功能。我
<img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&" id="cropbox" />
用来显示动态图像。displayImage servlet 如下所示。
<html>
<head>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script language="Javascript">
$(window).load(function(){
jQuery('#cropbox').Jcrop({
onChange: updateCoords,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
;
function checkCoords()
{
if (parseInt($('#w').val()))
return true;
alert('Please select a crop region then press submit.');
return false;
}
;
</script>
<style type="text/css">
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
#wrapper {
margin: 0 auto;
width: 400px;
}
#wrapper2 {
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="container" id="wrapper">
<h1>Resize your picture</h1>
<!-- This is the image we're attaching Jcrop to -->
<img src="../testpic.jpg" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="cropImage.jsp" method="get"
onsubmit="return checkCoords();">
<input type="hidden" id="x" name="l" />
<input type="hidden" id="y" name="t" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="f" name="f" value="jpg" />
<input type="hidden" id="i" name="i"
value="pic.jpg"/>
<input type="submit" value="Crop Image" />
</form>
</div>
</body>
</html>
但是，当我用将图像流式传输到 JSP 的 servlet 的 URL 替换时，图像会显示但 JCROP 停止工作，我无法裁剪图像。我出错的任何指针，或者仅仅是因为 jcrop 仅适用于静态图像？下面的代码使用动态图像，但似乎不起作用..
<html>
<head>
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
<script language="Javascript">
$(window).load(function(){
jQuery('#cropbox').Jcrop({
onChange: updateCoords,
onSelect: updateCoords
});
});
function updateCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
;
function checkCoords()
{
if (parseInt($('#w').val()))
return true;
alert('Please select a crop region then press submit.');
return false;
}
;
</script>
<style type="text/css">
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
#wrapper {
margin: 0 auto;
width: 400px;
}
#wrapper2 {
margin: 0 auto;
width: 200px;
}
</style>
</head>
<%
String memberNumber = request.getAttribute("memberNumber").toString();
String memberSuffix = request.getAttribute("memberSuff`enter code here`ix").toString();
%>
<body>
<div class="container" id="wrapper">
<h1>Resize your picture</h1>
<!-- This is the image we're attaching Jcrop to -->
<img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&" id="cropbox" />
<!-- This is the form that our event handler fills -->
<form action="cropImage.jsp" method="get"
onsubmit="return checkCoords();">
<input type="hidden" id="x" name="l" />
<input type="hidden" id="y" name="t" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="f" name="f" value="jpg" />
<input type="hidden" id="i" name="i"
value="testpic.jpg"/>
<input type="submit" value="Crop Image" />
</form>
</div>
</body>
</html>
这是 DisplayImage servlet....
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
String memberNumber = request.getParameter("memberNumber");
String memberSuffix = request.getParameter("memberSuffix");
System.out.println(memberNumber + memberSuffix);
try {
EntityManagerFactory emf = javax.persistence.Persistence.createEntityManagerFactory("JPAExamplePU");
EntityManager em = emf.createEntityManager();
String primarykey = memberNumber + memberSuffix;
Photos photo = em.find(Photos.class, primarykey);
if ((memberNumber != null)&&(photo!=null)) {
byte[] image = photo.getPassportPhoto();
response.setContentType("image/jpeg");
response.getOutputStream().write(image);
response.getOutputStream().flush();
response.getOutputStream().close();
System.out.println("''''''''''''''''''''''> sending to display");
}} catch (Exception e) {
e.printStackTrace();
} finally {
out.close();
} }
}catch (Exception e) {
e.printStackTrace();
}
}