生成文字头像

生成文字头像

920 发布: 2026/5/20 12:20 本文总阅读量

实现源码

avatar

const createMockAvatar = (bgColor, text) =>
    `data:image/svg+xml;utf8,${encodeURIComponent(`
    <svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96">
        <defs>
            <linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stop-color="${bgColor}" />
                <stop offset="100%" stop-color="#ffcf91" />
            </linearGradient>
        </defs>
        <rect width="96" height="96" rx="48" fill="url(#g)" />
        <text x="50%" y="54%" text-anchor="middle" dominant-baseline="middle" font-size="30" fill="#ffffff" font-family="Arial">${text}</text>
    </svg>
`)}`;

const assistantAvatar = createMockAvatar('#6a4c3b', '');
const chestnutAvatar = createMockAvatar('#c98f4b', '');
const catAvatar = createMockAvatar('#f07d66', '');