占位图生成
自定义尺寸/文字/颜色
使用提示
· 设计稿占位:选好尺寸 + 颜色 → 下载 PNG,用于 Figma/Sketch 等工具的素材占位
· 渐变背景:选择两个颜色形成 135° 渐变,适合 hero 图 / 海报背景
· 斜线 / 网格 / 圆点:业界设计师占位图常用纹理样式(picsum.photos 风格)
· A4 300dpi:2480×3508 是 A4 纸张 300 DPI 印刷标准尺寸
关于本工具
了解工具定位 · 使用场景 · 对比优势
使用场景
前端原型占位
UI 设计师和前端开发者在 Figma 或代码中搭建页面时,经常需要填充不同尺寸的图片来验证布局。手动找图、裁剪、调整颜色非常耗时。本工具直接输入宽高(如 400×300)、背景色和占位文字,一键生成纯色或渐变占位图,瞬间替换掉「灰色方块」,让原型图在评审会上更直观,节省反复切图的时间。
App 截图模板
产品经理做 App 演示文稿或应用商店预览图时,需要统一尺寸(如 iPhone 15 的 1290×2796 px)的纯色背景加上功能说明文字。手动用 PS 每张图新建画布、调色、打字,效率极低。本工具预设常用设备尺寸,输入文案和品牌色即可批量生成多张截图模板,直接拖入 Keynote 或 PPT 使用。
博客封面图速配
独立博主每篇文章都需要一张封面图,但不会用设计软件,也不想每次找无版权图片。本工具输入文章标题(如「2025 年 Python 学习路线」)和喜欢的配色(如深蓝底 + 白字),生成 1200×630 的标准博客封面图。文字自动居中,字号适配宽度,无需排版,截图即用。
社交媒体卡片
运营人员在微信群或朋友圈分享链接时,希望预览卡片显示自定义文案而非默认标题。本工具生成 1200×628 的 Open Graph 占位图,输入活动名称、日期和品牌色,输出图片 URL 直接填入网页的 og:image 标签。分享后卡片显示清晰的活动信息,提升点击率。
A/B 测试素材
增长黑客做着陆页 A/B 测试时,需要快速生成多组不同颜色、不同文案的 Banner 图片来对比转化率。手动用设计软件每张图改文字、改颜色,耗时且容易出错。本工具在浏览器内即时修改参数,复制图片链接即可嵌入测试脚本,几分钟内生成几十组测试素材,加速实验迭代。
对比矩阵本工具 vs 竞品 vs 传统方法
| 维度 | 本工具 | 竞品 A | 传统方法 |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理,图片不上传服务器 | 上传至服务器生成,需信任服务商 | 依赖设计人员本地操作,无网络传输 |
| 处理速度 | 即时生成(毫秒级) | 需等待上传+服务器处理(数秒) | 手动设计(数分钟至数小时) |
| 离线可用 | 完全离线(加载后断网仍可用) | 必须联网 | 完全离线 |
| 尺寸精确度 | 像素级精确控制 | 受服务器限制,部分平台有最小/最大尺寸 | 依赖操作精度,易出现像素偏差 |
| 批量生成 | 需手动重复操作 | 部分支持批量上传参数 | 可批量操作但耗时 |
| 使用门槛 | 无需注册,打开即用 | 通常需注册账号 | 需掌握设计软件技能 |
| 收费模式 | 完全免费 | 免费版有功能限制(水印/尺寸限制) | 需付费设计软件或外包费用 |
使用指南
上手步骤 · 输入输出 · 避坑提示
输入输出示例7 个典型场景,覆盖常规、边界与易错
| 输入 | 输出 | 说明 |
|---|---|---|
| 宽度: 800, 高度: 600, 文字: Hello World, 背景色: #3498db, 文字色: #ffffff | 一张 800×600 像素的蓝色背景图片,居中显示白色文字“Hello World” | 典型场景:社交媒体封面图尺寸 |
| 宽度: 1200, 高度: 630, 文字: 2024年终总结, 背景色: #2ecc71, 文字色: #333333 | 一张 1200×630 像素的绿色背景图片,居中显示深灰色文字“2024年终总结” | 典型场景:Open Graph 分享图标准尺寸 |
| 宽度: 1, 高度: 1, 文字: 像素点, 背景色: #ff0000, 文字色: #ffffff | 一张 1×1 像素的红色背景图片,文字“像素点”因尺寸过小无法显示 | 边界 case:最小尺寸 1px,文字溢出不可见 |
| 宽度: 9999, 高度: 9999, 文字: 超高清占位图, 背景色: #000000, 文字色: #ffffff | 一张 9999×9999 像素的黑色背景图片,居中显示白色文字“超高清占位图” | 边界 case:超大尺寸,浏览器渲染可能卡顿 |
| 宽度: 300, 高度: 200, 文字: , 背景色: #cccccc, 文字色: #000000 | 一张 300×200 像素的灰色背景图片,无文字 | 边界 case:文字为空时生成纯色占位图 |
| 宽度: 1920, 高度: 1080, 文字: 16:9 测试图, 背景色: #abc123, 文字色: #def456 | 一张 1920×1080 像素的背景色为 #abc123 的图片,居中显示颜色为 #def456 的文字“16:9 测试图” | 易错 case:用户输入非标准十六进制颜色值(无#号) |
| 宽度: 400, 高度: 300, 文字: 中文测试, 背景色: #ffffff, 文字色: #000000 | 一张 400×300 像素的白色背景图片,居中显示黑色文字“中文测试” | 典型场景:验证中文字符渲染效果 |
常见错误对照7 个常踩的坑 · 错误 → 修复
1. 尺寸参数写成了小数或负数
宽度: 300.5, 高度: -200宽度: 300, 高度: 200占位图尺寸必须是正整数像素值;小数会被浏览器四舍五入后产生非预期尺寸,负数无意义且可能触发浏览器渲染异常。
2. 颜色值省略了 # 前缀
颜色: ff0000颜色: #ff0000CSS 颜色标准要求 hex 颜色以 # 开头;无前缀的值会被浏览器当作未知颜色名处理,回退为默认黑色。
3. 颜色值用了缩写但期望全色域
颜色: #f00颜色: #ff00003 位 hex 缩写(#rgb)等价于 #rrggbb,但 #f00 只对应 #ff0000(纯红),若需要 #fa0000 则必须写全 6 位。
4. 尺寸超过合理范围导致页面卡死
宽度: 99999, 高度: 99999宽度: 1920, 高度: 1080超大尺寸的占位图(如 10 万像素)会生成巨大内存占用(约 40GB 未压缩位图),浏览器直接崩溃或 OOM。建议不超过 4096×4096。
5. 文字内容包含换行符但工具不支持多行
文字: 第一行
第二行文字: 第一行 第二行纯前端 Canvas 渲染的占位图通常只支持单行文本;换行符会被忽略或导致文字错位,改用空格或短横线分隔。
6. 颜色值用了 rgba() 但工具只支持 hex
颜色: rgba(255, 0, 0, 0.5)颜色: #ff0000该工具背景色仅接受 hex 格式(#rrggbb),rgba 会被解析失败;若需半透明效果,需在外部 CSS 中叠加 opacity。
7. 尺寸单位混入字符串
宽度: 300px宽度: 300占位图生成器的尺寸字段只接受纯数字(像素值),带 'px' 等单位的字符串会被当作非法输入,导致生成失败或回退默认尺寸。
工作原理
公式推导 · 流程图解 · 依据出处
核心公式
W = w, H = h, C = #RRGGBB, T = t
变量说明
W— 占位图宽度(像素)H— 占位图高度(像素)C— 背景色(十六进制 RGB)T— 居中显示的文字内容
示例
生成 800×600 像素、背景色 #3498db、文字为 'Hero Banner' 的占位图。W=800, H=600, C=#3498db, T='Hero Banner'。工具在浏览器端直接绘制 SVG 或 Canvas,输出为 PNG 图片,尺寸 800×600,背景填充 #3498db,文字居中显示。
适用范围
适用于前端开发 / 设计稿中临时占位图片生成。不支持渐变、圆角、阴影等复杂样式;文字仅支持单行居中,超长自动截断。
原理图
开发者集成
3 种主流语言 · 复制即用
from PIL import Image, ImageDraw, ImageFont
# 生成 400x200 占位图,背景色 #3498db,文字 "400x200" 白色
width, height = 400, 200
bg_color = "#3498db"
text_color = "white"
text = f"{width}x{height}"
img = Image.new("RGB", (width, height), bg_color)
draw = ImageDraw.Draw(img)
# 使用默认字体,居中绘制文字
bbox = draw.textbbox((0, 0), text)
tw, th = bbox[2] - bbox[0], bbox[3] - bbox[1]
x = (width - tw) // 2
y = (height - th) // 2
draw.text((x, y), text, fill=text_color)
img.save("placeholder.png")
print("已生成 placeholder.png")package main
import (
"image"
"image/color"
"image/draw"
"image/png"
"log"
"os"
)
func main() {
width, height := 400, 200
bg := color.RGBA{52, 152, 219, 255} // #3498db
img := image.NewRGBA(image.Rect(0, 0, width, height))
draw.Draw(img, img.Bounds(), &image.Uniform{bg}, image.Point{}, draw.Src)
f, err := os.Create("placeholder.png")
if err != nil {
log.Fatal(err)
}
defer f.Close()
if err := png.Encode(f, img); err != nil {
log.Fatal(err)
}
log.Println("已生成 placeholder.png")
}const { createCanvas } = require('canvas');
const fs = require('fs');
const width = 400;
const height = 200;
const canvas = createCanvas(width, height);
const ctx = canvas.getContext('2d');
// 填充背景
ctx.fillStyle = '#3498db';
ctx.fillRect(0, 0, width, height);
// 绘制居中文字
ctx.fillStyle = 'white';
ctx.font = '24px sans-serif';
const text = `${width}x${height}`;
const metrics = ctx.measureText(text);
const x = (width - metrics.width) / 2;
const y = (height + 24) / 2; // 近似垂直居中
ctx.fillText(text, x, y);
const buffer = canvas.toBuffer('image/png');
fs.writeFileSync('placeholder.png', buffer);
console.log('已生成 placeholder.png');常见问题
9 个高频疑问
生成的占位图怎么下载保存?
为什么我输入了文字但图片上没显示?
生成的图片尺寸和我要的不一样,怎么调?
占位图背景色和文字颜色支持十六进制码吗?
生成的占位图可以商用吗?有没有版权问题?
这个工具和那些「占位图 API」有什么区别?
生成的图片透明背景怎么设置?
手机浏览器上能用吗?生成图片会变形吗?
生成的占位图模糊 / 有锯齿怎么办?
相关工具
「生成 / 占位」下的其他工具