使用方法
缩略图生成只做三件事：读本地图片、按目标尺寸裁剪缩放、给出可下载的结果。四步：
- 点「选择图片」，从本机挑一张图，支持 JPG、PNG、WebP 等浏览器能解码的格式。
- 「目标尺寸」在下拉框里 18 选一，演示默认 1280×720。
- 「JPEG 质量」拖动滑杆，范围 50 到 95，演示值 80。
- 点「生成缩略图」出预览，满意后点「下载 JPEG」存到本机。
页面打开时会先用一块示例画布顶住结果区，方便你先看清目标尺寸的形状，再决定要不要换图。
缩略图生成能解决什么
它解决「手上图片尺寸不对、又不想装软件」这件事，三类场景最常见：
- 发视频要封面：相机原图是 3:2，平台要 16:9，直接上传会被裁得莫名其妙，本页从中心裁，主体大多能保住。
- 做社交分享图：Open Graph 要 1200×630，比例特殊，用本页一次裁到位。
- 压缩体积：一张 4000 像素宽的原图直接传网站太慢，缩到 1280 宽同时压到几十 KB。
它不做三件事：不做批量（一次一张，避免误操作）、不加文字或水印、不做格式转换（只输出 JPEG，要 PNG 请用专门的转换器）。
原理和变量
① 裁剪缩放怎么算：设原图宽 iw 高 ih、目标宽 w 高 h，缩放比取 Math.max(w / iw, h / ih)，也就是「取较大的那个比例」，保证缩放后至少有一个方向盖住目标框。
② 为什么要取较大比例：如果按较小比例缩放，图片会有一边短于目标框，画布里就会露出空白或被迫拉伸变形。取较大比例后图片只会「多出来」，多余的从中心裁掉，画面比例与内容都不失真。
③ 中心裁剪的取点：缩放后的图宽记为 sw、高记为 sh，裁切起点是 (sw - w) / 2 与 (sh - h) / 2，即两边各裁掉一半，所以主体居中时裁完最稳。
④ 输入怎么变成输出：一张 1280×720 的原图选 1280×720 目标，比例相同，缩放比为 1，等于原样输出；换成 640×360，比例仍是 16:9，缩放比 0.5，面积变成原来的四分之一，像素量从 92.2 万降到 23.0 万。
⑤ 边界与校验：没选文件时点下载，会提示「请先选择一张图片」；选了非图片文件，浏览器解码失败，页面提示「这个文件不是浏览器能解码的图片」；目标框比原图大时照常输出，但会被放大、边缘会变软，页面会提示已放大的倍数。
⑥ 常见误用：一是拿竖图去裁 16:9，主体若不在中间就会被裁掉，建议先在本页看预览再下载；二是以为拖低质量能无限减小体积，其实到 50% 以下画质下降很快而体积省得有限；三是把 PNG 透明背景的图存成 JPEG，透明区会补成白色，本页会在结果里提醒。
完整示例
演示场景：原图 1280×720（16:9），目标尺寸 1280×720，质量 80。
- 缩放比 = max(1280 ÷ 1280, 720 ÷ 720) = 1，等于原样输出，不做裁剪。
- 把目标改成 640×360：缩放比 = 0.5，输出 640×360，面积是原图的四分之一，像素量 23.0 万。
- 把目标改成 1080×1080（1:1）：缩放比 = max(1080 ÷ 1280, 1080 ÷ 720) = 1.5，图放大到 1920×1080，再从中心裁出 1080×1080，左右各裁掉 420 像素。
- 把目标改成 200×200（公众号缩略图）：缩放比 = max(200 ÷ 1280, 200 ÷ 720) ≈ 0.2778，输出 200×200，像素量从 92.2 万降到 4.0 万。
一张 1280×720 的 JPEG 在质量 80 时通常落在 60 到 140 KB；同尺寸的 PNG 往往是它的三到五倍，所以缩略图默认用 JPEG 输出。
输入范围与对照表
下表列出 18 种常见用途的缩略图尺寸，前 12 行直接展开，余下 6 行点「加载更多」：
| 用途 | 尺寸 | 宽高比 | 像素量 |
|---|---|---|---|
| YouTube 视频封面 | 1280×720 | 16:9 | 92.2 万 |
| YouTube 高清封面 | 1920×1080 | 16:9 | 207.4 万 |
| YouTube 小封面 | 640×360 | 16:9 | 23.0 万 |
| YouTube 播放器内封面 | 480×360 | 4:3 | 17.3 万 |
| Open Graph 社交卡片 | 1200×630 | 40:21 | 75.6 万 |
| Twitter 大图卡片 | 1200×675 | 16:9 | 81.0 万 |
| Twitter 小卡片 | 600×335 | 120:67 | 20.1 万 |
| Instagram 方形 | 1080×1080 | 1:1 | 116.6 万 |
| Instagram 竖版 | 1080×1350 | 4:5 | 145.8 万 |
| Instagram 横版 | 1080×566 | 540:283 | 61.1 万 |
| 微信文章封面 | 900×383 | 900:383 | 34.5 万 |
| 公众号缩略图 | 200×200 | 1:1 | 4.0 万 |
| B 站视频封面 | 1146×717 | 382:239 | 82.2 万 |
| 知乎文章头图 | 1200×500 | 12:5 | 60.0 万 |
| 通用方形缩略图 | 300×300 | 1:1 | 9.0 万 |
| 电商主图 | 800×800 | 1:1 | 64.0 万 |
| 商品列表缩略图 | 400×400 | 1:1 | 16.0 万 |
| 邮件头图 | 600×200 | 3:1 | 12.0 万 |
输入范围：目标尺寸 18 档，从 200×200 到 1920×1080；JPEG 质量 50 到 95，步长 5；单张图片建议不超过 20 兆像素，再大浏览器解码会明显变慢。宽高比一栏是约分后的结果，例如 1200×630 约成 40:21。
结果边界和舍入
三条边界：
- 只裁不拉伸：所有尺寸都走中心裁剪，画面不会变形。代价是当原图比例与目标差得远时，边缘内容会被裁掉，重要元素请尽量放在中心。
- 透明会丢：输出是 JPEG，不支持透明通道。PNG 透明背景会补成白色，需要保留透明请改用 PNG 输出的转换器。
- 不写元数据：输出文件里不含拍摄参数与地理位置，等于顺手做了一次去元数据处理；这也意味着原始的 EXIF 信息不会保留。
常见问题
图片会上传吗？
不会。读取与裁剪都在浏览器里用画布完成，图片不会离开你的设备。
为什么竖图裁 16:9 会丢内容？
中心裁剪只保留中间那一块，竖图裁成宽幅时上下会被切掉。先把主体挪到中间，或在裁剪前自行留白。
能一次处理多张吗？
不能。一次一张，避免选错尺寸批量出错；需要批量请用专门的批量压缩工具。
输出为什么是 JPEG？
JPEG 体积小、兼容性好，适合封面与缩略图。需要透明背景请用 PNG 输出工具。
质量调到多少合适？
80 是通用平衡点；要求画质更高可用 90，追求小体积可用 70，低于 50 画质下降明显。
能加文字或水印吗？
不能。本页只做裁剪与缩放，不加任何装饰，避免破坏原图。
原图信息会保留吗？
不会。输出文件不含 EXIF 拍摄参数与地理位置，等于顺手去掉了元数据。
放大图片会变清楚吗？
不会。放大只是把像素拉开，边缘会变软，并不会增加细节。