占位图生成器
生成自定义尺寸的占位图片
100% 客户端处理
做原型和设计稿的时候，经常真实照片还没到位，版面就得先搭起来。这个占位图片生成器直接在你的浏览器里生成尺寸准确的纯色占位图：设定宽高，挑选背景色和文字颜色，需要的话加一行标签，然后右键保存为 PNG。因为是用 HTML5 canvas 在本地渲染的，离线也能用，也不会上传任何内容——画线框图、测布局、填演示数据都很顺手。
如何使用
- 设置尺寸： 输入宽度和高度，单边最大 2000 像素
- 选择颜色： 用取色器分别设置背景色和文字颜色
- 添加文字： 输入自定义标签；留空则自动显示尺寸数字
- 生成图片： 画布上会立刻渲染出图片
- 保存下载： 右键点击图片，选择”保存图片”存为 PNG
功能特性
- 宽高 1 到 2000 像素自由设定
- 背景色和文字颜色可自定义
- 可选自定义标签，默认自动显示尺寸
- 基于 canvas 即时渲染
- 右键另存即可得到 PNG
- 完全本地处理，不上传任何数据
为什么要用占位图片？
占位图片解决的是一个真实的流程问题：排版决策不应该等最终素材。一个页面的布局取决于图片的宽高比和视觉比重，而不是图片里具体拍了什么。先放一张尺寸正确的灰色方块，间距、对齐、响应式表现马上就能评估；等正式图片到位，直接替换文件，布局早已验证过了。
它还能帮你避开原型阶段的一个常见陷阱：随手拿图库照片当替身。一张抢眼的照片会把所有人的反馈都带偏到图片内容上，而不是设计本身；更麻烦的是，临时图片经常一不小心就被带上正式环境。而一张标着尺寸的占位图——本工具会自动帮你标——永远不可能被误当成成品。如果再在标签里写上用途（比如”首页横幅""用户头像”），交接给设计师或客户时会更清楚。
使用场景
- 线框图和设计稿： 设计未定稿时先占住图片位置
- 前端开发： 用精确尺寸测试响应式布局和懒加载行为
- CMS 和演示站： 给模板、主题、测试环境填充像样的演示内容
- 写文档： 在需求文档里示意图片上传的尺寸要求
相关工具
常见问题
什么是占位图片？
占位图片是在真实图片还没准备好时，临时用在设计稿和原型里的替身图片。
支持哪些格式？
生成器在 HTML5 画布上渲染图片，右键点击图片选择“保存图片”即可存成 PNG。
可以自定义文字吗？
可以，输入任意文字作为标签；留空的话会自动显示图片尺寸。
最大能生成多大的图？
宽高最大支持 2000x2000 像素。日常做原型时，300 到 1200 像素之间的尺寸最常用。