java - Using JCROP and JQUERY to crop images using from jsp..url based image source/ dynamic images not working -
i have following code works fine display image in jsp can crop it. code uses static image "testpic.jpg" works without issues. when attempt use dynamic image generated servlet, jcrop seems fail initialize images, not have cropping functionality enabled. use <img src="displayimage?membernumber=<%=membernumber%>&membersuffix=<%=membersuffix%>&" id="cropbox" /> display dynamic images. displayimage servlet 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 crop region 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 picture</h1> <!-- image we're attaching jcrop --> <img src="../testpic.jpg" id="cropbox" /> <!-- form 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 substitute url of servlet streams image jsp, image shown jcrop stops working, cant crop image. pointers going wrong, or because jcrop works static images? code below uses dynamic image doesnt seem 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 crop region 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 picture</h1> <!-- image we're attaching jcrop --> <img src="displayimage?membernumber=<%=membernumber%>&membersuffix=<%=membersuffix%>&" id="cropbox" /> <!-- form 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 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 display"); }} catch (exception e) { e.printstacktrace(); } { out.close(); } } }catch (exception e) { e.printstacktrace(); } }
i think on right track using jquery's load event want know when image loaded not window. try:
$("#cropbox").load(function(){ $('#cropbox').jcrop({ onchange: updatecoords, onselect: updatecoords }); }); so attach jcrop once image loaded rather once window has loaded.
Comments
Post a Comment