title: Cropper not cropping same image again, how to reset cropper
body: <p>I am using cropper.js jquery cropper to crop multiple images, but when i select image, cropper not allow to select same image again
  This is my cropper code. </p>
  
  <pre><code>var result = document.querySelector('.result'),
     img_result = document.querySelector('.img-result'),
     img_w = document.querySelector('.img-w'),
     img_h = document.querySelector('.img-h'),
     options = document.querySelector('.options'),
     save = document.querySelector('.save'),
     cropper = '';
  
      upload.addEventListener('change', function (e) {
          if (e.target.files.length) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  if (e.target.result) {
                      var img = document.createElement('img');
                      img.id = 'image';
                      img.src = e.target.result;
                      result.innerHTML = '';
                      result.appendChild(img);
                      save.classList.remove('hide');
                      options.classList.remove('hide');
                      cropper = new Cropper(img);
                  }
              };
              reader.readAsDataURL(e.target.files[0]);
          }
      });
  
      save.addEventListener('click', function (e) {
          e.preventDefault();
          var imgSrc = cropper.getCroppedCanvas({
              width: img_w.value,
              height: img_h.value
          }).toDataURL();
          cropped.classList.remove('hide');
          img_result.classList.remove('hide');
          switch (imageNo) {
              case 1:
                  imageC1 = document.querySelector('.imageC1');
                  cropped = document.querySelector('.cropped1');
                  imageC1.value = imgSrc;
                  $('.removeFirst').show();
                  break;
              case 2:
                  imageC1 = document.querySelector('.imageC2');
                  cropped = document.querySelector('.cropped2');
                  imageC1.value = imgSrc;
                  $('.removeSecond').show();
                  break;
              case 3:
                  imageC1 = document.querySelector('.imageC3');
                  cropped = document.querySelector('.cropped3');
                  imageC1.value = imgSrc;
                  $('.removeThird').show();
                  break;
  
              default:
                  imageC1 = document.querySelector('.imageC1');
                  cropped = document.querySelector('.cropped1');
                  imageC1.value = imgSrc;
                  $('.removeFirst').show();
          }
  
      });
  </code></pre>
  
  <p>When i crop image cropper not cropping same image again.
  How to reset cropper in jquery.
  I want to reset cropper here when i click on save button</p>
  
  <pre><code>$(".save").click(function () {
  
         //reset cropper here
      });
  </code></pre>