如何将Jdenticon生成的SVG Data URI转换为Blob存储到Firebase？

我之前在项目里也用Jdenticon做过默认头像，转Blob存Firebase的过程踩过几个小坑，给你梳理下正确的步骤：

核心问题分析 #

你之前尝试的Stack Overflow示例大概率是针对Data URI转Blob的场景，但Jdenticon的jdenticon.toSvg()返回的是纯SVG代码字符串，不是带data:image/svg+xml,...前缀的Data URI，所以那些示例才会失效。而且SVG本身不需要额外转base64，直接转Blob就能上传到Firebase。

具体实现步骤 #

1. 生成Jdenticon SVG字符串 #

首先调用Jdenticon的API获取纯SVG代码：

// 替换成你的用户唯一标识（比如用户ID、邮箱哈希值）
const userIdentifier = "user12345";
// 生成200x200的SVG，内边距8%
const svgString = jdenticon.toSvg(userIdentifier, 200, 0.08);

2. 将SVG字符串转换为Blob #

用原生Blob构造函数直接转换，注意指定正确的MIME类型：

function convertSvgToBlob(svgContent) {
  // 必须指定MIME类型为image/svg+xml，确保Firebase正确识别
  return new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8' });
}

const avatarBlob = convertSvgToBlob(svgString);

3. 上传Blob到Firebase Storage #

假设你已经完成了Firebase的初始化，直接用uploadBytes方法上传Blob：

// 导入Firebase Storage相关方法（根据你的项目环境调整导入方式）
import { getStorage, ref, uploadBytes, getDownloadURL } from "firebase/storage";

// 获取Storage实例
const storage = getStorage();
// 定义存储路径（比如按用户ID分类）
const avatarRef = ref(storage, `user-avatars/${userIdentifier}.svg`);

// 执行上传
uploadBytes(avatarRef, avatarBlob)
  .then((uploadSnapshot) => {
    console.log("默认头像上传成功！");
    // 可选：获取头像的公开下载URL
    return getDownloadURL(uploadSnapshot.ref);
  })
  .then((downloadUrl) => {
    console.log("头像下载地址：", downloadUrl);
    // 这里可以把URL存储到Firebase Firestore/Realtime Database中，关联用户信息
  })
  .catch((error) => {
    console.error("上传失败：", error);
  });

额外提示 #

• 如果需要将SVG转成PNG/JPG格式（比如某些场景不支持SVG），可以用Canvas先渲染SVG再导出为图片Blob，但SVG格式体积更小、不失真，更适合作为头像存储。
• 确保你的Firebase Storage规则允许当前用户上传文件，避免权限错误。

内容的提问来源于stack exchange，提问作者JeffMinsungKim