6

我正在使用 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% 的情况都会发生这种情况。干杯!

4

2 回答 2

9

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

.jcrop img {
   max-width: none;
}

这将解决问题，现在如果有人知道如何让 Jcrop 响应，我将非常感谢您的帮助。这里有更详细的讨论github pull

干杯！

于 2013-05-09T03:21:23.613 回答
-2

好奇，你试过吗：

function updateCoords(c)
{
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.x2);
  $('#h').val(c.y2);
};
于 2013-05-08T23:35:36.437 回答