🖼️
免费占位图片生成器
生成带自定义尺寸、文字和颜色的彩色占位图片。包含社交媒体、原型和设计稿的标准尺寸。
预设尺寸
颜色主题
💡 用于 HTML 原型：使用「复制为数据 URL」选项并粘贴到 <img src="..."> 中作为内联占位图。用于 Figma / Sketch 设计，下载 PNG 并拖入。
常见用途
- 设计样机的占位符图像生成尺寸的彩色框供在 Figma、Sketch 或网页设计样机中使用，在真实图像准备好之前。
- HTML 原型的内联占位符使用
- CMS 内容插槽的占位符演示 CMS 模板时，使用占位符图像而不是真实内容进行敏感预览。
- 社交媒体图像模板为 Instagram、Facebook、Twitter、LinkedIn 文章模板生成正确尺寸的占位符。
- CSS 布局测试图像生成极端宽高比的图像来压力测试响应式 CSS 布局。
工作原理
一切都在你的浏览器中使用 HTML Canvas API 和手写的 SVG 标记完成——没有服务器、不上传、没有第三方服务。你设置尺寸、颜色和标签文字，工具会实时将图片直接绘制到 canvas 元素上，并按需序列化为 PNG、JPEG 或 SVG。
- 1设置尺寸和颜色输入宽度和高度（各 1–4000 px），或从涵盖常见社交媒体和设计尺寸的十一个预设中选择。从内置主题中选择背景和文字颜色，或直接输入任意十六进制值；原生颜色选择器和经过验证的文本框保持同步。
- 2Canvas API 即时渲染预览每次更改时，React effect 都会调用 drawPlaceholder()。该函数使用 CanvasRenderingContext2D 用背景色填充矩形，可选择以 15% 不透明度绘制淡淡的对角交叉线，然后测量并居中对齐你的标签文字——自动缩小字号，直到文字宽度不超过画布的 90%。
- 3导出为 PNG、JPEG 或 SVGPNG 和 JPEG 下载会调用 canvas.toDataURL()，在内存中将 base64 结果转换为 Blob 并触发下载——全部在用户手势内同步完成，以满足 iOS Safari 的下载规则。SVG 导出会构建一个独立的 SVG 字符串，包含匹配的 rect、可选的对角线和 text 元素，然后保存为 .svg 文件。
- 4批量导出与复制快捷方式“下载所有预设”按钮会动态导入 JSZip，使用同一绘制函数将十一个预设尺寸逐一重新渲染到离屏画布上，并将所有 PNG 打包为一个 ZIP。复制按钮可输出 PNG data URL、内联 SVG img 标签或 CSS background-image 声明，可立即粘贴到代码中。