占位图生成器 - 创建自定义占位图片 在线
创建带文本、颜色和自定义尺寸的占位图片。导出为PNG、SVG或WebP — 用于网页设计模型。
常见问题
什么是占位图片生成器？
占位图片生成器是一个在线工具，可以创建具有自定义尺寸、颜色和文本的临时图片，用于Web开发、UI设计和原型制作。在开发的早期阶段，占位图片可以作为视觉替代品，指示实际内容最终将出现的位置。
如何使用此工具？
1. 使用宽度和高度输入框设置所需尺寸，或从预设中选择。 2. 使用取色器或输入HEX值选择背景色和文字颜色。 3. 可选输入自定义文字。 4. 调整字体大小。 5. 在画布上实时预览。 6. 选择导出格式并下载或复制。
我的数据安全吗？会发送到服务器吗？
您的数据100%安全，绝不会离开您的浏览器。此工具使用HTML5 Canvas API完全在客户端渲染图片。不会向任何服务器传输任何数据。
PNG、JPEG、SVG和WebP格式有什么区别？
PNG提供无损压缩和清晰文本。JPEG文件更小但使用有损压缩。SVG生成可无限缩放的矢量图片，文件最小。WebP提供比PNG和JPEG更好的压缩，同时保持良好质量。
什么是Data URI？
Data URI是一种将图片数据以base64编码字符串的形式直接嵌入HTML或CSS的方法，无需链接外部文件。对于原型制作非常有用。
为什么要用这个而不是placehold.co？
基于URL的服务需要互联网连接和外部服务器。此工具在浏览器中本地生成图片：离线工作，无外部依赖，无网络延迟，无使用限制。
可以生成高分辨率（Retina）图片吗？
可以。在导出设置中启用"Retina (2x)"开关。这会以指定尺寸的两倍在内部渲染，确保在高DPI显示器上清晰显示。
代码示例
// Placeholder Image Generator
function generatePlaceholder({ width = 300, height = 200, bgColor = '#CCCCCC', textColor = '#969696', text = '' } = {}) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
// Draw centered text
const displayText = text || `${width} × ${height}`;
const fontSize = Math.max(12, Math.min(width * 0.8 / (displayText.length * 0.6), height * 0.4, 200));
ctx.fillStyle = textColor;
ctx.font = `${fontSize}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(displayText, width / 2, height / 2);
return canvas;
}
// Download as PNG
const canvas = generatePlaceholder({ width: 800, height: 600, text: 'Hero Image' });
canvas.toBlob(blob => {
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'placeholder-800x600.png';
a.click();
}, 'image/png');
// Get as data URI
console.log(canvas.toDataURL('image/png'));