占位图生成

自定义尺寸/文字/颜色

423 次访问

占位图生成器

尺寸预设
背景样式
尺寸
px
px
颜色
文字
64

使用提示

· 设计稿占位:选好尺寸 + 颜色 → 下载 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
修复
颜色: #ff0000

CSS 颜色标准要求 hex 颜色以 # 开头;无前缀的值会被浏览器当作未知颜色名处理,回退为默认黑色。

3. 颜色值用了缩写但期望全色域

错误
颜色: #f00
修复
颜色: #ff0000

3 位 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,文字居中显示。

适用范围

适用于前端开发 / 设计稿中临时占位图片生成。不支持渐变、圆角、阴影等复杂样式;文字仅支持单行居中,超长自动截断。

原理图

用户输入尺寸 / 文字 / 颜色本地渲染引擎Canvas 2D 绘制生成占位图SVG / PNG 预览关键说明• 所有处理在浏览器内完成,无需上传数据至服务器• 支持自定义宽度、高度(像素)、背景色、文字内容及颜色• 生成结果可右键保存为 PNG 图片,或复制 SVG 代码
用户输入 本地处理 输出结果

开发者集成

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 个高频疑问

生成的占位图怎么下载保存?
生成图片后,工具界面会直接显示预览图。右键点击图片,选择「图片另存为」即可保存为 PNG 格式。如果工具内嵌了下载按钮,直接点击按钮也能触发下载。所有操作都在浏览器端完成,不经过服务器,生成即所得。
为什么我输入了文字但图片上没显示?
检查文字输入框是否为空,以及是否点击了「生成」或「刷新」按钮——占位图不会自动实时更新。另外,如果文字内容包含特殊字符(如 &、<、>),浏览器渲染时可能被转义或截断,建议先用纯中英文和数字测试。如果文字过长,工具可能会自动缩小字号或截断,具体取决于工具的实现逻辑。
生成的图片尺寸和我要的不一样,怎么调?
在「宽度」和「高度」输入框中分别填入需要的像素值(单位是 px,不支持百分比或 cm)。注意:工具生成的是固定像素的位图,不是响应式图片。如果填入的尺寸超过 5000px,部分浏览器可能因内存限制导致生成失败或卡顿。建议控制在 3000px 以内。
占位图背景色和文字颜色支持十六进制码吗?
通常支持。在颜色输入框中可以直接输入 #FF0000 这类 6 位十六进制值,也支持 3 位简写(如 #F00)。部分工具还支持颜色名称(如 red、blue)。如果输入后颜色没变化,检查是否漏了 # 号,或者格式是否正确(如 #FFF 是白色,#000 是黑色)。
生成的占位图可以商用吗?有没有版权问题?
占位图是纯色背景 + 文字的组合,属于简单的图形元素,不涉及复杂图案或字体版权。但需要注意:如果文字内容使用了受版权保护的字体(如方正、汉仪等),商用可能有风险。工具通常使用浏览器默认无衬线字体(Arial / 微软雅黑),商用相对安全。建议商用前自行确认字体授权。
这个工具和那些「占位图 API」有什么区别?
主要区别在于使用方式和数据流。本工具是纯浏览器端生成,输入尺寸和颜色后直接出图,不依赖网络请求,断网也能用。而占位图 API(如 placeholder.com)需要请求 URL 获取图片,依赖服务器,且通常有请求次数限制或需要注册。本工具适合「一次性快速生成」,API 适合「动态嵌入到代码中的占位图」。
生成的图片透明背景怎么设置?
如果工具支持透明度设置,通常在颜色选择器或输入框中可以输入 rgba 值(如 rgba(255,0,0,0.5))或使用十六进制加透明度(如 #FF000080)。如果不支持,则只能生成纯色不透明背景。部分工具默认背景是白色,无法透明。可以查看工具界面上是否有「背景透明」或「Alpha」选项。
手机浏览器上能用吗?生成图片会变形吗?
手机浏览器(Chrome / Safari / 微信内置浏览器)通常都能正常使用。但注意:部分手机浏览器在「图片另存为」时可能只保存缩略图而非原尺寸。建议生成后先长按图片预览,确认尺寸正确再保存。如果工具界面在小屏上布局错乱,可以尝试横屏使用。
生成的占位图模糊 / 有锯齿怎么办?
占位图是位图(PNG),在浏览器中放大显示时必然会出现锯齿。如果用于打印或高清屏(Retina),建议生成 2x 尺寸的图片(比如需要 200x200 的占位图,就生成 400x400),然后在 HTML 中设定显示尺寸为 200x200。另外,输入尺寸时不要用小数,浏览器对非整数像素的渲染会模糊。
选择 打开 +新窗口 esc关闭