how to save editable image using canvas in angular

Question

i am new on canvas, i am working on an angular where user loads an image from local and resize image and also save resized image in local. please guide me. image load on canvas is done but 2nd part to save edited or resized image remains. HTML code

  <input type="file" id="file" (change)="handleDrop($event)" />

<br />

<hr />

<canvas
id="canvasID"
width="720"
height="480"
style="border: 1px solid red"
></canvas>

ts code

ngOnInit() {
this.canvas = new fabric.Canvas('canvasID', { fireRightClick: true });
   }
handleDrop(e:any) {
// this.file = e.dataTransfer.files[0];
this.file = e.target.files[0];
const reader = new FileReader();
this.angularFireStorage.upload("/files"+Math.random(), this.file)
reader.onload = (imgFile:any) => {
  console.log(imgFile);
  const data = imgFile.target["result"];
  fabric.Image.fromURL(data, (img) => {
    let oImg = img.set({
      left: 0,
      top: 0,
      angle: 0
    }).scale(1);
  this.canvas.add(oImg).renderAll();
  var a = this.canvas.setActiveObject(oImg);
  var dataURL = this.canvas.toDataURL({format: 'png', quality: 0.8});
  console.log(dataURL);

  });
};
reader.readAsDataURL(this.file);
return false;
 }