无需登录 数据私有 本地保存

占位图服务模拟器 - 本地生成指定尺寸图片

83
0
0
0
本工具无需注册登录,打开页面即可使用。所有操作均在浏览器本地完成,图片数据不会上传到服务器。
步骤1选择图片尺寸

在图片配置面板中,您可以从12种常用预设尺寸中快速选择,包括300x200(小横幅)、400x300(内容图)、600x400(文章配图)、800x600(标准展示图)、1024x768(平板尺寸)、1200x800(宽屏横幅)、1920x1080(全高清背景)、500x500(正方形头像/产品图)、320x480(移动端)、375x667(iPhone适配)、200x200和150x150(小尺寸图标)。点击预设按钮后,宽度和高度输入框会自动填入对应数值。如果预设尺寸不满足需求,您可以直接在宽度和高度输入框中输入自定义数值(单位为像素),灵活调整至任意尺寸。

步骤2配置颜色方案

点击背景颜色选择器,可以通过颜色面板或直接输入十六进制颜色值来设置占位图的背景色。默认背景色为浅灰色(#e0e0e0),这种中性色调适合大多数开发场景。选择器旁边提供了几个常用快捷色块,点击即可快速切换。同样地,点击文字颜色选择器来设置占位图上显示文字的颜色,默认为中灰色(#888888)。建议背景色与文字色之间保持足够的对比度,以确保文字清晰可读。例如,深色背景搭配浅色文字,或浅色背景搭配深色文字。

步骤3设置文字内容和大小

在显示文字输入框中,您可以自定义占位图上显示的文字内容。默认情况下会显示当前图片的尺寸信息(如800x600),这在开发阶段非常实用,可以快速识别每个占位图的规格。您也可以输入其他文字,如项目名称、模块标识或任何有意义的标签。通过文字大小滑块,您可以调整文字的显示大小,默认值为72px。对于较大的占位图,建议使用较大的文字;对于小尺寸占位图,适当减小文字大小以避免文字溢出。

步骤4选择输出格式

根据您的使用场景选择合适的输出格式。PNG格式是推荐的默认选择,它提供无损压缩,支持透明度,文字清晰锐利,适合大多数占位图需求。JPEG格式适合对文件体积有严格要求的场景,您可以拖动质量滑块(默认0.9)来平衡文件大小和图片质量,但注意JPEG不支持透明背景。WebP是现代浏览器广泛支持的格式,体积比PNG小约30%且质量相当,适合追求性能优化的项目。SVG格式是矢量图,文件极小(通常仅几百字节),支持无限缩放不失真,特别适合需要在不同分辨率下显示的场景。

步骤5预览效果

在实时预览区域,您可以直观地看到占位图的最终效果。预览区域会实时反映您在配置面板中进行的所有调整,包括尺寸、颜色、文字内容和大小。预览区域下方会显示当前的文件格式信息(如PNG),以及等效的在线服务URL参考(如https://via.placeholder.com/800x600/e0e0e0/888888?text=800x600)。这个URL参考在与团队成员协作时特别有用,可以快速告知对方您使用的配置参数。如果URL需要分享,可以点击旁边的复制URL按钮一键复制。

步骤6下载或复制图片

确认预览效果满意后,您可以选择两种导出方式。点击「下载图片」按钮,图片将立即下载到本地,默认文件名包含尺寸和格式信息(如placeholder_800x600.png),方便文件管理。点击「复制到剪贴板」按钮,图片数据会被复制到系统剪贴板,您可以直接粘贴(Ctrl+V)到支持图片粘贴的应用中,如设计工具(Figma、Sketch)、文档编辑器(Word、Notion)或即时通讯软件(微信、钉钉)。两种操作均在本地即时完成,无需等待网络传输。