如何在angular 6或更高版本中将canvas内容下载为svg(.svg扩展名)图像/文件

<canvas #canvasElement></canvas>

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('canvasElement') canvas: ElementRef;

  ngAfterViewInit(): void {
    const context = this.canvas.nativeElement.getContext('2d');
    
    // 在canvas上进行绘制操作
    // ...
  }
}

downloadAsSvg(): void {
  // 获取canvas元素的引用
  const canvasElement = this.canvas.nativeElement;
  
  // 创建一个XML字符串，表示SVG图像的开始标签和属性
  const xml = `<svg xmlns="http://www.w3.org/2000/svg" width="${canvasElement.width}" height="${canvasElement.height}">`;

  // 将canvas内容转换为SVG格式的XML字符串
  const context = canvasElement.getContext('2d');
  const imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height);
  const dataUrl = canvasElement.toDataURL('image/png');
  const img = new Image();
  img.src = dataUrl;

  img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    const pngDataUrl = canvas.toDataURL('image/png');
    
    // 将PNG数据URL转换为Base64编码的字符串
    const pngBase64 = pngDataUrl.replace(/^data:image\/(png|jpg);base64,/, '');

    // 创建一个包含图像数据的Blob对象
    const pngBlob = this.base64ToBlob(pngBase64, 'image/png');

    // 将Blob对象转换为URL地址
    const blobUrl = URL.createObjectURL(pngBlob);
    
    // 添加SVG图像的XML字符串
    xml += `<image xlink:href="${blobUrl}" x="0" y="0" width="${img.width}" height="${img.height}"/>`;

    // 添加SVG图像的结束标签
    xml += '</svg>';

    // 创建一个包含SVG字符串的Blob对象
    const svgBlob = new Blob([xml], { type: 'image/svg+xml;charset=utf-8' });

    // 创建一个可以下载的链接
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(svgBlob);
    downloadLink.download = 'canvas.svg';
    downloadLink.click();
  };
}

// 将Base64编码的字符串转换为Blob对象
private base64ToBlob(base64: string, type: string): Blob {
  const sliceSize = 1024;
  const byteCharacters = atob(base64);
  const byteArrays = [];

  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);

    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, { type: type });
}

<button (click)="downloadAsSvg()">下载为SVG</button>