前言

对于前端来说，需要后端提供一个人脸识别接口，前端传入图片，接口识别并返回结果，如此看来，其实前端只需实现图片传入即可，但是其实不然，在传入图片时，需要进行以下几点操作：

1. 判断图片格式，市场上比较常见的是.jpg、.jpeg、.png
2. 计算文件大小，一般要求不超过5MB
3. 对图片进行base64加密

其实前2点具体要看接口要求，但是第3点，是实现人脸识别必备步骤，下文重点讲述一下移动端实现人脸识别的base64加密方法

问题

项目主要使用的技术栈是uniapp，uniapp的优点是上手快，基于vue开发，但缺点也很明显，多环境兼容导致兼容性较差，真机调试和运行较慢。比如h5端可以轻松实现base64加密，但是安卓环境完全不行，因为本地上传图片时，会返回一个blob流，但是uniapp的blob流是以http://localhost…（安卓环境无法识别localhost） 开始，导致无法进行base64加密

解决办法

经过多方实现后，借用html5+ api的多个结合方法（plus.zip.compressImage、plus.io.resolveLocalFileSystemURL、plus.io.FileReader）实现加密，主要代码如下：

//app压缩图片  用for循环 来处理图片压缩 的问题，原因是 plus.zip.compressImage 方法 是异步执行的，for循环很快， 同时手机可执行的压缩方法有限制：应该是3个吧。超出直接就不执行了。所以 原理就是 在图片压缩成功后 继续 回调 压缩函数。 以到达循环压缩图片的功能。
app_img(num, rem) {let that = this;let index = rem.tempFiles[num].path.lastIndexOf('.'); //获取图片地址最后一个点的位置let img_type = rem.tempFiles[num].path.substring(index + 1, rem.tempFiles[num].path.length); //截取图片类型如png jpglet img_yuanshi = rem.tempFiles[num].path.substring(0, index); //截取图片原始路径let d2 = new Date().getTime(); //时间戳//压缩图片plus.zip.compressImage({src: rem.tempFiles[num].path, //你要压缩的图片地址dst: img_yuanshi + d2 + '.' + img_type, //压缩之后的图片地址(注意压缩之后的路径最好和原生路径的位置一样，不然真机上报code-5)quality: 70 //[10-100]},function (e) {//压缩之后路径转base64位的//通过URL参数获取目录对象或文件对象plus.io.resolveLocalFileSystemURL(e.target, function (entry) {// 可通过entry对象操作test.html文件entry.file(function (file) {//获取文件数据对象var fileReader = new plus.io.FileReader(); // 文件系统中的读取文件对象，用于获取文件的内容//alert("getFile:" + JSON.stringify(file));fileReader.readAsDataURL(file); //以URL编码格式读取文件数据内容fileReader.onloadend = function (evt) {//读取文件成功完成的回调函数that.base64Img = evt.target.result.split(',')[1]; //拿到‘data:image/jpeg;base64,‘后面的console.log('that.base64Img', that.base64Img);// rem.tempFiles[num].Base64_Path = evt.target.result.split(',')[1];};});});// that.base64Img = that.base64Img.concat(rem.tempFiles[num]);// 【注意】在此人脸认证中,只会传一张图片,故不考虑多张图片情况//利用递归循环来实现多张图片压缩// if (num == rem.tempFiles.length - 1) {// 	return;// } else {// 	that.app_img(num + 1, rem);// }},function (error) {console.log('Compress error!');console.log(JSON.stringify(error));uni.showToast({title: '编码失败' + error});});
},

详细实现思路

其实对于uniapp实现人脸识别功能来讲，大概要经过这么几个步骤

1. onImage()：打开手机相册上传图片，获取blob流（本地临时地址）
2. #ifdef APP-PLUS/#ifndef APP-PLUS：判断系统环境，是h5还是安卓环境，然后在进行图片压缩和加密，具体实现代码如下：

//#ifdef APP-PLUS
//图片压缩
that.app_img(0, res);
//#endif// #ifndef APP-PLUS
that.blobTobase64(res.tempFilePaths[0]);
// #endif

3. app_img()/blobTobase64()：对要识别的图片进行base64加密
4. onSave()—>upImage()：附件上传，并处理识别信息

具体代码