How to fix security Error: The operation is insecure .toBlob, only with Safari?

Question

In an Angular 11.0.3 application, I'm using html2canvas 1.0.0-rc7 to save an HTML element and send it to a back-end server. With Safari 13.1.2 on iOS (version) we get the following error when trying to invoke canvas.toBlob():

SecurityError: The operation is insecure. toBlob@[native code] http://localhost/main-es2015ba432cf7cafdg.js ...

It works as expected in all other tested browsers, including Safari on macOS.

The code is as follows:

Template

<div class="container-indicator" #indicator>
    <div class="indicator-locationcar" [class.center-margin]="isMobile">
        <ng-container *ngFor="let spot of spots | keyvalue">
            <div class="{{spot.key}}" (click)="identifyLocationIndicator(spot.key)" [class.activated]="spots[spot.key]"></div>
        </ng-container>
    </div>
</div>

Controller

 @Component({
    selector: 'app-indicator-location',
    templateUrl: './indicator-location.component.html',
    styleUrls: ['./indicator-location.component.scss']
})
export class indicatorLocationComponent implements OnInit {
    @ViewChild('indicator') private indicator: ElementRef<HTMLElement>;
    // Other methods
    identifyLocationIndicator() {
        this.service.indicate(location).subscribe(() => {         
           // do something
        },
        error => {
           // do something
        });
        setTimeout(() => this.takeScreenshots(), 1000);
    }
    takeScreenshots() {
        html2canvas(this.indicator.nativeElement).then((canvas) => {
            canvas.toBlob((blob) => {
                const formData: FormData = new FormData();
                formData.append('image', blob);
                // do something with formData
            }, 'image/jpeg');
        });
    }
}