小程序上传身份证正反照，竖排照片横向展示
我是判断照片的宽高比用画布重新渲染。
一开始想用wx.getImageInfo() 接口获取EXIF的值然后在判断旋转多少度，但是这个接口返回的orientation 字段返回都是up，所以弃用这个方法。
我的方法是使用 小程序自带的 wx.getFileSystemManager() API接口获取base64格式的照片，然后用画布重新渲染（其中包括如何使用小程序画布），后台需要解析身份证，正好也需要base64格式的数据。还有一个问题，就是只能将EXIF（https://www.jb51.net/html5/639934.html）为6的照片选择270度横向显示，其他情况不能正常显示。话不多说，上代码：
//上传身份证照片
uploadIdcard: function (e) {
var that = this
const front = wx.createCanvasContext('front')
const back = wx.createCanvasContext('back')
//定义为px单位
var imgWidth = 300;
var imgHeight = 150;
wx.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
wx.showLoading({
title: '上传中',
})
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0], //选择图片返回的相对路径
encoding: 'base64', //编码格式
success(base) {
wx.request({
url: app.globalData.httpsUrl + '/******',
data: {
personInfo: JSON.stringify(util.getcache('personInfo')),
data: 'data:image/png;base64,' + base.data,
},
method: 'POST',
header: {
'Content-Type': "application/x-www-form-urlencoded"
},
success: function (data) {
console.log(data.data)
if (data.data.respCode == 1) {
//识别成功，画出照片
wx.getImageInfo({
src: res.tempFilePaths[0],
success: function (info) {
console.log(info)
//旋转
//正面照
if (e.currentTarget.dataset.sign == 1) {
if (info.height > info.width) {
console.log('旋转270度')
front.rotate(270 * Math.PI / 180);
front.drawImage(res.tempFilePaths[0], -150, 0, imgHeight, imgWidth)
} else {
front.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight, 0, 0)
}
front.draw()
} else if (e.currentTarget.dataset.sign == 2) {
//反面照
if (info.height > info.width) {
console.log('旋转270度')
back.rotate(270 * Math.PI / 180);
back.drawImage(res.tempFilePaths[0], -150, 0, imgHeight, imgWidth)
} else {
back.drawImage(res.tempFilePaths[0], 0, 0, imgWidth, imgHeight, 0, 0)
}
back.draw()
}
wx.hideLoading()
}
})
if (data.data.data.type == 1) {
that.setData({
name: data.data.data.name,
cardno: data.data.data.cardno
})
}else{
that.setData({
time: data.data.data.validdate1 + '-' + data.data.data.validdate2,
})
}
} else {
wx.showToast({
icon: 'loading',
title: data.data.respMsg,
})
}
}
})
}
})
},
})
},
//页面