使用 jcrop 裁剪多个图像


multiple image crop using jcrop

我正在尝试使用 jcrop 插件裁剪多个图像。 该插件适用于单个图像裁剪,但我不知道如何从循环中单独裁剪多个图像。 我的PHP文件如下

<?php 
  $id=$_GET['id'];
  $query_image=mysql_query("SELECT * FROM tbl_images WHERE `id`='$id'");
  $j=0;
    while($rowq=mysql_fetch_assoc($query_image))
    { 
     $image_source = $rowq['image']; 
 ?>
  <div>
     <img src="../image_files/<?php echo $image_source;?>" width="550px" id="cropbox_<?php echo $j;?>" />
        <form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords()">
           <input type="text" id="x" name="x" value="" />
           <input type="text" id="y" name="y" value=""/>
           <input type="text" id="w" name="w" value=""/>
           <input type="text" id="h" name="h" value=""/>
           <input type="submit" value="crop">
           <input type="reset" value="cancel">
         </form>
  </div>
<?php  
   $j++;
 }
  $count = $j;
?>

和 jcrop函数如下

 <script type="text/javascript">
    var i;
    var count = "<?php echo $count;?>";
    $(function(){
      for(i=0; i<count;i++)
      {
       $('#cropbox_'+i).Jcrop({    
       aspectRatio: 0,
       onSelect: updateCoords
       });
     }
   });     
  function updateCoords(c)
  {
    var x = $('#x').val(c.x);
    var y = $('#y').val(c.y);
    $('#w').val(c.w);
    $('#h').val(c.h);
  };
  function checkCoords(k)
  {
    if (parseInt($('#w_'+k).val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };   
</script>

但函数更新坐标 (c) 不返回坐标值。 如果您对这段代码有任何建议,请帮助我。 提前谢谢你。

表示图像形式

    <form action="crop_image.php?id=<?php echo $id;?>" method="post" onsubmit="return checkCoords('<?php echo $j;?>')">
       <input type="text" id="x_<?php echo $j;?>" name="x" value="" />
       <input type="text" id="y_<?php echo $j;?>" name="y" value=""/>
       <input type="text" id="w_<?php echo $j;?>" name="w" value=""/>
       <input type="text" id="h_<?php echo $j;?>" name="h" value=""/>
       <input type="submit" value="crop">
       <input type="reset" value="cancel">
     </form>

用于更新坐标(c) 函数

 function updateCoords(c)
  {
    for(i=0; i<count;i++)
    {
      var x = $('#x_'+i).val(c.x);
      var y = $('#y_'+i).val(c.y);
      $('#w_'+i).val(c.w);
      $('#h_'+i).val(c.h);
    }
  };
function checkCoords(k)
  {
    if (parseInt($('#w_'+k).val())) return true;
    alert('Please select a crop region then press submit.');
    return false;
  };

嗨,苏扬试试这个