微信小程序选择不同图片格式的表现

iOS

iOS 使用 wx.chooseMedia() 选择相册中的图片，获得的图片格式和是否选择原图没有关系：jpg、png、gif 格式都不变，其他格式会被转换为 jpg 或 png。

• jpg 不变
• gif 不变
• png 不变
• heic -> png
• heif -> png
• tiff -> jpg（透明会变成白色）
• avif -> jpg（透明会变成白色）
• webp -> jpg（透明会变成白色）
• bmp -> jpg（透明会变成白色）
• svg，ios 不能选择 svg 图片

Android

Android 手机获得的图片格式，和是否选择原图有直接关系。

如果选择了原图，通常来说格式不变，选什么，拿到就是什么。不过实测发现 iPhone 拍的 heic 照片会转为 png，Android 自己拍的 heic 照片不会转。

如果没有选择原图，图片可能会被转换为 jpg。

• jpg 不变
• svg 不变
• gif -> jpg
• png -> jpg
• heic -> jpg
• heif -> jpg
• webp -> jpg（透明会变成黑色）
• bmp -> jpg（透明会变成黑色）
• tiff，我的安卓机型不支持显示 tiff 图片
• avif，我的安卓机型不支持显示 avif 图片

总结

大多数情况下，我们不需要知道格式是怎么转换的，因为我们可以相信 wx.chooseMedia() 返回的格式通常是系统支持的。判断一张图片能否通过小程序的 image 或 canvas 组件显示出来，就看系统是否支持这种格式，系统支持就可以显示。

换言之，通过 wx.chooseMedia() 选上来的图片，无论原图的格式是什么，通常都可以直接用在 image 组件，通常都可以绘制到 canvas，而绘制到 canvas 之后就可以用 wx.canvasToTempFilePath() 把图片都转换为 jpg 或 png。

有些图片系统本身不支持，那小程序也不会支持。比如 Android 不支持 tiff，iOS 则支持。

安卓选择原图时，格式不会改变，如果图片是上传到云存储，再通过 http 链接显示在小程序中，为了保证图片可以同时在 ios、android、电脑端的小程序正常显示，建议把图片统一转换为 webp、jpg、png 等格式，因为根据文档，各端的小程序 image 组件都支持这这几种格式。

小程序如何判断图片的真实格式？不能完全依赖 wx.getImageInfo()，因为根据文档，它只能识别 jpeg、png、gif、tiff 四种格式，其他格式会显示 unknown，包括 webp、heic 等。另外，虽然文档说它支持识别 tiff 图片，但仅限 iOS，Android 由于本身不支持 tiff，所以 wx.getImageInfo() 也会显示 unknown。

为了正确识别尽量多的图片格式，建议让 AI 写一个函数，使用 readFileSync 读取图片的魔数进行判断。值得注意的是，wx.getImageInfo() 对部分 unknown 的图片依然能返回正确的长度、宽度，但对部分 unknown 的图片会返回 -1 的长宽。

实测截图

下面是iOS、Android 的实测截图，各方块图片中的文字是这张图片的原图格式，图片旁边标注的格式是 wx.chooseMedia() 返回的格式。