🖼 占位图生成器

自定义尺寸、背景色、文字内容，快速生成开发测试用的占位图

宽度 (px)

高度 (px)

格式

背景颜色

文字颜色

显示文字

字体大小 32px

预览

什么是占位图生成器？

占位图生成器是一款用于创建临时占位图片的在线工具。在网页开发、UI 设计、原型制作和内容管理系统中，经常需要使用占位图片来填充尚未准备好的图片位置。占位图可以帮助开发者在设计阶段预览页面布局效果、测试响应式图片在不同尺寸下的表现、以及在没有真实图片素材时保持页面的完整性。本工具支持自定义图片尺寸、背景颜色、文字标注、图片格式等参数，生成的占位图可以直接通过 URL 引用或下载为本地文件。相比使用外部占位图服务，本工具完全在浏览器端生成，无网络依赖，支持 SVG 和 Canvas 两种渲染模式。

如何使用占位图生成器

步骤一：设置图片尺寸 — 输入宽度和高度（像素），或选择常用预设尺寸（如 1920×1080 横幅、300×250 广告位、150×150 头像等）。支持自定义任意尺寸。
步骤二：自定义样式 — 选择背景颜色、文字颜色、字体大小，输入自定义文字（默认为尺寸标注如 "800×600"）。也可以选择纯色、渐变或图案填充模式。
步骤三：选择格式并获取 — 选择输出格式（PNG、JPG、SVG），直接复制生成的 Data URL 嵌入 HTML，或下载图片文件。SVG 格式支持无损缩放，适合响应式场景。

常见使用场景

场景一：网页原型和设计稿

在搭建网页原型时，产品图片、Banner 图等内容素材可能尚未准备好。使用占位图可以快速填充图片位置，帮助团队在没有最终素材的情况下评审页面布局和视觉设计。

场景二：响应式布局测试

生成不同尺寸的占位图来测试响应式图片的行为。例如测试 srcset 属性在不同屏幕宽度下加载不同分辨率图片的效果，验证 picture 元素的媒体查询是否正确匹配。

场景三：开发和演示环境

在开发环境中，数据库可能没有关联真实的图片资源。使用占位图可以避免页面出现破损图片图标，保持演示效果的完整性。CMS 系统中新增内容时，占位图也能提供良好的预览体验。

技术原理

占位图生成有两种主流实现方式。Canvas 方式通过 HTML5 <canvas> 元素绘制矩形背景和居中文字，然后导出为 PNG/JPG 格式（支持 Data URL 和 Blob URL）。SVG 方式直接生成 SVG XML 代码，利用 <rect> 绘制背景、<text> 放置文字，SVG 格式天然支持矢量缩放。

// Canvas 方式生成占位图
function createPlaceholder(width, height, bgColor, text) {
  const canvas = document.createElement('canvas');
  canvas.width = width; canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);
  ctx.fillStyle = '#999';
  ctx.font = `${Math.min(width,height)/8}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.fillText(text || `${width}x${height}`, width/2, height/2);
  return canvas.toDataURL('image/png');
}

// SVG Data URI 方式（更轻量）
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
  <rect fill="#e0e0e0" width="100%" height="100%"/>
  <text fill="#999" x="50%" y="50%" text-anchor="middle" dy=".3em" font-size="24">800×600</text>
</svg>`;
const url = 'data:image/svg+xml,' + encodeURIComponent(svg);