2
我有以下代碼，可以很好地在Jsp中顯示圖像，以便裁剪它。該代碼使用靜態圖像「testpic.jpg」，它完美地工作，沒有問題。當我嘗試使用從servlet生成的動態圖像時，JCROP似乎無法初始化，所以我得到圖像，但我不會啓用裁剪功能。我使用 <img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&" id="cropbox" /> 來顯示動態圖像。 displayImage servlet如下所示。使用JCROP和JQUERY從基於jsp..url的圖像源/動態圖像不工作使用JCROP和JQUERY來裁剪圖像
<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();
}
}
我懷疑有計時問題。 在加載圖像之前，您可能正試圖添加JCrop。 –
感謝@TrevorGowing提供了非常需要的響應。這對我來說很有意義。我仍然堅持。在你看來，處理這個問題的最好方法是什麼？ – abr3174
您是否設法解決您的問題？ –