将数据 URI 转换为 Blob

Question

我目前正在使用 Jdenticon library for generating user identicons as a default profile picture. I'd like to convert the data URI for SVG to a Blob or make it as an image file so that I could store an image file into Firebase。

我尝试了一些来自 Stack Overflow 的示例代码，但其中 none 对我有用。 （我没有将数据转换成base64。我认为SVG语法中没有任何疯狂的字符。）

createIdenticonBlob(hash: string) {
  if (hash) {
    let svg = jdenticon.toSvg(hash, Math.min(50, 50));
    let uri = "data:image/svg+xml," + encodeURIComponent(svg);
    return this.uploadService.convertDataURIToBlob(uri); // I'm not sure :(
  }
}

jdenticon.toSvg(hash|value, size[, padding])

我不确定如何将 Data URI 转换为图像文件。有什么想法吗？

Answer 1

您不想将 dataURI 转换为文件，您想要从 svg 标记创建一个文件，这只是文本，如果您的插件真的 returns 一个 svg 标记，这是真的很容易做到：

createIdenticonBlob(hash: string) {
  if (hash) {
    let svg = jdenticon.toSvg(hash, Math.min(50, 50));
    let blob = new Blob([svg], {type: 'image/svg+xml'});
    return blob;
  }
}

将数据 URI 转换为 Blob

Convert Data URI to Blob

javascript

svg

identicon

data-uri

typescript