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

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

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

})

}

})

}

})

//页面

</view>

</view>

<view class='text'>{{cardno}}</view>

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

阿里云 aliyun 人脸识别（1：N） java spring 小程序小程序上传多图阿里云oss
前段时间开发一个小程序需要使用到阿里云(1:N)人脸识别的服务,查询资料发现网上并没有详细的教程,而官方的api文档也写得很简略,于是就有了如下教程,希望能帮助到大家. 目录服务开通人脸识别服务开 ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...
微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传文件到自己的服务器
微信小程序上传文件到自己的服务器 1.建立 WebApi项目 (1)创建项目 (2)发布项目 2.后端接口代码 3.小程序端调接口 1.建立 WebApi项目 (1)创建项目选择菜单 "文 ...
小程序上传文件到阿里云oss
本文仅举例上传图片和上传视频! 准备工作: 需要引入的js文件:https://download.csdn.net/download/impossible1994727/12328614 参考文档:h ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序上传后进行性手机扫码阅览发现白屏的解决
目录问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 2.请求的域名没有配置问题: 微信小程序上传后进行性手机扫码阅览发现白屏的解决 1.上传时没有勾选保护 ...
钉钉小程序上传附件（PDF等非媒体文件）至第三方文件服务器（企业内部应用）
1.创建钉盘空间并获取spaceId (1).创建钉盘空间进入钉钉选择"云盘",点击"团队文件"然后新建一个文件夹,给当前钉钉团队所有用户(或者能够使用该企业 ...

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

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

最新文章

热门文章