1

我正在尝试将图像裁剪为 342x478 像素大小，而不会使用 Jcrop 扭曲原始图像。用户可以移动图像周围的裁剪区域以选择所需的位置。除了显示的裁剪矩形区域以与上传的原始图像相同的比例出现并且不保持 342x478 比例。

因此，例如，当我上传 120x210 的图像时，裁剪区域会以该比例出现，而不是 342x478 的比例，因此图像会失真。我已经解决了小图像的问题，但对于较大的图像，它就不起作用了。

继承人的代码：

echo "<img src='images/test/".$image1_name."' width='342' height='478'  class='preview' id='cropbox' >";
                                echo"

                                <script src=\"js/jquery.Jcrop.js\"></script>
<script type=\"text/javascript\">

  $(function(){
    $('#cropbox').Jcrop({
        trueSize: [".$size1[0].",".$size1[1]."],
         boxWidth: 342, 
         boxHeight: 478,
      onSelect: updateCoords

    });

      $('#create').submit(function() { 
    $.ajax({ 
        data: $(this).serialize(),
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        success: function(response) {
            var a= response;
        $('#preview1 .jcrop-holder img').attr('src','');
        $('#preview1 .preview').attr('src','');
        $('#preview1 #cropbox').attr('src','');
        $('#preview1 .jcrop-holder img').delay(800).attr('src',a);
        $('#preview1 .preview').delay(800).attr('src',a);
        $('#preview1 #cropbox').delay(800).attr('src',a);


        }



    });
    return false; });


    $('#uploadimg').click(function() {
        var titleleft = $('#preview1 #cropbox').attr('src');
        var titleright = $('#preview2 #cropbox1').attr('src');
            $.ajax({
   type: 'POST',
   url: 'some.php',
   data: 'left='+ titleleft+'&right='+ titleright,
   success: function(){

   }
 });

});


  });

  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>
<link rel=\"stylesheet\" href=\"demo_files/main.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"demo_files/demos.css\" type=\"text/css\" />
<link rel=\"stylesheet\" href=\"css/jquery.Jcrop.css\" type=\"text/css\" />";
echo "<form onsubmit='return checkCoords();'method='post' action='test.php' id='create' >
            <input type='hidden' name='x' id='x' >
            <input type='hidden' name='y' id='y' >
            <input type='hidden' name='w' id='w' >
            <input type='hidden' name='h' id='h'>
            <input type='hidden' name='img' id='h' value='images/test/".$image1_name."'>
            <input type='submit' value='Crop Image'>
        </form>";

那么如果有人可以帮我解决这个问题，我还希望裁剪区域填充每张图像的整个高度空间，并使宽度适应 342x478 的比例，因此用户只能左右移动裁剪区域。

任何帮助都会非常感谢

4

0 回答 0