Question

我正在尝试使用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>

但函数 updateCoords（c） 不返回坐标值。如果您对此代码有任何建议，请帮助我。提前谢谢你。

Answer 1

图片表格

    <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>

for updateCoords（c）function

 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;
  };

嗨sujan试试这个

使用jcrop进行多个图像裁剪

1 个答案: