title: Cropper is not working on changing the image in cropperjs
body: <p>I am using cropper.js as cdn link. I can use cropper functionality completely fine on first image upload but when I upload new image, the existing image is not getting changed in cropping section. How can I re-initialise cropper with new data. </p>
  
  <p><strong>Here is my full code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function readURL(input) {
      globalImage = document.querySelector('input[type=file]').files[0];
      const reader = new FileReader();
      reader.onload = function readerOnload(e) {
          $('#previewImage').attr('src', e.target.result);
      };
      reader.readAsDataURL(document.querySelector('input[type=file]').files[0]);
      reader.onloadend = (function () {
          initCropper()
      });
  }
  
  function initCropper() {
      const image = document.getElementById('previewImage');
      var imgSrc = $('#previewImage').attr('src');
      var cropper = new Cropper(image, {
          dragMode: 'move',
          preview: '.preview',
          aspectRatio: 12 / 12,
          minContainerWidth: 400,
          maxContainerWidth: 400,
          minContainerHeight: 350,
          maxContainerHeight: 350,
          viewMode: 2,
          responsive:true,
          autoCrop: true,
          ready: function() {
              $('#crop_button').trigger('click');
          }
      });
      document.getElementById('crop_button').addEventListener('click', () =&gt; {
          var imgurl = cropper.getCroppedCanvas({ 
              width: 160,
              height: 160,
              minWidth: 256,
              minHeight: 256,
              maxWidth: 4096,
              maxHeight: 4096,
              fillColor: '#fff',
              imageSmoothingEnabled: false,
              imageSmoothingQuality: 'high'
          }).toDataURL();
          $('#croppedImage').attr('src', imgurl);
      })
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.7/cropper.css"&gt;&lt;/link&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input required id="custom_photo" type="file" onchange="readURL(this);" name="properties[Your Image]" class="product-form__input"&gt;
  &lt;button id="crop_button"&gt;Crop&lt;/button&gt;
  &lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;img style="width:450px;height:400px;display: none;" id="previewImage" src=""&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;div&gt;
                  &lt;img style="display: inline-block; height: auto;" id="croppedImage" src=""&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Anyone help me out in this issue, thanks in advance.</p>