HTML5无法真正转换图片格式，仅能通过canvas重绘后导出为指定MIME类型；PNG→JPEG转换常用toBlob()，需处理CORS、兼容性及内存限制，专业格式和精细压缩仍需后端。
HTML5 本身不提供图片格式转换能力
HTML5 标准里没有 convertImageFormat() 或类似 API。所谓“HTML5 转格式”，实际是利用 <canvas> + toDataURL() / toBlob() 在前端模拟转换，本质是**重绘后导出为指定 MIME 类型**，并非真正解码再编码——原始像素被 canvas 读取时已解码为 RGBA，导出时浏览器按目标格式（如 "image/jpeg"）做简单压缩封装，不支持调参、无损转换或格式特性保留（比如 PNG 的 alpha 通道转 JPEG 会丢透明度）。
用 <canvas> + toBlob() 实现 PNG → JPEG 转换
这是最常见且兼容性较好的做法，适用于用户上传后即时预览/压缩场景：
- 先用
FileReader读取File对象为data URL - 创建
<img>加载该 URL，onload后绘制到<canvas> - 调用
canvas.toBlob(callback, "image/jpeg", 0.8)，第三个参数是 JPEG 质量（0–1） -
toBlob()比toDataURL()更优：避免 base64 编码开销，直接得Blob可传给FormData或URL.createObjectURL()
注意：toBlob() 在 Safari 旧版本需加前缀，可封装兜底逻辑；若原图含 CORS 资源（如跨域 URL），需设 img.crossOrigin = "anonymous"，否则 canvas 会污染导致 toBlob() 失败。
WebP / AVIF 等新格式的兼容性陷阱
不是所有浏览器都支持 toBlob() 输出 "image/webp" 或 "image/avif"：
立即学习“前端免费学习笔记（深入）”；
- Chrome、Edge 支持 WebP 导出；Firefox 从 v65+ 支持，但默认禁用 AVIF（需手动开启
image.avif.enabled） - Safari 直到 v16.4 才支持 AVIF，且
toBlob()输出 AVIF 仍不稳定，建议用caniuse.com查实时支持表 - 若目标格式不被支持，
toBlob()第二个参数会被忽略，降级为 PNG（或当前浏览器默认格式），不会报错 - 想强制用 WebP？得先检测：
document.createElement('canvas').toBlob.toString().includes('webp')（非 100% 准确，但比 UA 判断实用）
无法绕过的限制和替代思路
前端转换绕不开三类硬伤：
- 不支持 CMYK、TIFF、RAW 等专业格式 —— canvas 只接受能被
<img>加载的格式（基本是 JPG/PNG/GIF/WebP/AVIF） - 无法控制压缩算法细节（如 JPEG 的 Huffman 表、量化矩阵），质量参数仅是粗粒度调节
- 大图易触发内存溢出或卡死：10MB PNG 绘制到 canvas 可能占 30MB+ 内存（RGBA × width × height），建议加尺寸限制（如
maxWidth: 2000）并用createImageBitmap()替代FileReader提升性能
真要可靠转格式（尤其批量、高保真、多格式），还是得交由后端处理；前端只做轻量预处理，别把它当 ImageMagick 用。
