Jcrop compresses image after loading, applies wrong width

Question

I use Jcrop to edit images uploaded by users, when the user decides to edit their image, an AJAX call is created to get the original image of the user, my code looks like this:

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(cx); $('#y').val(cy); $('#w').val(cw); $('#h').val(ch); }; function checkCoords() { if (parseInt($('#w').val())) return true; alert('Please select a crop region then press submit.'); return false; }; 

The box loads, the modal is displayed, and the image loads fine, but as soon as it finishes loading and Jcrop starts playing, it compresses the width completely, leaving the image about 20 pixels wide.

Can someone please help me with this, in almost 80% of cases this will happen. Hooray!

Answer 1

I found a solution for this, the problem is to use adaptive grids, I use Twitter Bootstrap modal to display image cropping, and css for the body - max-width: 100%; this option mixes Jcrop when getting the width and height of the image. Therefore, to solve this, you only need to wrap the image in a DIV using the .jcrop class or whatever you prefer, and install css for:

 .jcrop img { max-width: none; } 

this will solve the problem, now if anyone knows how to enable Jcrop responsiveness, I would be very grateful for the help. Here is a more detailed discussion of github pull

Hooray!

Answer 2

Curiously, you tried:

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