作者分享了一款完全在浏览器本地运行的文字图形生成器 GummyType，支持气泡、Y2K、镀铬等风格，无需账号、上传或服务端渲染。核心管线为 React 控件 → SVG 字符串 → SVG Blob → HTML Image → Canvas 栅格化 → 裁剪 PNG，SVG 生成逻辑封装为纯 TypeScript 函数，便于无浏览器环境测试。
字体一致性通过打包 TTF 文件并以内嵌 @font-face 方式写入 SVG 解决，避免不同设备回退字体导致的渲染差异。画布尺寸基于 CanvasRenderingContext2D.measureText 实测文本宽度计算，而非字符数，防止长句被裁剪或短句导出为巨大固定画布。预览与导出使用两套 SVG 渲染：预览框按最大字号固定尺寸保持稳定，导出则紧贴当前字号裁剪。PNG 导出通过读取 alpha 通道自动裁剪透明边距，并保留安全边距避免阴影被切，纯色或渐变背景时跳过此步骤。
细节处理：
• 用户输入空格替换为不换行空格防止 SVG 栅格化时被折叠；异步渲染通过 effect cleanup 标记失效结果防止旧渲染覆盖新预览；每次生成的 object URL 在替换或组件卸载时及时 revoke；输入长度设限避免极端画布尺寸。作者计划后续增加更多字体形状
• SVG 导出
• 预设样式
• 键盘控制与更多导出背景
#开发者 #工具 #GummyType #SVG #Canvas #Nextjs #TypeScript #前端
@DevToolboxHub