When Jcrop handle more than one image, the size is incorrect

Question

1,

2,

Question:When do we change images dynamically ? Answer: When user asynchronously upload images, such as using ajaxfileupload.js. when a user upload one image, and want to upload another one. If he uses Jcrop, the later images are all shown in size of the first image.

even though he uses following jQuery code to change the size of the new image, it`s still in wrong size. $("#target").attr("width","400"); $("#target").attr("height","250");

Does anyone know how to use Jcrop and show each images in its real size? I mean when the images is dynamically changed.

Thanks a lot!

The souce code is compressed into a zip file, they are all font-end code, so you may open it once it`s unzipped, please open "crop.html"

you may download the zip file (214KB) here: download

the content of "crop.html" is:

<!DOCTYPE html>
<html lang="en">

<head>


  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.Jcrop.js"></script>
  <script type="text/javascript">
    jQuery(function($) {

      var jcrop_api;

      initJcrop();

      $('#coords').on('change', 'input', function(e) {
        var x1 = $('#x1').val(),
          x2 = $('#x2').val(),
          y1 = $('#y1').val(),
          y2 = $('#y2').val();
        jcrop_api.setSelect([x1, y1, x2, y2]);
      });

      function initJcrop() {
        $('#target').Jcrop({
          onChange: showCoords,
          onSelect: showCoords,
          onRelease: clearCoords
        }, function() {
          jcrop_api = this;
        });
      };



      $('#changeToWiderPicture').click(function(e) {
        jcrop_api.destroy();
        $("#target").attr("src", "img/2.jpg");
        $("#target").attr("width", "400");
        $("#target").attr("height", "250");

        $("#normalPicture").attr("src", "img/2.jpg");

        $("#normanPicureIntroduction").html("Original picure:400X250");

        $('#changeToWiderPicture').hide();
        $('#changeBack').show();
        initJcrop();
        return false;
      });
      $('#changeBack').click(function(e) {
        jcrop_api.destroy();
        $("#target").attr("src", "img/1.jpg");
        $("#normalPicture").attr("src", "img/1.jpg");
        $("#normanPicureIntroduction").html("Original picure:250X400");


        $('#changeBack').hide();
        $('#changeToWiderPicture').show();

        initJcrop();
        return false;
      });


    });


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

    function clearCoords() {
      $('#coords input').val('');
    };
  </script>
  <link rel="stylesheet" href="css/main.css" type="text/css" />
  <link rel="stylesheet" href="css/demos.css" type="text/css" />
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />


</head>

<body>


  <table>
    <tr>
      <td>
        <img src="img/1.jpg" id="target" />
        <br>Picture with Jcrop attached

      </td>
      <td width=40%></td>
      <td>
        <img src="img/1.jpg" id="normalPicture" />
        <br>
        <span id='normanPicureIntroduction'>Original picure:250X400</span>
      </td>
    </tr>
  </table>

  <form id="coords" class="coords">

    <div class="inline-labels">
      <label>X1
        <input type="text" size="4" id="x1" name="x1" />
      </label>
      <label>Y1
        <input type="text" size="4" id="y1" name="y1" />
      </label>
      <label>X2
        <input type="text" size="4" id="x2" name="x2" />
      </label>
      <label>Y2
        <input type="text" size="4" id="y2" name="y2" />
      </label>
      <label>W
        <input type="text" size="4" id="w" name="w" />
      </label>
      <label>H
        <input type="text" size="4" id="h" name="h" />
      </label>
    </div>
  </form>


  <div style="padding-top:20px;">
    <button id="changeToWiderPicture" class="btn btn-mini">changeToWiderPicture</button>
    <button id="changeBack" class="btn btn-mini" style="display:none;">changeBack</button>
  </div>


</body>

</html>

score 0 · Answer 1 · edited Apr 13 '19 at 12:28

I find a solution from another answer on another question: use -

$('#image').removeAttr('style');

Or simply overwrite the corresponding CSS style, for example -

 $("#target").css({"width":"400px" ,"height":"250px"});

please be aware: CSS style has a higher priority than the attribute, so sometimes, you find your change does not apply, for example -

$("#target").attr("width","400");
$("#target").attr("height","250");

So, for safer, user CSS style instead of an attribute.

When Jcrop handle more than one image, the size is incorrect

1 Answers1