问题?
开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的exif信息中的orientation这个参数有关。
小程序的页面实用webview渲染的,webview的图片渲染不会读取图片的exif信息,这个浏览器内核没支持,而小程序的预览图片wx.previewImage可以是因为客户端解析了exif信息。
解决办法
由于个别图片拍摄时候自带旋转信息,经过个人测试跟图片大小和后缀没关系,部分机型会在选择相册时候进行了上面那个旋转(图片带有多少度旋转就旋转多少度),上传时候服务端可以查看图片的 exif 信息便知晓,由于不是每张图片都有问题,个人建议运营发布图片时检查图片是否带有旋转度,如果有进行二次编辑即可,如果是用户上传建议服务端修改 exif 或服务端返回 exif 信息由前端判断去处理旋转。
图片EXIF信息查看器:https://exif.tuchong.com/
前端修改的话,小程序中通过getImageInfo这个接口中可以获得orientation 的信息,所以,我们只要知道旋转的角度,再旋转回来即可。
- 小程序关于 orientation 参数
- 示例代码
wx.getImageInfo({
src: 'images/test.jpg',//图片的路径,支持网络路径、本地路径、代码包路径
success (res) {
console.log(res.orientation)
}
}