HEIF导致的图片上传异常

背景

某日，收到某安卓Web端会员反馈刊登时上传了图片，却没有显示出来。排查无果，会员提供操作视频，可以从视频定位到，上传图片的格式名不是常规的 JPG 或 PNG ，而是 HEIC 。

HEIF科普

HEIF 格式的全名为 High Efficiency Image File Format（高效率图档格式），是由动态图像专家组（MPEG）在2013年推出的新格式，它是JPEG的现代替代品，并且通常具有 .HEIC 文件扩展名。自 iOS 11 和macOS High Sierra（10.13）内测开始，苹果将 HEIF 设置为图片存储的默认格式。与 JPG 相比，它占用的空间更小，画质更加无损。如下，iPhone原机图片标有 HEIF。

为什么HEIF格式无法上传？为什么iOS用户可以正常上传HEIF格式图片？

iOS 设备在图片导出或者上传时，会自动将 HEIF 格式转成 JPG 格式，由系统底层完成此转换

安卓不支持HEIF吗？

一开始有被网上材料误导，认为只有 iOS 才支持 HEIF ，断定该会员的图片并不是自己拍摄的。

但是通过 Android 文档的查阅可知，搭载 Android 10 的且支持 MIMETYPE_IMAGE_ANDROID_HEIC 或 MIMETYPE_VIDEO_HEVC 编码器的设备是支持 HEIF 压缩图片格式。（需要在相机设置中，打开 HEIF 开关）

而在实际的 HEIF 图片上传功能中，安卓APP 是可以正常将 HEIF 图片转化为JPG，无需额外处理，但是在安卓浏览器Web页面进行图片上传时，没有格式的转化，导致图片无法上传。

Web端HEIF上传方案

考虑 HEIF 逐步普及，Web 端需要兼容 HEIF 格式的上传，目前使用的方案是，利用heic2any，在浏览器实现HEIF 图片转 JPG图片，再进行图片上传，可以满足业务场景（但是 heic2any.min.js 压缩后体积为1.2M，对加载稍有影响）。代码如下：

heic2any({
    blob: file,
    toType: "image/jpeg",
    quality: 1
}).then(function(heicToJpgResult){
	//后续上传逻辑
})

参考资料

HEIF格式解析

Android HEIF图片处理

Heic2any