小程序上传身份证正反照，竖排照片横向展示

我是判断照片的宽高比用画布重新渲染。

一开始想用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,

})

}

}

})

}

})

},

})

},

//页面

{{name}}

{{cardno}}

{{time}}