Angular 如何将 SVG 转换为 Base64 字符串

Question

我想将 svg 元素转换为 base64 字符串。

我遵循了以下教程：https://thewebdev.info/2021/08/28/how-to-convert-inline-svg-to-base64-string-with-javascript/

这是我使用的代码：

HTML:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

打字稿：

constructor (
  @Inject(DOCUMENT) document: Document
) {
  document.querySelector("svg")
}

ngOnInit() {
  const s = new XMLSerializer().serializeToString(document.querySelector("svg"))
  const encodedData = window.btoa(s)
  console.log(encodedData)
}

但我在 .serializeToString(document.querySelector("svg")):

的 vs 代码中收到以下错误消息

'SVGSVGElement | null' 类型的参数不能分配给 'Node' 类型的参数 TS 2345

Answer 1

这里的问题是调用 ngOnInit 时 svg 没有初始化，因此 querySelector returns null。

在 ngAfterViewInit 中移动您的代码，如下所示：- .

ngAfterViewInit() {
  const svg = document.querySelector("svg");
  if (svg) {
     const s = new XMLSerializer().serializeToString(svg)
     const encodedData = window.btoa(s)
     console.log(encodedData)
  }
}

Angular 如何将 SVG 转换为 Base64 字符串

How to convert SVG to Base64 string in Angular

javascript

base64

svg

typescript

angular