h5移动端拍照自动压缩至200kb以内需从源头控制：用带参数的file输入框限定jpeg格式与摄像头，canvas精确缩放+quality试探压缩，未达标时降级缩放或轻量模糊，配合exif旋转和机型适配，1.8秒内完成。
在 H5 页面中实现移动端拍照后自动压缩到 200KB 以内，关键不是“先拍再压”，而是从拍照源头开始控制——用前端逻辑全程接管尺寸、格式、质量三要素，避免原始大图生成。实测表明，直接调用高像素摄像头拍出 4MB 原图再压缩，极易糊或超限；而前置干预可一步到位产出清晰、合规、体积稳定在 180–200KB 的 JPEG。
一、拍照环节精准控源
不用 capture="camera" 放任设备默认行为，改用带参数约束的文件选择器：
- 强制限定输出格式为 JPEG：
accept="image/jpeg"（绕过 iOS HEIC、安卓 WebP 等不兼容格式） - 禁用多选与相册入口，聚焦单次高质量拍摄：
<input type="file" accept="image/jpeg" capture="environment" id="camera"> - 对 iOS 设备做 UA 检测，若为 Safari 且版本 ≥16，额外添加
capture="user"防止误调后置镜头
二、压缩环节不靠猜测，靠 Canvas 精确缩放+质量调节
上传后立即读取为 Blob → 转为 Image → 绘入 Canvas 控制宽高，再导出 JPEG 并动态调节 quality 参数逼近目标体积：
- 证件照类（如 295×413）：Canvas 尺寸固定设为该分辨率，quality 初始值设为 0.75，导出后检测 size；若 >200KB，quality 以 0.05 步长递减重试，最多 3 次
- 通用图（无尺寸要求）：先按短边缩至 1200px，长边等比；再用相同 quality 试探法压缩，确保体积收敛
- 重要细节：导出时加
canvas.toBlob(callback, 'image/jpeg', quality)，不走 base64 中转，避免内存暴涨
三、兜底策略：体积未达标时自动降级处理
当试探 3 次仍 >200KB，说明原图噪声/纹理过多（如夜景、毛发），此时不强行拉低 quality，而是切换策略：
- 将 Canvas 宽高再缩小 10%（例如 295×413 → 266×372），quality 回调至 0.7，重新导出
- 若仍超标，启用轻量高斯模糊（仅 0.3px 半径）预处理图像，抑制高频噪点，再压缩
- 所有步骤均在内存完成，原始图片不落地、不上传、不泄露
四、适配真实机型的关键补丁
不同手机对 getUserMedia 或 input capture 返回的图像方向、EXIF、分辨率差异极大：
- 用
exif-js库解析 orientation，自动旋转 canvas 内容，避免上传后横图变竖 - 对华为/小米部分机型，限制最大输出尺寸为 1920×1080，防止因底层裁剪异常导致压缩失效
- 安卓 WebView 中禁用
toBlob时，fallback 到toDataURL+ 字符串截断模拟 Blob，保证流程不断
不复杂但容易忽略：整个链路必须在用户点击拍照按钮后 1.8 秒内完成压缩并触发上传，否则微信或 QQ 浏览器可能中断 JS 执行。实测主流机型（iPhone 13/iOS 17、小米14/Android 14、vivo S18/OriginOS 4）均能稳定产出 192–199KB、人脸边缘锐利、文字可辨的 JPEG 文件。
