Jquery Crop: cropper image not changing

Question

I have the following code:

<link rel="stylesheet" href="style.css">
<script src="/static/js/jquery/2.1.4/jquery.min.js"></script>
<script src="http://fengyuanchen.github.io/cropper/js/cropper.min.js"></script>
<form  action="" method="post" enctype="multipart/form-data">
<img id="crop" style="width:400px;height:200px;" />
<div id="img2" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>
X: <input type="text" id="crop_x" name="crop_x" /><br />
Y: <input type="text" id="crop_y" name="crop_y" /><br />
Width: <input type="text" id="crop_width" name="crop_width" /><br />
Height: <input type="text" id="crop_height" name="crop_height" /><br />
<input type="file" id="file" name="file" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script>

var url = null;
$('#file').on('change',function(){

    var file = this.files[0];

    if(url != null){

        URL.revokeObjectURL(url);

    }

    url = URL.createObjectURL(file);


    startCropper();

});


function startCropper(){

    $('#crop').removeAttr('src');

    $('#crop').attr('src',url);

    $('#crop').cropper({

    viewMode            : 0,

    cropBoxResizable    : false,

    minCropBoxWidth     : 100,

    minCropBoxHeight    : 100,

    dragMode            : 'none',

    preview             : $('#img2'),

    aspectRatio: 1,

    crop : function(e){

        $('#crop_x').val(e.x);

        $('#crop_y').val(e.y);

    }

 });
};
</script>

The problem is that when I select a new file, the new image is not showed (the old image is still displayed in the cropper).

As you can see, I check the old url and revoke this. When I don't use $("#crop").cropper({...}) in the startCropper() function, it works.

GitHub: https://github.com/fengyuanchen/cropper/tree/v2.3.0

How can I force the cropper to load the new image?

Answer 1

You need to call

$('#crop').cropper('destroy');

before crop initialization

Answer 2

This code will solve the problem of Image not changing in Cropper.

HTML

<input id="userImage" type="file" name="userImage" accept="image/*">

<div>
   <canvas id="canvas" style="display: none;">
      Your browser does not support the HTML5 canvas element.
   </canvas>
</div>
<div id="imagePreview" style="position: relative; overflow: hidden; border: 1px solid #000; background: #fff; width: 100px; height: 100px;"></div>

CSS

img {max-width: 100%;} /* This rule is very important, please do not ignore this! */

#canvas {
  height: auto;
  width: 250px; /*Change this value according to your need*/
  background-color: #ffffff;
  cursor: default;
  border: 1px solid #000;
}

JS

var canvas  = $("#canvas");
context = canvas.get(0).getContext("2d");

$('#userImage').on( 'change', function(){
if (this.files && this.files[0]) {
   if ( this.files[0].type.match(/^image\//) ) {
      var reader = new FileReader();
      reader.onload = function(evt) {
      var img = new Image();
      img.onload = function() {
         context.canvas.height = img.height;
         context.canvas.width  = img.width;
         context.drawImage(img, 0, 0);

         // Destroy the old cropper instance
         canvas.cropper('destroy');

         // Replace url
         canvas.attr('src', this.result);

         var cropper = canvas.cropper({
            //these options can be changed or modified according to need
            viewMode: 0,
            cropBoxResizable: false,
            minCropBoxWidth: 100,
            minCropBoxHeight: 100,
            dragMode: 'none',
            preview: $('#imagePreview'),
            aspectRatio: 1,
            crop : function(e){
               $('#crop_x').val(e.x);
               $('#crop_y').val(e.y);
            }
         });
       };
       img.src = evt.target.result;
    };
    reader.readAsDataURL(this.files[0]);
  } else {
    alert("Invalid file type! Please select an image file.");
  }
} else {
  alert('No file(s) selected.');
}
});

For more details and better understanding Visit

Cropper Official Documentation