Question

我有以下代码可以很好地在Jsp中显示图像，以便我可以裁剪它。代码使用静态图像“testpic.jpg”，它可以很好地运行而不会出现问题。当我尝试使用从servlet生成的动态图像时，JCROP似乎无法初始化，所以我得到图像，但我不会启用裁剪功能。我用 <img src="displayImage?memberNumber=<%=memberNumber%>&memberSuffix=<%=memberSuffix%>&amp" 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%>&amp;memberSuffix=<%=memberSuffix%>&amp" 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();
            }

    }

Answer 1

我认为你使用jquery的load事件在正确的轨道上，但我们想知道图像何时加载而不是窗口。所以试试：

$("#cropbox").load(function(){
            $('#cropbox').Jcrop({
                onChange: updateCoords,
                onSelect: updateCoords
            });
  });

这样您只能在加载图像后附加jcrop，而不是在窗口加载后附加。

使用JCROP和JQUERY使用基于jsp..url的图像源/动态图像无法裁剪图像

1 个答案: