占位图生成器

做原型时，真正的照片往往还没影儿，版面却得先搭起来。这个占位图片生成器会在 HTML5 canvas 上画出一张尺寸正确的假图：设定宽高，选择背景色和文字色，需要的话再加一行标签，最后保存为 PNG。整个过程都在浏览器本地运行，不会上传任何内容。

如何使用

1. 输入以像素为单位的宽度和高度，每条边可接受 1 到 2000。
2. 用两个取色器分别选择背景色和文字色。
3. 可选：输入一行标签。留空则自动打印尺寸。
4. 点击”生成”。画布立即重绘，下方一行会显示像素尺寸以及可能的对比度警告。
5. 右键点击图片，选择”图片另存为”下载 PNG。

逐像素绘制了些什么

渲染顺序很简单，当占位图看起来不对劲时值得了解一下。

1. 画布被调整为你输入的确切宽高。
2. 用 fillRect 把整块画布填满背景色。
3. 应用文字颜色，把原点设为居中（center/center），字体设为 Arial, sans-serif，字号为 max(min(width, height) / 10, 12) 像素。
4. 用 fillText 把标签画在正中心。

因为原点就在中心，任何标签都会自动水平垂直居中，无需手动测量。长标签不会换行也不缩小，所以在小图上可能溢出到边缘之外；请把标签写短，或者把尺寸调大。

页面还会计算两种颜色的 WCAG 相对亮度并显示对比度。比值低于 1.5 会提示”对比度极低”，低于 3 则提示”对比度偏低”。一张看着舒服的占位图通常用中灰背景配深灰标签，比值远高于 3。

实操示例

16:9 主视觉位。 设为 1280 × 720，浅灰背景 #e5e7eb，深色标签 #374151。字号变为 max(720 / 10, 12) = 72px，大到隔着一个房间也能读出这是个占位图。标签留空，它就打印 1280 × 720。

方形头像。 设为 256 × 256，背景 #666666、文字 #cccccc。字号是 max(256 / 10, 12) = 25px。这里的对比度约为 2.6，工具会标记为对比度偏低——如果你确实打算让人读标签，这是有用的反馈；但如果只是一块临时占位，也无伤大雅。

细长横幅。 设为 1200 × 90。较短边是 90，字号本应是 9px，却被下限抬到 12px。这正是应该手动输入标签（例如 AD 1200×90）而不是依赖尺寸文字刚好放得下的原因。

占位图与真实素材的工作流

占位图的意义在于，在内容存在之前先把布局定下来。一张图片的宽高比和视觉重量对网格的影响，远大于它的拍摄对象，所以一块尺寸正确的灰盒子能让你立刻确定间距、裁切和响应式断点。等正式素材到位，直接替换文件，布局早已验证过了。

还有第二个不太明显的好处：清晰的占位图能防止误上线。抢眼的图库照片一旦被当作替身，就会吸引所有人去评论照片而不是设计，而且它们习惯性地活到正式环境。一块明明白白打印着 1280 × 720 的盒子，不可能被误认成完成品。

占位尺寸速查表

当最终素材还不存在时，把尺寸对齐真实资源，才能让原型有用。下面这些尺寸值得记住。

位置	尺寸	说明
社交分享 / Open Graph	1200 × 630	约 1.91:1；安全区比整宽更窄
全高清主视觉	1920 × 1080	16:9；1280 × 720 版本是更轻量的替身
视频缩略图	320 × 180	16:9；做卡片也合适
方形头像	256 × 256	至少取 CSS 显示尺寸的 2 倍
应用图标源文件	512 × 512	再缩小到各个单独图标尺寸
博客内嵌配图	800 × 450	16:9；避免文字显得拥挤

输入尺寸、标签留空，图片就会打印自己的大小，评审者一眼就能看出正在看哪个位置。

局限与使用场景

• 只能不透明背景。 没有 alpha 选项，画布总会被填满。
• 不换行、不自动缩小。 长标签会溢出小画布。
• 界面上只有 PNG。 逻辑模块带有格式字段和默认质量，但界面始终渲染 canvas，而通过浏览器保存导出的就是 PNG。
• 不是设计工具。 没有边框、渐变、十字线、字体选择或多行文字。
• 字体固定。 文字使用 Arial，回退到通用无衬线字体。

它适合这些地方：

• 最终图片尚未确定时的线框图和原型
• 需要真实像素尺寸来测试响应式布局和懒加载的前端工作
• 给 CMS 模板和测试环境填充视觉中性的内容
• 必须标示上传尺寸要求的文档
• 邮件模板，已知尺寸的图片能预留正确的空间

相关工具

• Lorem 文本生成器 — 用假文填充文本区域。
• 宽高比计算器 — 推算匹配的宽高组合。
• 颜色选择器 — 找到带十六进制值的背景色和文字色。
• 图片压缩工具 — 发布前缩小成品图片。
• Favicon 生成器 — 按合适尺寸制作网站图标。