title: cropper.replace doesn't replace image
body: <p>I have a problem with replacing an image.
  I have a component in which on button click I pick image to input in cropper. But, if I choose to repick it cropper sets out two images in cropper. I'm using cropper.replace, but its doesn't change anything.</p>
  <p>I tried to destroy cropper with cropper.destroy() and cropper.reset() methods and then init it again but doesn't work for me as well.</p>
  <pre class="lang-js prettyprint-override"><code>   @ViewChild('cropperObj', { static: false }) public cropperObj: CropperComponent;
  
  imageSelected: boolean = false;
  imgURL: any = 'img/user_none.svg';
  croppedImg: string;
  
  onFileSelect(e) {
  let files = e.target.files;
  var mimeType = files[0].type;
  if (mimeType.match(/image/*/) == null) {
  alert(&quot;Only images are supported.&quot;);
  return;
  }
  let reader = new FileReader();
  reader.readAsDataURL(files[0]);
  reader.onloadend = (_event) =&gt; {
  console.log(this.cropperObj.cropper);
  this.croppedImg = &quot;&quot; + reader.result
  this.cropperObj.cropper.replace(this.croppedImg);
  }
  this.imageSelected = true;
  }
  </code></pre>
  
  <p>I expect the output of one image instead of two</p>