Jcrop在加載後壓縮圖像，應用錯誤的寬度

我使用Jcrop編輯用戶上傳的圖像，當用戶決定編輯他們的圖像時，AJAX調用獲取用戶的原始圖像，我的代碼是如下：Jcrop在加載後壓縮圖像，應用錯誤的寬度

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來發揮它完全收縮的寬度，留下大約20像素寬的圖像。

有人可以幫助我這個，幾乎80％的時間發生這種情況。乾杯!

來源

2013-05-08 CupOfJoe

-2

好奇，你嘗試：

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

來源

2013-05-08 23:35:36 carrabino

這不提供問題的答案。要批評或要求作者澄清，在他們的帖子下留下評論 - 你總是可以評論你自己的帖子，一旦你有足夠的[聲望]（http://stackoverflow.com/faq#reputation），你將能夠[評論任何帖子]（http://stackoverflow.com/privileges/comment）。 – Undo 2013-05-08 23:55:39

是的，我只是試了一下，我得到了同樣的結果，[截圖]（http://www.guevaraguerra.com/Screen%20Shot%202013-05-08%20at%207.09.25%20PM.png）多數民衆贊成如何它出現了。 – CupOfJoe 2013-05-08 23:55:48

作爲一個管理員，你應該知道我身體上不能在下面添加評論，因爲這個選項在我看來並沒有出現，因爲我的聲望不是50. – carrabino 2013-05-08 23:58:11

我發現這個問題的解決，問題是用響應網格，我使用Twitter的引導模式顯示圖像裁剪，併爲的CSS body設置爲最大寬度：100％;此設置在獲取圖像的寬度和高度時會混淆Jcrop。因此，要解決這個問題唯一的解藥是包裝與類.jcrop或任何一個DIV你喜歡的圖像和CSS設置爲：

.jcrop img { 
    max-width: none; 
}

這將解決這個問題，現在如果有人知道如何打開Jcrop響應我非常感謝幫助。這裏有更詳細的討論github pull

乾杯！

來源

2013-05-09 03:21:23 CupOfJoe

謝謝。我正面臨同樣的問題，使用max-width後：沒有問題，問題已經消失:-) – 2013-10-08 06:26:28

作爲一個建議，爲了使Jcrop響應，我使用了一個模式彈出窗口，其中Jcrop被加載。因爲這個模式彈出窗口的寬度是可控的，所以處理響應的東西更容易。 – daigorocub 2014-02-19 17:42:48

作品！許多，很多，很多，非常感謝！與Twitter的Bootstrap有同樣的問題，從來沒有想到這是問題。 – 2014-03-06 16:43:19

Jcrop在加載後壓縮圖像，應用錯誤的寬度

回答

相關問題