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。

096B81B3222FFDF1C50A14A6E8E26DA1_gaitubao_454x733.png

为什么HEIF格式无法上传?

  • 获取的file的type属性为空,由于目前标准的媒体类型,还没包含 HEIF 格式的图片,导致无法判断文件类型
  • lrz 插件无法对 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

Guess you like

Origin juejin.im/post/7054454293097070629