将数据 URI 转换为 Blob答案

【问题标题】：Convert Data URI to Blob将数据 URI 转换为 Blob
【发布时间】：2018-08-06 02:33:12
【问题描述】：

我目前正在使用Jdenticon 库来生成用户identicons 作为默认个人资料图片。我想将SVG 的数据URI 转换为Blob 或将其作为图像文件，以便我可以将图像文件存储到Firebase。

我尝试了一些来自 Stack Overflow 的示例代码，但没有一个对我有用。 （我还没有将数据转换成 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 转换为图像文件。有什么想法吗？

【问题讨论】：

svg 是用 base64 编码的吗？
正如我所说，我还没有将 SVG 转换为 base64。我应该吗？
不，只是您链接中的示例编码为b64。所以如果你确认不是，你只需要new Blob([svg], {type:"image/svg+xml"})
感谢凯多的回答。我犯了一个非常简单的错误。如果您将其作为答案，我将接受您的答案。顺便说一句，我想以 JPEG 格式存储图像。有什么想法吗？
这是一个完全不同的问题，已经回答过很多次了。查看“svg to raster javascript”或“svg to png javascript”。（你不想要 jpeg）

标签： javascript typescript svg data-uri identicon

【解决方案1】：

你不想将 dataURI 转换为文件，你想从 svg 标记创建一个文件，这只是文本，如果你的插件真的返回一个 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;
  }
}

【讨论】：

我的代码看起来和你的答案完全一样。我会看看SVG to PNG。再次感谢您。