微信小程序拍照功能，照片会翻转，请问如何处理

[ogoss]

使用微信小程序拍照后，照片会进行翻转。
原来在做web页面的时候，通过获取图片exif值，将图片进行相应的翻转，但是微信小程序中，上传接口返回的图片数据，没法这么做。
想请问下，有做过类似功能的朋友，是如何处理该问题的

[三孚]

请问楼主最后解决了嘛？
我这两天也遇到了类似的问题：需要判断照片是横的还是竖的，如果是横的需要旋转90°
我最后采用的解决办法是：
1.wx.getImageInfo获取到图片的宽高信息：IMG_REAL_W = res.width ；IMG_REAL_H = res.height
2.然后算出其长宽比：IMG_RATIO = IMG_REAL_W / IMG_REAL_H
3.如果比例 > 1 ，说明照片是横的，需要旋转90°
即：<image class="{{image_type==0?'m_image-column':'m_image-row'}}"></image>
最后在wxss中写一下样式就好啦

[M.Siebel]

二楼，问一下你怎么确定左旋还是右旋

[三孚]

引用 3 楼 钢丝球 M.Siebel 的回复:

二楼，问一下你怎么确定左旋还是右旋

是这样的：我当时写的时候因为默认横版的照片是天空在上，地板在下的那种，所以都是逆时针旋转90°
旋转的代码可以写在三个地方：
1）wxml -> transform:rotate(90deg) translateY(-{{imageW}}rpx);transform-origin:0 0
... ...
<image style="height:{{imageW}}rpx;width:{{imageH}}rpx;transform:rotate(90deg) translateY(-{{imageW}}rpx);transform-origin:0 0;" ... ...></image>
... ...
这是我当时采用的方式
如果顺时针的话就是transform:rotate(-90deg)
要注意后面的两个偏移方向和原点的设置，不然图片会偏掉~
2) wxss -> 同wxml，就是把旋转内容写在class里面，但是由于我宽高的设置都是写在js里面的，只能写在style里面...
3) js -> that.data.stv.rotate = that.data.stv.rotate + 90
... ...
rotate_clockwise() {
let that = this;
that.setData({
'stv.rotate': that.data.stv.rotate % 90 == 0 ? that.data.stv.rotate = that.data.stv.rotate + 90 : that.data.stv.rotate = 0
})
},
... ...
这是我这两天写一个编辑照片的界面时写的方法

不知道是否对你有帮助~

[M.Siebel]

二楼，受教啦，不过我用wx.onDeviceMotionChange 监听设备方向后作出判断

[果果阿]

wx.onDeviceMotionChange 监听设备方向 ， 是在什么时候调用的 ？ 我这边有个需求是拍照方向怎么拍都要正过来 ， 不知道这个要把这个方法放在什么地方 ，可能用户拍的时候是一个方向，上传的时候，上传成功 的时候都不一样