ReactJS中如何将DiceBear生成的SVG头像转换为单张PNG图片

实现方案 #

通过浏览器原生Canvas API即可完成SVG到PNG的栅格化，无需引入额外第三方依赖，修改后代码如下：

import { createAvatar } from '@dicebear/avatars';
import * as style from '@dicebear/avatars-male-sprites';
import * as React from 'react';
import { useState, useEffect } from 'react';

import Layout from '@/components/layout/Layout';
import Seo from '@/components/Seo';

export default function HomePage() {
  // 存储转换后的PNG地址
  const [pngUrl, setPngUrl] = useState<string>('');
  // 自定义导出PNG的尺寸，可按需调整
  const EXPORT_SIZE = 200;

  useEffect(() => {
    // 生成原始SVG字符串
    const svgStr = createAvatar(style);
    // 将SVG字符串转为Blob对象
    const svgBlob = new Blob([svgStr], { type: 'image/svg+xml;charset=utf-8' });
    const svgUrl = URL.createObjectURL(svgBlob);

    // 创建图片实例加载SVG
    const img = new Image();
    img.onload = () => {
      // 创建Canvas绘制图片
      const canvas = document.createElement('canvas');
      canvas.width = EXPORT_SIZE;
      canvas.height = EXPORT_SIZE;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // 把SVG绘制到Canvas上
        ctx.drawImage(img, 0, 0, EXPORT_SIZE, EXPORT_SIZE);
        // 导出PNG格式
        const pngDataUrl = canvas.toDataURL('image/png');
        setPngUrl(pngDataUrl);
        // 释放临时资源避免内存泄漏
        URL.revokeObjectURL(svgUrl);
      }
    };
    img.src = svgUrl;
  }, []);

  return (
    <Layout>
      <Seo />
      <main>
        <section className='bg-dark'>
          <div className='flex flex-col items-center justify-center min-h-screen text-center text-white layout'>
            {/* 直接渲染PNG图片，也可以用a标签绑定pngUrl实现下载功能 */}
            {pngUrl && <img src={pngUrl} alt="生成的头像" width={EXPORT_SIZE} height={EXPORT_SIZE} />}
          </div>
        </section>
      </main>
    </Layout>
  );
}

注意事项 #

• DiceBear生成的SVG默认都是内联资源，不存在外部资源加载问题，无需额外处理跨域
• 调整EXPORT_SIZE变量即可修改最终导出PNG的分辨率
• 若需要提供下载功能，只需新增a标签，设置href={pngUrl}、download="avatar.png"属性即可

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