解决微信小程序安卓手机图片旋转

第一 定位问题，是因为图片的 exif 信息携带一李没个旋转的参配拦数所以安卓手机识别到了并旋转了，而 ios 设备则屏蔽了这些参数所以没有旋转

第二 解决方案，

1，如果图片用的是腾讯云 那简单多了 只要在图片链接后面带上 ?imageMogr2/auto-orient 参数即可。

2，如果图片是七牛云 官网给出了解决方案是携带 exif 参数获取图片信息然后再转换过来，这个感觉培扰胡适合后台比较方便（待更新）

3，微信小程序上传图片（待更新）

data: {

class1: 'z1', //默认正行弯带面在上面

class2: 'z2'

},

rotateFn: function(e) {

let data = this.data

if (data.class1 == 'z1' &&data.class2 == 'z2') {

this.run('front', 'back', 'z2', 'z1')

} else {

this.run('back', 'front'档芦, 'z1', 'z2')

}

},

run: function(a, b, c, d) {

let that = this

that.setData({

class1: a,

class2: b,

})

setTimeout(function() {

that.setData({

class1: c,

class2: d,

})

}, 1000)

},

还有样闹羡式：

page{position: relativeheight: 100%background-color: #F6F6F6}

.rotateCtn{position: absolutewidth: 70%height: 70%left: 15%bottom: 20%transform-style:preserve-3d}

.frame{position: absoluteheight: 100%width: 100%}

.frame image{height: 100%width: 100%border-radius: 8px}

.front{animation:front 1s linear 1backface-visibility: hidden}

.back{animation:back 1s linear 1}

@keyframes front{from{transform: rotateY(0deg)} to{transform: rotateY(180deg)}}

@keyframes back{from{transform: rotateY(-180deg)} to{transform: rotateY(0deg)}}

.z1{z-index:6}

.z2{z-index:5}

JumpImage.xml

JumpImage.js

onload接收上个页面的属性嫌激

调用芹尘袜第二层组件cropper的确定按钮的回兄态调方法，把图片URL、id信息赋值给上个页面

cropper.xml

cropper.js

用到组件： https://github.com/yuanwyj/Mini-Program-cropper

---