如何在Ionic中将canvas保存为jpg？

ionic cordova plugin add cordova-plugin-file
ionic cordova plugin add cordova-plugin-filepath

<canvas id="myCanvas"></canvas>
<button ion-button (click)="saveCanvas()">保存为JPG</button>

import { Component } from '@angular/core';
import { File } from '@ionic-native/file/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private file: File, private filePath: FilePath) {}

  saveCanvas() {
    const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
    const dataUrl = canvas.toDataURL('image/jpeg', 1.0);

    this.getFilePath().then(filePath => {
      const fileName = 'canvas.jpg';

      this.writeFile(filePath, fileName, dataUrl).then(() => {
        console.log('Canvas saved successfully.');
      }).catch(error => {
        console.error('Error saving canvas:', error);
      });
    });
  }

  getFilePath(): Promise<string> {
    return this.filePath.resolveNativePath(this.file.externalDataDirectory);
  }

  writeFile(filePath: string, fileName: string, dataUrl: string): Promise<any> {
    return new Promise((resolve, reject) => {
      const blob = this.dataURLtoBlob(dataUrl);
      this.file.writeFile(filePath, fileName, blob).then(() => {
        resolve();
      }).catch(error => {
        reject(error);
      });
    });
  }

  dataURLtoBlob(dataUrl: string): Blob {
    const byteString = atob(dataUrl.split(',')[1]);
    const mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
  
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
  
    return new Blob([ab], { type: mimeString });
  }

}