占位图生成器

什么是占位图

占位图（Placeholder Image）是在内容未准备好时临时用于占位的图片，可用于 UI 原型、页面布局、接口联调和文档示例，帮助你在缺少真实素材时保持结构完整。

功能亮点

• 自定义宽高：按像素设置尺寸，并提供常用预设。
• 颜色与文本：支持背景色、文字颜色、字号与对齐方式。
• 多格式导出：支持 PNG、JPEG、WebP、SVG 下载与复制 Data URL。
• 代码输出：自动生成 CSS 与 HTML/SVG 代码，便于快速粘贴到项目。
• 本地处理：生成与导出在浏览器本地完成，无需上传图片。

使用步骤

1. 设置宽度和高度，或点击常用尺寸预设。
2. 选择背景颜色与文字颜色，必要时点击随机颜色快速换一组。
3. 输入要显示的文本，设置字号与对齐方式。
4. 选择输出格式（PNG/JPEG/WebP/SVG），在预览区确认效果。
5. 点击下载图片，或复制 Data URL / Markdown 用于文档与测试。

使用建议

• 尺寸过大可能导致导出失败，建议先降低宽高再尝试。
• SVG 适合矢量占位和高清展示，位图格式更适合直接作为图片文件使用。
• 复制 Markdown 默认使用 Data URL，内容较长时建议改用下载后再引用文件。
• 用于组件开发时，可优先用 CSS + div 的占位方案，更轻量可控。

隐私说明

本工具在浏览器本地生成与导出占位图，不会将你的设置或生成结果上传到服务器。