随机占位图生成器 - 自定义尺寸/文字图片

占位图的应用场景非常广泛。在网页设计和原型制作中，设计师通常需要快速填充页面布局中的图片区域，以验证整体的视觉结构和空间分配。在 UI/UX 设计领域，占位图帮助设计师在正式视觉素材准备完成之前就开始进行交互原型的搭建和测试。前端开发者在编写页面代码时，使用占位图可以确保布局在不同内容长度下都能正确显示。产品经理和项目经理在向利益相关者展示项目进度时，占位图可以直观地呈现页面的大致效果。此外，占位图还常用于邮件模板设计、社交媒体图片模板制作、演示文稿排版等场景。总之，任何需要临时图片填充以验证布局的场景，都是占位图发挥作用的地方。

本工具与传统的在线占位图服务（如 placeholder.com、via.placeholder.com）有几个关键区别。首先是技术架构不同：传统服务通常需要将请求发送到远程服务器生成图片再返回给用户，而本工具采用纯前端技术，所有生成操作都在浏览器本地完成，数据不经过任何服务器，隐私性和安全性更高。其次是功能丰富度不同：传统服务通常只能通过 URL 参数指定宽高和背景色，而本工具还支持自定义文字、字体大小调节、随机配色、四种导出格式选择和质量参数调节。第三是输出方式不同：传统服务只能下载图片文件，而本工具额外支持复制 Base64 编码和 SVG 代码，提供了更灵活的使用方式。最后是离线可用性：由于纯前端架构，本工具在断网状态下也能正常使用（前提是页面已加载完成），而传统服务必须依赖网络连接。

选择图片格式应根据具体的使用场景来决定。如果占位图需要透明背景（例如叠加在渐变或纹理背景上），请选择 PNG 或 WebP 格式，因为 JPEG 不支持透明通道。如果只关心文件体积且对画质要求不高，JPEG 格式在相同画质下通常比 PNG 体积更小。如果追求最优的压缩率和画质平衡，WebP 是目前的最佳选择，它比 JPEG 小约 25%-35% 的体积，同时支持透明通道。如果占位图将用于响应式设计，需要在不同尺寸下清晰显示，SVG 矢量格式是最佳选择，因为矢量图形可以无限缩放而不失真。在实际使用中，如果只是用于快速原型验证，推荐使用 JPEG（质量 80%）以获得最小的文件体积；如果是正式的设计交付，推荐使用 PNG 以确保无损画质。

Base64 是一种将二进制数据（如图片）转换为纯文本字符串的编码方式。点击工具中的"复制 Base64"按钮后，您会获得一段以 "data:image/png;base64," 或类似前缀开头的长字符串。您可以在 HTML 中这样使用：<img src="data:image/png;base64,iVBORw0KGgo..." alt="占位图">，将其中的 Base64 字符串粘贴到 src 属性值中即可。在 CSS 中，您可以将 Base64 编码用于背景图片：background-image: url('data:image/png;base64,iVBORw0KGgo...');。使用 Base64 编码的主要优势是图片数据直接嵌入代码中，无需额外的图片文件和服务器配置，特别适合快速原型开发和小型项目。但需要注意的是，Base64 编码会使数据体积增大约 33%，且无法被浏览器独立缓存，因此不建议用于大型项目中的大量图片。

SVG（可缩放矢量图形）是基于数学公式描述图形的矢量格式，与 PNG、JPEG 等基于像素的位图格式有本质区别。SVG 的核心优势包括：第一，无限缩放不失真，无论将 SVG 图形放大到多大尺寸，边缘始终清晰锐利，不会出现位图格式常见的锯齿和模糊问题，这使得它非常适合响应式设计和高 DPI（Retina）屏幕。第二，文件体积通常更小，对于简单的图形和文字内容，SVG 的文件体积往往远小于同等内容的位图。第三，SVG 是基于文本的 XML 格式，可以直接在代码编辑器中查看和修改，方便进行精确的样式调整。第四，SVG 支持 CSS 样式和 JavaScript 交互，可以在网页中实现动态的视觉效果。本工具支持将占位图导出为 SVG 代码并一键复制，方便您直接嵌入到网页代码中使用。

当字体大小滑块设置为 0 时，系统会启用自动字体大小计算功能。该功能会根据当前图片的宽度和高度，自动计算出一个在视觉上最为协调的字体大小。自动计算的逻辑是：字体大小与图片面积的平方根成正比，同时会考虑文字的长度以确保文字不会超出图片边界。例如，对于 1920×1080 的全屏尺寸图片，自动计算的字体可能会比较大；而对于 200×200 的头像尺寸图片，自动计算的字体则会相对较小。使用自动字体大小功能的好处是，您无需手动调整字体大小，系统总能给出一个合适的值，特别适合快速生成占位图的场景。当然，如果您对字体大小有精确的要求，也可以手动设置具体的像素值。

随机配色功能采用精心设计的配色算法，为占位图自动生成一组和谐的背景颜色和文字颜色组合。该算法并非完全随机，而是基于色彩理论中的互补色、对比色和类似色等配色原则，确保生成的颜色组合在视觉上既协调又有足够的对比度。背景颜色会从预定义的色系中随机选取，文字颜色则根据背景颜色的明暗自动选择黑色或白色，以保证文字在背景上的可读性。您可以通过点击"随机颜色"按钮同时切换背景和文字颜色，也可以通过"随机背景"按钮单独切换背景颜色，或通过"随机文字"按钮单独切换文字颜色。这种灵活的随机配色方式特别适合需要快速生成一批不同风格占位图的场景，如测试页面在不同配色方案下的视觉表现。

质量参数（1%-100%）控制着 JPEG 和 WebP 格式在压缩过程中的信息保留量。当质量设置为 100% 时，图片几乎不进行压缩，保持最高画质，但文件体积最大。随着质量值降低，压缩程度增大，图片细节逐渐丢失，文件体积也随之减小。具体来说，质量 80%-95% 区间内画质损失很小，肉眼几乎无法察觉，但文件体积可以减少 30%-50%，这是大多数场景下的推荐设置。质量 50%-80% 区间内画质会有一定损失，在细节丰富的区域可能会出现轻微的压缩伪影，但文件体积可以进一步显著减小。质量低于 50% 时，画质损失会比较明显，通常只在对文件大小有极端限制的场景下使用。建议在原型设计阶段使用质量 80%，在最终交付时根据实际需要在 85%-95% 之间选择。

所有图片生成操作都在您的本地浏览器中完成，完全不涉及任何远程服务器处理。本工具利用 HTML5 Canvas API 来绘制位图格式（PNG、JPEG、WebP），利用 SVG DOM 来生成矢量格式。当您调整宽高、颜色、文字等参数时，浏览器会即时重新渲染画布内容并更新预览。当您点击下载或复制按钮时，浏览器会将画布内容转换为对应的格式数据并执行下载或复制到剪贴板的操作。整个过程中，您的参数数据和生成的图片数据都仅存在于本地浏览器内存中，不会被发送到任何服务器。这意味着使用本工具完全无需担心隐私泄露问题，即使在处理包含敏感文字内容的占位图时也可以放心使用。

不需要。本工具完全免费，无需注册、无需登录、无需提供任何个人信息即可直接使用。打开工具页面后即可开始创建占位图，没有任何使用次数限制或功能限制。同时，由于采用纯前端架构，工具不需要与服务器进行任何通信，因此也不存在 API 调用次数限制或速率限制的问题。您可以根据需要随时使用，生成任意数量的占位图。这种零门槛的使用方式使得工具非常适合团队中的每一位成员直接使用，无需额外的账号管理和权限分配。