Jcrop squashes image after loaded, applies wrong width

Question

I'm using Jcrop to edit images uploaded by users, when a user decides to edit their image, an AJAX call gets made to get the original image of the user, my code is as follows:

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

The box gets loaded, the modal is displayed and the image gets loaded perfectly, but once it finishes loading and Jcrop comes to play it shrinks the width completely, leaving an image of about 20px wide.

Can someone please help me with this, almost 80% of the times this happens. Cheers!

Aldin

Answer 1

I found the solution for this, the problem is with using responsive grids, I'm using Twitter's Bootstrap modal to display the image cropping, and the css for the body is set to max-width: 100%; this setting confuses Jcrop when obtaining the width and height of the image. Therefore to solve this the only thing needed is to wrap the image in a DIV with class .jcrop or anything you prefer and set the css to:

.jcrop img {
   max-width: none;
}

this will solve the issue, now if anybody knows how to turn Jcrop responsive I would much appreciate the help. Here is a more detailed discussion github pull

cheers!

Aldin

thanks. i was facing the same issue and after using max-width:none on it, the issues was gone :-) – Idoux

As a suggestion, to turn Jcrop responsive I used a modal popup where Jcrop is loaded. Because this modal popup has a controlled width, it was easier to handle the responsive stuff. – Offenseless

Works! Many, many, many, many thanks! Had the very same issue, with Twitter's Bootstrap, and never thought that was the problem. – Doornail

This issue has been fixed, CSS class name is .jcrop-holder img now (juste in case you're updating from an old version): github.com/tapmodo/Jcrop/blob/master/css/jquery.Jcrop.css – Laplante

Answer 2

curious, did you try:

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

Salesclerk

Yes, I just tried it and I get the same result, Screenshot thats how it shows up. – Aldin

as a moderator, you should know that i physically can't add a comment below because that option does not appear to me since my reputation is not 50. – Salesclerk

@Anthony I'm not a mod (I wish I was...) :) This just showed up in a review queue. – Outsert