这次录了一个迷你项目遇到的问题，当时没时间解决。mini之后还是打算看这个问题。

问题描述

这时候微信小程序上传照片后会有一定的概率旋转。查阅资料后发现与图片中携带的exif信息中的方位参数有关。

这是一个关于EXIF和方向的门户网站：

用JavaScript读取JPEG文件EXIF信息中的方向值

当时想让后端解析旋转，但是后端说有时候能得到这个信息，有时候得不到。这大概和上传时小程序是否被压缩有关。如果压缩，exif信息将被删除。

后来因为图片上传到服务器之前需要预览，所以不适合在后端旋转。

如果前端旋转，看一下。方位信息可以在applet中的getImageInfo的界面中获取，所以我们只需要知道旋转的角度，然后旋转回去。

解决办法

小程序的方向参数

小程序方向参数如下：

小程序图片旋转键码

这里使用画布来旋转图片

在wxml文件中添加canvas元素，在这里我将id设置为canvas

一个

canvas canvas-id=' canvas ' style=' width : {{ imageWidth } } px；height: { { imageHeight } } pxposition:absolute值；top:200%' /canvas

这里我具体说一下旋转180度的情况

一个

2

三

四

五

六

七

八

九

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

wx.getImageInfo({

src: tempFilePaths[0]，

success:(res)={

//在exif中获取方向信息

if(res.orientation=='up'){

this.setData({

选择图像：临时文件路径[0]，

})

}else{

让canvasContext=wx . createcanvascontext(' canvas ')

开关(静止方向){

case ('down'):

var width=res.width

可变高度=res.height

//需要旋转180度

this.setData({

图像宽度：宽度，

图像高度：高度，

})

canvasContext.translate(宽/2，高/2)

canvasContext.rotate(180 *数学。PI/180)

canvascontext . draw image(tempfilepath[0]，-width/2，-height/2，width，height)；

打破；

canvasContext.draw()

this.drawImage()

}

}

})

三个步骤：

1.这里，通过平移将原点设置为图像中心

2.通过旋转旋转相应的角度，其中旋转以刚刚设置的原点为中心旋转

3.通过绘图图像绘制图片

所以画面是旋转的？

当然不是，它只是在画布上旋转，所以我们需要从画布上生成图片。

[注意]因为画布绘制(draw())需要一定的时间，所以这里设置一个定时器，这里设置2秒。没有这个定时器，图片可能在画好之前变成图片，图片可能是空白的。

一个

2

三

四

五

六

七

八

九

10

11

12

13

14

15

16

17

18

19

drawImage:function(路径){

that=this

setTimeout(()={

//将生成的画布图片转换为真实图片

wx . canvastotemfilepath({

x: 0，

y: 0，

canvasId: '画布'，

成功(res) {

let shareImg=res.tempFilePath

that.setData({

chosenimage : RES . tempfile path，

})

},

fail:功能(res) {

}

})

}, 2000)

}

【注意】关于画布的旋转，你需要了解画布的坐标系。你一开始没有看这方面，只是想当然，导致画出来的东西一片空白。了解之后，你发现坐标系不清晰，导致设置绘制图片时坐标系值错误。它是在画布外面画的，结果是一片空白。这里有一个门户，你可以阅读这篇文章：

画布图像旋转和翻转姿势解锁

旋转90度和旋转270度是一样的，这里就不重复了

粘贴完整的代码

当然也可能会出现镜像翻转的情况。这里比较懒，所以差不多。

一个

2

三

四

五

六

七

八

九

10

11

12

视图类='容器'样式=' '

视角

Button bindtap='chooseImage '上传/按钮

/view

视图样式=' '

image src=' { { ChoSenimage } } ' mode=' withFix ' bind tap=' ' style=' width :300 px；'/image

/view

canvas canvas-id=' canvas ' style=' width : { { imageWidth } } px；height : { { imageHeight } } pxposition : absolute值；top:200%' /canvas

/view

一

2

3

四

5

6

七

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

chooseImage:function(){

wx.chooseImage({

count: 1，

sizeType: ['压缩'],

sourceType: ['相册','相机'],

success: (res)={

//tempFilePath可以作为图片标签的科学研究委员会属性显示图片

常量临时文件路径=RES .临时文件路径

wx.getImageInfo({

src: tempFilePaths[0]，

success:(res)={

//获得照片信息中的方向信息

if(res.orientation=='up'){

this.setData({

选择图像：临时文件路径[0],

})

}else{

让canvasContext=wx。createcanvascontext(' canvas ')

console.log(res.orientation)

开关（静止方向){

case ('down'):

可变宽度=res.width

可变高度=res.height

//需要旋转180度

this.setData({

图像宽度：宽度，

图像高度：高度，

})

canvasContext.translate(宽/2,高/2)

canvascontext . rotate(180 *数学/180)

canvascontext。绘制图像(tempfilepath[0]，-width/2，-height/2，width，height)；

打破；

case ('left'):

可变宽度=res.width

可变高度=res.height

canvasContext.translate(高/2,宽/2)

this.setData({

图像宽度：高度，

图像高度：宽度，

})

//顺时针旋转270度

canvascontext . rotate(270 *数学/180)

canvascontext。绘制图像(tempfilepath[0]，- width/2，- height/2，width，height)；

打破；

大小写('右'):

可变宽度=res.width

可变高度=res.height

this.setData({

图像宽度：高度，

图像高度：宽度，

})

canvasContext.translate(高/2,宽/2)

//顺时针旋转90度

canvascontext . rotate(90 *数学/180)

canvascontext。绘制图像(tempfilepath[0]，- width/2，- height/2，width，height)；

打破；

}

canvasContext.draw()

this.drawImage()

}

}

})

}

})

},

drawImage:function(路径){

那=这个

setTimeout(()={

//将生成的帆布图片，转为真实图片

wx。canvasotemfilepath({

x: 0，

y: 0，

canvasId: '画布，

成功(res) {

let shareImg=res.tempFilePath

that.setData({

chosenimage : RES . tempfile路径，

})

},

fail:功能(res) {

}

})

}, 2000)

}