私はそれを切り取ることができるようにJspで画像を表示するために完全にうまく動作する次のコードを持っています。このコードは、問題なく完全に機能する静止画像「testpic.jpg」を使用しています。サーブレットから生成された動的画像を使用しようとすると、JCROP が初期化に失敗しているように見えるため、画像を取得できますが、クロッピング機能が有効になりません。私
<img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&" id="cropbox" />
は動的画像を表示するために使用します。displayImage サーブレットを以下に示します。
<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 にストリーミングするサーブレットの 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 サーブレットです....
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();
}
}