i have the following code that works perfectly fine to display an image in a Jsp so that i can crop it. The code uses a static image "testpic.jpg" which works perfectly well without issues. When i attempt to use a dynamic image generated from a servlet, JCROP seems to fail to initialize so i get the images, but i will not have the cropping functionality enabled. i use
<img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&" id="cropbox" />
to display the dynamic images. The displayImage servlet is shown below.
<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>
But when i substitute with a URL of a servlet that streams the image into the JSP, the image is shown BUT JCROP stops working, i cant crop the image. Any pointers where i am going wrong, or its simply because jcrop only works with static images? The code below uses a dynamic image but doesnt seem to work..
<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>
Here is the 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();
}
}
I think that you were on the right track using jquery's load event but we want to know when the image is loaded not the window. So try:
$("#cropbox").load(function(){
$('#cropbox').Jcrop({
onChange: updateCoords,
onSelect: updateCoords
});
});
so that you only attach jcrop once the image is loaded rather than once the window has loaded.
来源：https://stackoverflow.com/questions/17653117/using-jcrop-and-jquery-to-crop-images-using-from-jsp-url-based-image-source-dy