At least in Augular 7, it seems replace method will create a additional ".cropper-container"s elements

[MaccabeeY]

It is a "bug" or is there a necessary code step required to avoid the creation of additional ".cropper-container" elements?

Thanks,
MaccabeeY

[fengyuanchen]

I guess it is a bug of your own code.

[MaccabeeY]

Thanks for your reply. Uunfortunately, I do not think your guess of a bug in my code is correct. You can easily see the creation of a 2nd 'class="cropper-container cropper-bg"' by going to https://stackblitz.com/edit/angular-cropperjs-demo?file=src%2Fapp%2Fapp.component.ts and doing the following.

Once at that stackblitz demo from the link above, then drop in the following code in the 'app.component.html' & 'app.component.ts', respectively, and open in your browser console (F12) and in the console; then find and open the <div class="cropper" element; the click the "Replace" button twice; and you will see the the new, additional <div class="cropper-container cropper-bg" get created.

app.component.html code:
`
<button type="button" (click)="replace()">Replace</ button>

<angular-cropper #angularCropper [cropperOptions]="config" [imageUrl]="imageUrl">

<img [src]="imgUrl"/>

`

app.component.ts code:
`
import { Component , ViewChild } from '@angular/core';
import { CropperComponent } from 'angular-cropperjs';

@ Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {

@ViewChild('angularCropper') public angularCropper: CropperComponent;
imgUrl = null;
config = {
aspectRatio : 16/9,
dragMode : 'move',
background : true,
movable: true,
rotatable : true,
scalable: true,
zoomable: true,
viewMode: 1,
checkImageOrigin : true,
cropmove:this.cropMoved.bind(this),
};
imageUrl = 'https://c.staticblitz.com/assets/sponsors/nrwl-63566809483ae6dec3bec24675bd9843224451c45c6a1693ecfa9d71b2cfe631.png'

constructor(){
}

cropMoved(data){
this.imgUrl = this.angularCropper.cropper.getCroppedCanvas().toDataURL();
}

replace() {
console.log('replace');
this.angularCropper.cropper.replace('https://c.staticblitz.com/assets/sponsors/nrwl-63566809483ae6dec3bec24675bd9843224451c45c6a1693ecfa9d71b2cfe631.png');
}
}
`