非拉丁字符的Base64编码失败

Question

我正在研究VueJS项目，该项目基于输入生成SVG图像。生成它们后，我将它们中的数据作为base64编码的字符串发送到后端API。

现在，每当我尝试使用UTF8字符对字符串进行编码时，都会出现以下错误：

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

我试图通过将HTML中的所有字符替换为其Unicode代码点来解决此问题。但是，每当我尝试获取DOM元素时，Unicode编码的字符都会恢复为纯文本格式。

如何获取HTML作为base64编码的字符串？

可以在fiddle here中看到该问题。

我尝试同时使用XMLSerializer和仅运行innerHTML.toString()：

let svgEl = this.$el.querySelector('.svg-container svg')
if (!svgEl) {
  console.log('no poster element')
  return
}

// Using XMLSerializer:
console.log(btoa(new XMLSerializer().serializeToString(posterEl))

// Using innerHTML:
console.log(btoa(posterEl.innerHTML.toString()))

以上两个示例都产生相同的错误。

谢谢。