占位图生成器

工作原理

预览并不是你图片的效果模拟，它本身就是最终图片：一个按照你精确像素尺寸创建的 canvas 元素，用 2D 绘图 API 填充和添加文字，然后通过 canvas.toBlob 直接编码为 PNG、JPG 或 WebP。标签的字号会根据较短边缩放（大约是其八分之一，最小 12px），这样无论你生成的是 64px 的缩略图还是 4000px 的横幅图，文字比例都保持协调。在照片模式下，上传的图片会按照类似 CSS 的 object-fit: cover 方式进行等比缩放并居中裁剪，标签还会加上一层半透明深色背景，确保在内容繁杂的图片上依然清晰可读。

每次按键都会同步重绘；只有较重的 blob 编码会稍作防抖延迟，这就是为什么显示的文件大小会比预览慢半拍。有一点值得规划：纯色占位图的压缩效率高得惊人。一张 4000×4000 的纯色 PNG 通常不到 40 KB，因为 DEFLATE 算法会把完全相同的像素行压缩到几乎为零。这对快速做原型很棒，但如果你在测试加载性能，就会造成误导，因为同样尺寸的真实照片体积会重上百倍。想要真实的文件大小，可以使用照片背景模式，或者搭配测试文件生成器把资源填充到更真实的字节大小。

绘制、编码和下载全部发生在这个标签页内，包括你拖入的任何照片，它会通过对象 URL 读取，且从不离开内存。打开开发者工具，观察生成时的"网络"面板：不会有任何请求携带你的图片。