剪辑图像并在另一个画布中显示

Question

我在一个页面上有两个画布。我需要在第一个图像中剪切图像并将其转换为第二个图像。

我有一个像下面的代码但是当我点击发送时，我只看到第二个画布中的黑色剪裁图像。另外，可选区域与裁剪前一样大。

  public clip() {
    var canvas = new fabric.Canvas('cLeft');
    let src = this.srcLeft;
    loadImage(src, canvas);

    // If there is enough width -> clipTo
    if (Math.abs(this.firstX - this.lastX) > 20 || Math.abs(this.firstY - this.lastY) > 20) {

      canvas.clipTo = (ctx) => {

        console.log("-->> clipTo: " + this.firstX + " " + this.firstY);

        var shp = new fabric.Rect({
          top: this.firstY,
          left: this.firstX,
          width: Math.abs(this.lastX - this.firstX),
          height: Math.abs(this.lastY - this.firstY),
          hasControls: false,
          selectable: false,
          evented: false
        });
        shp.render(ctx);
      };
      this.data = canvas.toDataURL();
    }
  }

  public send() {
    var canvas = new fabric.Canvas('cRight');
    fabric.Image.fromURL(this.data, function (img) {
      img.left = 10;
      img.top = 10;
      canvas.add(img);
      canvas.renderAll();
    })
  }