← 返回工具箱
🖼 占位图片生成

配置参数

×
自动

📖 占位图片相关知识

什么是占位图片?

占位图片(Placeholder Image)是在真实内容尚未准备好时,临时填充布局的图形元素。在前端开发、UI 原型设计、文档编写等场景中,占位图能够直观展示图片区域的大小与位置,避免布局塌陷。

常用尺寸参考

用途尺寸比例
缩略图150 × 1501:1
卡片图片300 × 2003:2
文章封面800 × 6004:3
HD 视频帧1280 × 72016:9
Full HD 壁纸1920 × 108016:9
手机竖屏1080 × 19209:16

Canvas API 生成原理

本工具完全在浏览器中运行,使用 HTML5 <canvas> 元素绘制矩形背景与居中文字,再通过 canvas.toBlob() 将画布内容编码为 PNG 格式,最终触发下载。全程无需服务器,数据不离开设备。

字体大小自动计算

自动模式下,字体大小根据图片宽度动态计算(约为宽度的 5%),确保文字在任意尺寸下都清晰可读。手动模式允许在 8–200 px 范围内精确控制字号。

💡 使用技巧:下载后的 PNG 文件可直接用于 HTML 的 src 属性,或通过 Base64 编码嵌入 CSS background-image,无需额外托管图片服务器。