Javascript 尝试将crapper.js与base64映像一起使用

我尝试实现crapper.js工具

这是html

<div mat-dialog-container>
  <img id="image" #image [src]="localUrl" crossorigin>
</div>
<img src="{{imageDestination}}">

localUrl是一个基于图像的64 url

下面是我如何实例化cropper对象的

  @ViewChild("image", { static: false })
  public imageElement: ElementRef;

  @Input("src")
  public imageSource: string;

  public imageDestination: string;

  private cropper: Cropper;
  ngAfterViewInit() {
    this.cropper = new Cropper(this.imageElement.nativeElement, {
        zoomable: false,
        scalable: false,
        checkCrossOrigin: true,
        aspectRatio:1,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.imageDestination = canvas.toDataURL("image/png");
        }
    });
  }

但是我看不到裁剪器的图像。首先，我有以下错误

XHRGEThttp://localhost:4200/null
GEThttp://localhost:4200/null

显然，它无法正确读取Base64映像，因为它似乎需要从服务器引用它。此外，我不知道解决此错误是否允许显示裁剪器界面

更新 我通过[attr.src]=“localUrl”更改了[src]=“localUrl”，这是我在互联网上找到的，但我不明白为什么它是这样工作的。你能解释一下吗？错误又回来了 但是我仍然看不到裁剪器窗口的显示

这是Cropper对象的日志

此外

---

this.crapper.getcrappedcanvas（）=null

查看我更新的问题

XHRGEThttp://localhost:4200/null
GEThttp://localhost:4200/null