App 启动页切图
运营周会上临时决定下周一上线「618 大促」启动页，设计师手头有 5 个待排期项目，没空出图。运营用本工具直接输入 1125×2436 像素（iPhone X 起所有全面屏机型通用），填入「618 狂欢 5 折起」和品牌红 #E60012，10 秒生成占位图。设计师拿到后直接在占位图上叠加素材，省去反复调尺寸的 30 分钟沟通时间。
尺 寸Dimensions
比例 4 : 3
背 景Background & Pattern
文 字Label
实时预览SVG · 矢量
代码片段HTML <img>
—
就绪 · 调整参数即实时预览，全程浏览器本地生成
第一节
关于本工具
About设计师给同事传设计稿，对方说“图裂了”——于是花十分钟临时P一个占位图。这个工具把这件事压到十秒：输入宽高、背景色和文字，直接生成一张占位图，无需打开PS或找在线编辑器。所有计算和渲染都在浏览器内完成，图片不会离开电脑，适合原型演示、代码开发阶段填充布局或给客户看页面框架。
使用场景
公众号封面占位
博主每周三晚 8 点固定推文，但周二下午 6 点才拿到合作方文案，封面图来不及做。用本工具按公众号封面标准 900×383 像素生成占位图，标题文字用「重磅｜本周五开奖」，配色用品牌蓝 #2B6CB0。图先占住推送位，等设计师出正式图后替换，避免因缺封面图导致推文延迟到周四。
UI 原型评审填坑
前端开发验收原型时发现「个人中心」页缺一张 300×300 的用户头像占位图，自己截图再裁切要 5 分钟，且容易比例不对。打开本工具输入 300×300，背景色 #F0F0F0，文字「头像」，1 秒生成。直接拖进 Sketch 标注稿，评审会上产品经理指着图说「这块后续接真实头像 API」，流程无中断。
电商详情页测布局
运营要测试「满减券」banner 放在商品图下方还是右侧的点击率，但设计稿要 2 天后才出。用本工具生成 750×200 的 banner 占位图，文字「满 199 减 30」，背景色用券类常用橙色 #FF8C00。直接嵌入商品详情页静态 Demo，A/B 测试跑 3 天，发现右侧位置点击率比下方高 12%，决策有数据支撑。
印刷品打样留位
宣传单页排版时，预留的「扫码领红包」二维码位置要等法务审核通过才能放码。用本工具生成 200×200 的占位图，文字「QR Code」，背景色 #CCCCCC。发给印刷厂打样，样张上二维码区域清晰可辨。等码通过后直接替换，避免因等码导致打样延迟 1 天，且占位图颜色与最终码底色接近，审样时视觉干扰最小。
第二节
使用指南
Getting Started使用步骤
- 1在「宽度」和「高度」输入框分别填入像素值（如 800×600），画布尺寸即时锁定
- 2在「背景色」拾色器中点选或输入十六进制色码，预览区底色同步更新
- 3在「文字内容」框输入占位文本（如“Banner 占位”），文字自动居中叠加在色块上
- 4点击「文字颜色」拾色器调整文字色值，预览区文字与背景对比度实时可见
- 5确认预览效果后，点击「下载图片」按钮，浏览器自动保存为 PNG 文件
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 宽度: 800, 高度: 600, 文字: "Hello World", 背景色: #3498db, 文字色: #ffffff | 生成一张 800×600 像素的占位图，背景为 #3498db（蓝色），中央显示白色 "Hello World" 文字。 | 常规：最常见的场景——自定义尺寸、文字、颜色，验证基础功能是否正常。 |
| 宽度: 1920, 高度: 1080, 文字: "", 背景色: #cccccc, 文字色: #000000 | 生成一张 1920×1080 像素的纯灰色占位图，无文字显示。 | 常规：空文字输入，验证工具是否允许不显示文字（适用于纯色占位场景）。 |
| 宽度: 1, 高度: 1, 文字: "单像素", 背景色: #ff0000, 文字色: #ffffff | 生成一张 1×1 像素的红色占位图，文字可能因尺寸过小无法完整渲染或不可见。 | 边界：极端最小尺寸，验证工具对极小尺寸的处理（文字溢出/截断/不渲染）。 |
| 宽度: 10000, 高度: 10000, 文字: "超大图", 背景色: #000000, 文字色: #ffffff | 生成一张 10000×10000 像素的黑色占位图，文件体积可能较大（数 MB），加载或生成时间可能较长。 | 边界：极端最大尺寸，验证工具对超大尺寸的限制或性能表现（浏览器/服务端是否超时或报错）。 |
| 宽度: 0, 高度: 0, 文字: "零尺寸", 背景色: #ffffff, 文字色: #000000 | 工具可能返回错误提示（如“宽度和高度必须大于 0”）或生成空文件。 | 易错：零或负尺寸输入，验证工具的输入校验逻辑（是否友好提示而非崩溃）。 |
| 宽度: 800, 高度: 600, 文字: "<script>alert('XSS')</script>", 背景色: #ffffff, 文字色: #000000 | 生成一张 800×600 的白色占位图，文字原样显示为 "<script>alert('XSS')</script>"（HTML 实体编码），不会执行脚本。 | 易错：文字中包含 HTML/JS 代码，验证工具是否进行 XSS 过滤（输出应转义而非执行）。 |
| 宽度: 800, 高度: 600, 文字: "中文字符测试", 背景色: #ff6600, 文字色: #00ff00 | 生成一张 800×600 的橙色占位图，中央显示绿色中文字符 "中文字符测试"。 | 常规：中文字符渲染，验证工具字体是否支持 CJK 字符（常见坑：中文乱码或缺失）。 |
常见错误对照
1.尺寸参数用了中文全角逗号或空格分隔
✗ 错误
800，600✓ 修复
800x600工具解析尺寸时只认小写字母 x 作为分隔符，全角逗号或空格会导致解析失败，返回默认尺寸。
2.颜色值省略了 # 号
✗ 错误
ff0000✓ 修复
#ff0000工具要求颜色值以 # 开头（标准 CSS 十六进制格式），省略 # 会被当作无效颜色，回退为默认灰色。
3.文字内容包含未转义的 HTML 标签
✗ 错误
你好<br>世界✓ 修复
你好\n世界工具在 Canvas 上渲染文字，<br> 不会被解释为换行，而是直接显示字符串。换行应使用 \n 转义序列。
4.尺寸值使用了小数或非整数
✗ 错误
800.5x600.2✓ 修复
801x600Canvas 元素只接受整数像素值，小数会被截断或四舍五入，导致最终图片尺寸与预期不一致。
5.颜色值用了 4 位或 8 位简写格式
✗ 错误
#f00✓ 修复
#ff0000工具仅支持标准的 6 位十六进制颜色（#RRGGBB），3 位简写（如 #f00）会被解析为无效值，回退默认。
6.文字内容含有未编码的 URL 特殊字符
✗ 错误
https://example.com?a=1&b=2✓ 修复
https://example.com%3Fa%3D1%26b%3D2占位图 URL 中文字参数会拼接在查询字符串里，& 和 = 会破坏 URL 结构，导致参数截断或解析错误。
7.尺寸值写反了宽高顺序
✗ 错误
600x800（实际需要 800x600）✓ 修复
800x600工具严格按 '宽x高' 顺序渲染，不自动修正。写反会导致图片比例与预期不符，尤其用于固定布局时。
8.颜色值用了 rgba 或 hsla 格式
✗ 错误
rgba(255,0,0,0.5)✓ 修复
#ff0000工具仅支持纯色十六进制，不支持透明度通道。rgba 会被整体当作无效字符串，回退默认灰色。
第三节
工作原理
How It Works核心公式
SVG 占位图 = <svg width="W" height="H" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="#C"/><text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="F" fill="#T">TEXT</text></svg>
变量说明
W占位图宽度，单位像素H占位图高度，单位像素C背景色，十六进制如 #3498dbTEXT显示的文字内容F字号，按宽高自适应计算T文字颜色，十六进制如 #ffffff
示例
生成 800×600 占位图，背景 #2ecc71，文字 "Hello" 白色。字号 F = min(800,600) × 0.1 = 60px。SVG：<svg width="800" height="600" xmlns="..."><rect width="100%" height="100%" fill="#2ecc71"/><text x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="60" fill="#ffffff">Hello</text></svg>。输出为纯 SVG 代码，浏览器直接渲染为绿色底白色字的占位图。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问生成的占位图能不能直接用，还是得再裁剪？＋
答
直接可用。占位图的尺寸就是你在输入框里填的宽×高（单位像素），生成后 PNG 图片的物理像素就是那个值，不需要二次裁剪。如果填了 300×200，出来的就是 300×200 的图片，不会多留白边或自动缩放。唯一要注意的是文字超出边界时会被截断，所以长文本建议先测一下字号和宽度是否匹配。
问为什么我填了中文文字，生成出来是乱码或者方块？＋
答
本工具是纯浏览器前端渲染，文字显示依赖系统字体。如果出现方块或乱码，通常是当前浏览器或操作系统缺少中文字体。解决方法：1）检查浏览器编码是否为 UTF-8（默认就是）；2）在颜色框里选深色背景+浅色文字更容易看出是否真的乱码还是只是字号太小；3）如果用了特殊符号或 emoji，部分浏览器不支持渲染。建议先用纯中文测试，比如“测试文字”四个字。
问占位图和缩略图是不是一回事？＋
答
不是。缩略图是把一张大图按比例压缩成小图，保留原图内容但体积变小；占位图是凭空生成一张纯色或带文字的图片，不依赖任何原始素材。占位图常用于设计稿还没定稿时，先用一个“假图片”占住位置，确定布局和尺寸。缩略图则是已经有了正式图片后做的压缩版。本工具只做占位图生成，不做已有图片的压缩。
问生成的图片背景颜色和文字颜色能不能用十六进制代码输入？＋
答
可以。背景色和文字颜色的输入框都支持十六进制色值（如 #FF0000 表示红色），也支持常见英文颜色单词（如 red、blue、#ccc 等简写形式）。如果输入了非法的颜色值，系统会默认回退到灰色背景 + 白色文字。建议直接复制设计稿里的色值粘贴进来，最准确。
问最多能生成多大尺寸的占位图？有没有上限？＋
答
理论上没有硬性上限，但受浏览器内存限制。实测在普通电脑上生成 5000×5000 像素的占位图流畅，超过 8000×8000 时浏览器可能提示“页面无响应”或直接卡死。移动端浏览器建议控制在 2000×2000 以内。如果项目需要超大尺寸占位图（如户外广告喷绘），建议用专业设计软件生成。
问生成图片的过程中，我的文字内容会不会被上传到服务器？＋
答
不会。本工具是纯前端实现，所有操作（包括文字输入、颜色选择、尺寸设定、图片生成）都在你自己的浏览器里完成，没有任何数据被发送到服务器。即使断网，刷新页面后依然可以正常使用。适合处理敏感或临时文案，不用担心隐私泄露。
问生成的占位图能保存成什么格式？能不能直接复制粘贴？＋
答
目前只生成 PNG 格式（带透明通道，适合网页设计）。生成后图片区域下方有“下载图片”按钮，点击后浏览器会自动下载 PNG 文件。如果需要复制粘贴到设计软件（如 Figma、Photoshop），建议下载后再拖入，部分浏览器不支持直接右键复制 Canvas 内容。如果一定要复制，可以截图后粘贴。
问为什么我填了文字但生成出来看不到，只看到纯色背景？＋
答
最常见的原因是文字颜色和背景颜色设置成了相同或极近似的颜色。比如白底白字、黑底黑字。检查一下：1）文字颜色是否与背景色明显不同；2）字号是否设得太小（默认 20px，如果尺寸很大比如 1000×800，20px 字会几乎看不见，建议调大到 60px 以上）；3）文字内容是否为空或只有空格。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。