heic图片在h5中预览易白屏，因多数浏览器不支持；应前端上传前用canvas转jpeg，并服务端oss回源自动转码兜底，辅以降级提示。
直接在 H5 页面里预览用户从 iOS 设备选择的 HEIC 图片，大概率会白屏或显示异常。这不是你代码写错了，而是浏览器根本不认识这个格式——HEIC 本质是苹果用 HEVC 编码封装在 HEIF 容器里的图像，目前只有部分新版 Safari、Chrome 和 Edge 原生支持，绝大多数安卓 WebView、旧版 iOS WKWebView、微信内置浏览器等完全无法解析。
前端拦截：上传前识别并转成 JPEG
最稳妥的做法，是在用户选中图片后、上传前就完成格式转换。利用 FileReader + createObjectURL 读取原始文件，再用 Canvas 绘制并导出为 JPEG：
- 监听
input[type="file"]的change事件，获取files[0] - 检查
file.type === 'image/heic'或通过文件头（前 4 字节为ftypheic）判断 - 用
URL.createObjectURL(file)创建临时 URL，加载到<img>标签 - 将图片绘制到
<canvas></canvas>，调用canvas.toBlob(callback, 'image/jpeg', 0.9)输出 JPEG Blob - 后续上传该 Blob，而非原始 HEIC 文件
注意：Canvas 转换依赖浏览器解码能力，iOS 15+ Safari 支持 HEIC 解码，但微信 iOS 版（基于 WKWebView）默认禁用，需配合服务端兜底。
服务端兜底：OSS 回源自动转码
即使前端做了转换，仍可能漏掉某些场景（如用户绕过 H5 直传、第三方 SDK 上传）。推荐在 OSS 层加一层“透明转码”：
- 上传时保留原始 HEIC 文件（例如存为
xxx.heic） - 配置 OSS 回源规则：当请求 URL 带
?x-oss-process=image/format,jpg时，触发服务端实时转码 - H5 页面中所有图片链接统一加上该参数，例如：
<img src="https://bucket.oss-cn-hangzhou.aliyuncs.com/photo.heic?x-oss-process=image/format,jpg?x-oss-process=image/resize,p_40"> - OSS 会返回 JPEG 流，Content-Type 自动变为
image/jpeg，浏览器无感兼容
该方式无需修改前端逻辑，对老版本 H5 友好，且转码由阿里云异步处理，不增加业务服务器压力。
降级提示：给用户明确反馈
当检测到设备不支持 HEIC 且转换失败时，别让页面静默白屏。可主动提示用户操作：
- 在
img的onerror回调中触发提示：“照片格式暂不支持，请用系统相册另存为 JPG 后重试” - 提供一键跳转系统相册的按钮（iOS 可唤起
photos-redirect协议，安卓需引导手动操作） - 对高频场景（如证件上传），默认禁用 HEIC 拍摄，改用
capture="environment"+accept="image/jpeg"强制指定格式
避免常见误区
有些方案看似简单，实则不可靠：
- 仅靠
accept="image/*"无法阻止 iOS 返回 HEIC —— 苹果无视该属性，始终按系统设置返回默认格式 - 用 CSS 设置
background-image: url(xxx.heic)必然失败，background 不支持格式降级，也不触发 onerror - 把 HEIC 当作普通二进制上传后，再靠前端 JS 解码（如 heic2any 库）性能差、内存高、低端机易卡死，不建议生产环境使用
核心原则是：格式适配要前置，不把兼容性问题留给浏览器去猜。
