占位图生成
生成自定义尺寸/文字的占位图。
什么是占位图生成？
占位图生成用于快速生成指定宽高、指定背景色和文字内容的图片，常见用途是在页面还没有真实图片素材时，用一张标注了尺寸信息（如“800×400”）的灰色占位图先把布局撑起来，方便预览页面排版效果，等真实图片准备好后再替换。生成的图片通常直接在浏览器本地通过 Canvas 绘制并输出为图片文件或图片地址，不需要真实上传图片素材。
为什么使用占位图生成？
前端开发和设计联调阶段，经常需要在页面里放很多张图片位置（比如商品列表、文章封面、头像），但真实素材还没有准备好，这时候用占位图既能让页面看起来完整、方便预览布局效果，又能一眼看出每张图应该是多大尺寸，避免用同一张任意图片拉伸变形导致布局判断失真。相比手动找一张随意图片再裁剪，占位图生成器可以直接按需要的宽高比例生成对应尺寸的图片，并且把尺寸文字直接印在图片上，团队协作时也方便沟通“这里应该放一张多大的图”。
使用示例
生成固定尺寸占位图
设置宽 800、高 400、背景色浅灰、文字“800x400”，生成一张 800×400 像素的图片，中间印着尺寸文字，可以直接用作 `<img src="...">` 的临时占位来源，预览页面卡片布局效果。
自定义文字与配色
设置宽 300、高 150，背景色改为品牌蓝、文字改为“产品封面图”，生成的占位图颜色和文案都可以贴合当前项目的视觉风格，而不只是默认的灰底数字。
批量占位不同尺寸的图片位
在一个列表页面里需要头像（100×100）、封面图（600×300）、横幅图（1200×200）三种不同尺寸的占位，分别用工具生成对应尺寸的三张图片，分别填入页面对应位置进行排版预览。
常见问题
不填文字会显示什么？
若文字留空，图片会自动显示当前设置的宽 × 高尺寸文字，方便当作布局占位图使用。
可以生成多大的占位图？
宽高各支持 1-4000 像素，超出范围会提示错误。
数据会上传吗？
不会。占位图全部通过浏览器 Canvas 在本地生成。
生成的占位图会上传到服务器吗？
不会，图片通过浏览器本地 Canvas 绘制生成，整个过程不需要联网也不上传任何内容，生成后可以直接下载保存或复制图片数据使用。
占位图可以用在正式上线的页面吗？
不建议。占位图的定位是开发调试阶段临时撑起布局用的，正式上线前应该替换成真实的产品图片、封面图或插画素材，长期保留占位图会影响页面的专业度和用户体验。
支持生成很大尺寸的图片吗？
支持常见的网页设计尺寸（几十到几千像素），但尺寸越大，浏览器绘制和生成图片所需的时间和内存也越多，如果需要用作印刷级别的超大图片，建议使用专业设计软件而非占位图工具。
和直接用在线随机图片服务有什么区别？
在线随机图片服务（如返回随机风景照片的图床）返回的是真实图片内容，适合做视觉预览效果；本工具生成的是纯色背景加尺寸文字的占位图，重点是清楚标注“这里应该是多大的图”，更适合布局阶段沟通尺寸信息，而不追求视觉美观度。
相关工具
← 返回工具箱· 数据均在浏览器本地处理，不上传服务器。