0

我创建了一个代码，在其中我在 jquery 模型框中显示图像并对其进行裁剪。但是当我在裁剪功能中访问图像投掷id时，图像没有显示在模型框中。

这是代码

 <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>



        <title>Image Cropper</title>

<link type="text/css" href="css/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/ui.core.js"></script>
    <script type="text/javascript" src="js/ui.dialog.js"></script>
    <script type="text/javascript" src="js/effects.core.js"></script>
    <script type="text/javascript" src="js/effects.highlight.js"></script>
    <script type="text/javascript" src="js/jquery.bgiframe.js"></script>

        <script src="jquery.Jcrop.min.js"></script>
        <link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
        <script language="Javascript"> 

         $(function() {


        $("#dialog").dialog({
            bgiframe: true,
            autoOpen: false,
            height: 300,
                        width:300,
            modal: true


        });

        $('#ok').click(function() {
            $('#dialog').dialog('open');
        })
                jQuery('#target').Jcrop({           
                   onSelect : setCoordinates        
                });
                function setCoordinates(c) {
                //alert("x " + c.x + " y " + c.y);      
                //alert("w " + c.w + " h " + c.h);      
                document.myForm.x.value = c.x;      
                document.myForm.y.value = c.y;      
                document.myForm.w.value = c.w;      
                document.myForm.h.value = c.h;  
            };  
            function checkCoordinates() {       
                if (document.myForm.x.value == "" || document.myForm.y.value == "") {           
                    alert("Please select a crop region");           
                    return false;       
                } else {            
                    return true;        
                }   
            };
    });






        </script>
          <style type="text/css">
        body { font-size: 62.5%; }
        </style>
    </head>
    <body>
        <h1>Hello World!</h1>
        <input type="button" id="ok" value="Upload"/>
<div id="dialog" title="Please Crop The Image">

   <img src="com.jpg"  alt="image not retrieved" id="target" />  

    <form name="myForm" action="cropper.jsp" method="post" onsubmit="return      checkCoordinates();">
            <input type="hidden" name="x" value=""/>        
            <input type="hidden" name="y" value=""/>        
            <input type="hidden" name="w" value=""/>        
            <input type="hidden" name="h" value=""/>        
            <input type="submit" value="Crop Image"/>   
        </form>
   </div>
    </body>
</html>
4

1 回答 1

0

尝试这个，

 $('#ok').click(function() {
      $('#dialog').dialog('open');
      $('#target').Jcrop({           
          onSelect : setCoordinates        
      });
 });
于 2013-09-07T11:23:08.337 回答