CodeKitHub工具介绍
Facebook故事生成器还原了真实Facebook故事竖版全屏的外观——头像环、姓名和时间戳头部、背景照片或渐变、加粗的叠加文字，以及底部的回复栏。
绝不能用它来伪造欺诈证据、骚扰或诽谤他人，或冒充某个真实的人实际发过的帖子或故事——这样做在很多司法辖区可能是违法的。
所有内容都使用HTML Canvas API在浏览器本地生成；不会上传到任何服务器。
为什么使用它？
- 在设计社交类App的新功能，真实的UI和后端还没做出来，需要一张逼真的竖版故事模拟图放进给相关人员看的演示文稿。
- 在做一个借用故事外观的表情包——回复栏、时间戳、加粗叠加文字——希望它看起来真的是Facebook风格，而不是一张随便加了文字的普通图片。
- 在教新媒体营销课，想用一个干净的示例讲解故事帖子的构成（头像环、时间戳、叠加文字、回复栏），而不是截屏别人真实的账号。
- 在整理设计作品集，需要展示一个故事概念，要求9:16的竖版比例和布局细节真正贴合Facebook的实际比例。
- 想快速试几种背景渐变或叠加文字位置的组合，因为一切都在预览里实时更新，也不需要账号或水印拖慢速度。
使用方法
- 设置姓名、时间戳和头像颜色（或上传照片）。
- 选择背景渐变或上传自己的图片。
- 输入显示在故事底部附近的叠加文字。
- 实时查看竖版预览效果更新，再点"Download PNG"保存图片。
示例
输入
姓名："Sam Whitfield" · 时间："4h" · 背景：蓝到粉渐变 · 文字："周日早晨的咖啡时光 ☕"输出
一张360×640的PNG图片，展示真实Facebook故事的样式：头像环、姓名和时间戳、通栏渐变背景、居中加粗的叠加文字，以及底部带心形图标的回复栏。图片会在实时预览canvas上立即生成，点一下就能下载——无需等待，无需服务器往返。
可以自定义的内容
- 姓名、时间戳，以及头像颜色或照片。
- 背景：双色渐变或上传的图片。
- 显示在故事底部附近的加粗叠加文字。
- 还原Facebook真实故事视觉样式的布局细节。
负责任地使用
这个生成器的目的是让人们能够轻松制作明确属于虚构的模拟图片，用于幽默创作、讲故事和设计工作。如果你分享用这个工具制作的图片，建议加上说明，让看到的人明白这不是真实的故事。
每个字段控制什么
| 字段 | 作用 |
|---|---|
| 姓名 | 显示在头部头像环旁边的名称 |
| 时间戳 | 显示在姓名旁边的自由文本时间（例如“4小时前”“2天前”） |
| 头像颜色/上传 | 彩色首字母头像，或你自己上传的照片 |
| 背景渐变/上传 | 双色渐变，或你自己上传的背景图片 |
| 叠加文字 | 显示在故事底部附近的加粗文字 |
常见问题
使用这个工具合法或符合道德吗？
工具本身用于娱乐、模拟、演示和设计工作是合法的。不合法或不道德的是用生成的图片去欺骗别人。请只把它用于明确是虚构或说明性质的用途。
工具会把我的内容上传到哪里吗？
不会。你输入或上传的一切都只保存在浏览器内存中，并用JavaScript直接绘制到canvas元素上。PNG图片在你的设备上生成和下载——一切都不会发送到任何服务器。
可以上传自己的照片作为故事背景吗？
可以——点击"Video background"下方的上传链接，就能用自己的图片替代渐变作为通栏故事背景。
导出的图片尺寸是多大？
导出的PNG尺寸为360×640，与真实Facebook故事使用的9:16竖版比例一致。
我应该用这个还是其他Facebook模拟生成器？
如果你要模拟全屏竖版故事，用这个故事生成器。如果需要评论区，用Facebook评论生成器；如果需要带封面照片和简介的完整主页，用Facebook主页生成器。
可以控制叠加文字在故事上的位置吗，比如放在顶部还是底部？
叠加文字默认显示在故事底部附近，这也是真实Facebook故事最常见的文字位置。目前不支持自由拖拽定位，如果需要放在别的位置，这是当前工具的一个布局限制。
背景图片上传支持什么文件格式？
背景上传支持JPG、PNG等常见的网页图片格式。如果不上传，工具会自动使用双色渐变，你可以用颜色控件自行选择。
时间戳会自动更新吗，还是需要自己输入？
是需要自己输入的自由文本——输入Facebook风格的相对时间，比如“4小时前”“2天前”，符合你模拟图的情境即可；它不会自动获取当前真实时间。
叠加文字可以写多行吗，还是只能一行？
叠加文字输入框可以输入任意长度的文字，但由于真实故事的文字通常保持简短加粗以便阅读，过长的文字可能会换行显得局促——较短的短语呈现效果最接近真实故事。
导出的图片包含视频吗，还是只是静态图片？
只是静态图片——工具导出的是一张故事样式的单帧PNG图片，不会生成带动画或视频的故事。