Jcrop squashes hình ảnh sau khi tải, áp dụng chiều rộng sai

Question

Tôi đang sử dụng Jcrop để chỉnh sửa hình ảnh do người dùng tải lên, khi người dùng quyết định chỉnh sửa hình ảnh của họ, cuộc gọi AJAX được thực hiện để lấy hình ảnh ban đầu của người dùng, mã của tôi như sau:

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

hộp được nạp, các phương thức được hiển thị và hình ảnh được nạp một cách hoàn hảo, nhưng một khi nó kết thúc bốc Jcrop nói đến chơi nó co lại chiều rộng hoàn toàn, để lại một hình ảnh của khoảng 20px rộng.

Ai đó có thể giúp tôi với điều này, gần 80% số lần điều này xảy ra. Chúc mừng!

Answer 1

tò mò, cậu thử:

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

Answer 2

Tôi tìm thấy giải pháp cho điều này, vấn đề là với việc sử dụng lưới đáp ứng, tôi đang sử dụng Bootstrap phương thức của Twitter để hiển thị các cắt xén hình ảnh, và css cho nội dung được đặt thành độ rộng tối đa: 100%; cài đặt này gây nhầm lẫn với Jcrop khi thu được chiều rộng và chiều cao của hình ảnh. Do đó để giải quyết việc này điều duy nhất cần thiết là để bọc các hình ảnh trong một DIV với .jcrop lớp hoặc bất cứ điều gì bạn thích và thiết lập css để:

.jcrop img { 
    max-width: none; 
} 

này sẽ giải quyết vấn đề này, bây giờ nếu ai biết làm thế nào để biến Jcrop đáp ứng tôi sẽ đánh giá cao sự giúp đỡ. Dưới đây là một cuộc thảo luận chi tiết hơn github pull

cổ vũ!