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

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