Question

我正在使用Jcrop来编辑用户上传的图像，当用户决定编辑他们的图像时，会进行AJAX调用以获取用户的原始图像，我的代码如下：

var jcrop_api;

$('.edit_image').on('click', function(e)
{
  var url = $(this).attr('data-url');

  e.preventDefault();

  $.ajax({
    url: url,
    type: 'GET',
    cache: false,
    beforeSend: function()
    {
      // Remove old box in case user uploaded new image bring the latest one
      $('#edit_box').remove();
    },
    success: function(result)
    { 
      if (result.error)
      {
        alert(result.error);
      }
      else
      {

        $('.edit_image_box').html(result);
        $('#edit_box').modal({ show: true});

        $('#original_img').load( function()
        {
          $(this).Jcrop({
            aspectRatio: 1,
            onSelect: updateCoords,
            boxWidth: 700,
            boxHeight: 700
          }, function()
          {
            jcrop_api = this;
          });
        });
      }
    }
  })
});

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

框被加载，模态被显示并且图像被完美加载，但是一旦完成加载并且Jcrop开始播放它就会完全收缩宽度，留下大约20px宽的图像。

有人可以帮我解决这个问题，几乎有80％的时间会发生这种情况。干杯！

Answer 1

我找到了解决方案，问题在于使用响应式网格，我使用Twitter的Bootstrap模式显示图像裁剪，并且正文的css设置为max-width：100％;获取图像的宽度和高度时，此设置会混淆Jcrop。因此，要解决这个问题，唯一需要的是将图像包装在带有.jcrop类或任何你喜欢的东西的DIV中，并将css设置为：

.jcrop img {
   max-width: none;
}

这将解决问题，现在如果有人知道如何转变Jcrop响应我会非常感谢帮助。以下是更详细的讨论github pull

喝彩！

Answer 2

好奇，你试过了吗？

function updateCoords(c)
{
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.x2);
  $('#h').val(c.y2);
};

加载后Jcrop压缩图像，应用错误的宽度

2 个答案: