占位图片

一、工具功能说明

• 自定义占位图宽高、居中显示文字、文字字号、文字颜色、背景色；
• 支持透明背景PNG输出，适合前端页面占位、设计稿填充；
• Canvas本地实时绘图预览，无需后端，离线可用；
• 一键复制HTML img标签（Base64格式，直接粘贴页面使用）；
• 一键下载标准PNG图片文件到本地；
• 适合前端开发、UI页面、文档占位、演示页面空白填充。

二、使用实例（截图默认参数）

参数配置

图片宽：800  高：200
显示文字：800x200
文字颜色：#999999
字体大小：100
背景色：#dddddd
是否透明：否

生成后HTML代码示例

<img src="data:image/png;base64,xxxxxx" width="800" height="200" alt="占位图 800x200">

三、操作步骤

1. 填写图片宽高、自定义展示文字；
2. 选择文字颜色、字体大小、背景色、是否透明；
3. 点击【生成占位图】，下方预览框实时渲染图片；
4. 点击【复制HTML图片代码】复制Base64 img标签；
5. 点击【下载PNG图片】保存图片到电脑本地。

四、应用场景

• 前端页面开发：图片未上传时临时占位；
• UI原型、演示网站、后台管理页面填充空白区域；
• 文档、PPT、需求文档尺寸示意图片；
• 透明底图标占位、弹窗空白占位图。