微信小程序:上传的图片显示旋转问题

问题?

开发中遇到微信小程序在上传照片后,会有一定概率旋转,查阅了资料之后,发现是和图片中携带的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)
 }
}
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值