返回免费在线工具集合

占位图生成器

快速生成指定尺寸、底色与文字的占位图片,支持自定义格式,用于页面原型与设计稿排版。

图片 独立定制 输出:图片文件 免费使用 发布时间: 阅读量:5 作者:马慧
正在加载工具…

四个值先定成灰蓝

谭亦弛要给斑马原型的后台列表页撑版式,图片位还没接数据,评审又要看图,先造一批统一规格的图块。"宽度"填 800、"高度"填 600,"背景色"取 #e8ecf3、"文字色"取 #8a94a6,格式留"PNG"。颜色框按这种六位写法读,写坏了会退回默认灰蓝。宽高有下限,手滑填 8 会被抬到 16。刚打开页面画布上那张 600×400 是自动生成的,不算自己的成果。

设置宽高与配色

文字留空反而是尺寸

文字框可填可不填,本例选的是"文字留空"。留空之后画布正中自动出现"800 × 600",乘号两边带空格;这行字是工具按"宽 × 高"算出来写上去的,不是漏填也不是水印。字号跟着图块走,源码取 max(12, round(min(宽,高)/6)),600 除以 6 得 100px。评审时一眼能读出每块规格,比自己写一行标注更方便。

可选填文字或留空显示尺寸

生成只在画布上重画

按"生成"不写文件,只把画布重画一遍并给一句"已生成 800×600 占位图。",这里的乘号不带空格,和图上那行写法不一样,两处都实测过。核对三样:底色是不是 #e8ecf3、内沿有没有一圈 2px 描边、字是不是居中。源码里就是整块背景色加 strokeRect(1,1,w-2,h-2) 再叠居中文字,没有斜纹、图标或网格可选。提示只报尺寸,体积与文件名要到下载后才知道。

点生成看预览

下载后核对三项属性

按"下载"把画布编码成本地文件,格式跟着前面那一档走:PNG 给"placeholder.png",JPEG 给"placeholder.jpg"且质量固定 0.92。本例拿到 23,498 字节、约 22.9 KB 的 800×600 图块,去下载目录把文件名、体积、尺寸三项对一遍就能铺进列表页。工具不出 data URI,也不给 img 标签片段,想内联进原型页还得拿文件另转一道。

下载占位图

企业知识网( www.qiyezhishi.com )提供的结果为参考性内容,不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。

本文作者

马慧,企业知识网站长,10年+SEO/GEO经验,精通白帽SEO与网站优化,擅长全网营销与短视频引流,曾打造日均万IP的SEO博客(小小课堂网)、十万IP泛流量资讯网站(错误博客)。自川来熟食连锁店长,5年熟食生产与管理经验,精通抖音本地生活服务运营。