从FabricJS中剪裁的矩形中保存图像

Question

我正在使用 clipTo 功能在矩形内剪切背景图片。在使用clipTo函数之前，我能够从画布中成功保存图像，并具有适当的高度和宽度。

但是在介绍 clipTo 功能之后，我能够保存图像，但最终（保存）图像中出现的背景图像看起来很奇怪。画布的颜色也出现在最终图像中。

以下是我画布的图片。

查看我的最终图像，它有1200 X 1200尺寸。 （这里我压缩以减小文件大小）。

这是我用来将图像添加到画布的脚本。

canvasImage(){
   const base_image = new Image();
   base_image.crossOrigin = 'Anonymous';
   base_image.src = 'assets/images/wallpaper.jpg';

   fabric.Image.fromURL(base_image.src, (myImg) => {
    this.backgroundimage = myImg.set({left: 100, top: 80, id: 'wallpaper'});

    const FakeCanvas = new fabric.Rect({
       originX: 'left',
       originY: 'top',
       left: 100,
       top: 0,
       width: 600,
       height: 600,
       fill: '#fff',
       objectCaching: false,
       selectable: false
    });
  const retina = this.FabriCanvas.getRetinaScaling();

  myImg.clipTo = function (ctx) {
    ctx.save();
    ctx.setTransform(retina, 0, 0, retina, 0, 0);
    FakeCanvas.render(ctx);
    ctx.restore();
  };
  myImg.scaleToHeight(800);
  myImg.scaleToWidth(900);
  this.FabriCanvas.add(this.backgroundimage).setActiveObject(this.backgroundimage);
  const hiddenImg = document.createElement('img');
  hiddenImg.src = this.FabriCanvas.getActiveObject().toDataURL();
  hiddenImg.id = 'target';
  hiddenImg.style.display = 'none';
  document.body.appendChild(hiddenImg);
});
 }

这是保存图像的代码。我使用乘数：2得到1200 X 1200维度。

saveImage() {
   const image = this.FabriCanvas.toDataURL({
      left: 0,
      top: 0,
      width: 600,
      height: 600,
      format: 'png',
      multiplier: 2
  });

 // api call
 this.imageService.upload(image).subscribe((res)=> {
  if(res.data.status === 200){ 
    console.log('image uploaded successfully')
  }else{
    console.log('Image upload failed')
  }
}

我想要实现的目标是什么？

最终图像必须仅包含背景图像，尺寸应为1200 X 1200。