占位图片(Placeholder Image)是在真实内容尚未准备好时,临时填充布局的图形元素。在前端开发、UI 原型设计、文档编写等场景中,占位图能够直观展示图片区域的大小与位置,避免布局塌陷。
| 用途 | 尺寸 | 比例 |
|---|---|---|
| 缩略图 | 150 × 150 | 1:1 |
| 卡片图片 | 300 × 200 | 3:2 |
| 文章封面 | 800 × 600 | 4:3 |
| HD 视频帧 | 1280 × 720 | 16:9 |
| Full HD 壁纸 | 1920 × 1080 | 16:9 |
| 手机竖屏 | 1080 × 1920 | 9:16 |
本工具完全在浏览器中运行,使用 HTML5 <canvas> 元素绘制矩形背景与居中文字,再通过 canvas.toBlob() 将画布内容编码为 PNG 格式,最终触发下载。全程无需服务器,数据不离开设备。
自动模式下,字体大小根据图片宽度动态计算(约为宽度的 5%),确保文字在任意尺寸下都清晰可读。手动模式允许在 8–200 px 范围内精确控制字号。
src 属性,或通过 Base64 编码嵌入 CSS background-image,无需额外托管图片服务器。