title: Hot to reset an Image cropper without refreshing the page?
body: <p>I have an Image Cropping code that I got online. And it does the job.</p>
  <p>Select an image, Can crop it as I like. But the catch is, I m unable to figure out how to reset the script without refreshing the whole page.</p>
  <p>Resetting in the sense, remove the selected image or cropping under process image and able to select a new image.</p>
  <p><strong>Here's the Cropping code:</strong></p>
  <pre><code>&lt;link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css'&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.js'&gt;&lt;/script&gt;
  
  &lt;input type=&quot;file&quot; form=&quot;feed-post&quot; accept=&quot;image/x-png,image/gif,image/jpeg&quot; id=&quot;image&quot; onchange=&quot;previewFile()&quot; name=&quot;image&quot; class=&quot;file_image&quot;/&gt;
  &lt;div class=&quot;img-container&quot; id=&quot;some&quot;&gt;
    &lt;img id=&quot;image_cropped_preview&quot; /&gt;
  &lt;/div&gt;
  &lt;a class=&quot;salvar post-btn&quot; id=&quot;image_crop_btn&quot; &gt;Crop the Image&lt;/a&gt;
  
  &lt;script&gt;
  var recorte = $('.img-container &gt; img');
  recorte.cropper({
    movable: false,
    zoomable: false,
    rotatable: false,
    scalable: false
  });
  
  function previewFile() {
    var file    = document.querySelector('input[type=file]').files[0];
    var reader  = new FileReader();
  
    reader.onloadend = function () {
     $('img').show(); 
     recorte.cropper('replace',reader.result);
    }
    if (file) {
      reader.readAsDataURL(file);
    } else {
     recorte.cropper('replace','');
    }
  }
  
  $('.salvar').click(function(){
          temp = recorte.cropper('getCroppedCanvas').toDataURL(); 
          $(&quot;#some&quot;).html('&lt;iframe src=&quot;' + temp  + '&quot; frameborder=&quot;0&quot; style=&quot;border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;&quot; allowfullscreen&gt;&lt;/iframe&gt;')
  });
  &lt;/script&gt;
  </code></pre>
  <p>So, here is the stuff I tried to reset this.</p>
  <pre><code>&lt;script&gt;
  $(&quot;.cancel-post&quot;).click(function(){
       $(&quot;#image_cropped_preview&quot;).val('');
       $(&quot;.img-container&quot;).html('&lt;img id=&quot;image_cropped_preview&quot; /&gt;');
  });
  &lt;/script&gt;
  </code></pre>
  <p>JSFiddle: <a href="https://jsfiddle.net/harish3693/o7be8vg1/2/" rel="nofollow noreferrer">Here's the Link</a></p>
  <p>Unfortunately, the HTML seems to be reset back, but on select, a new image doesn't preview it as earlier until I refresh the whole page.</p>
  <p>Any Help is Appreciated.</p>