uniapp自定义照相机百度ORC卡证识别 拍照蒙版 自动裁剪
ps: 刚做完就匆忙发出来了，很多地方暂时没有优化，有一部分冗余代码，项目完工后期再抽时间慢慢修改，大家可以参考，多指正欢迎留言交流。
效果预览
一、思路
由于uniapp里camera标签不支持App端，所以只有想办法另辟蹊径，经过百度一系列之后得出思路 使用navigator.mediaDevices.getUserMedia得到视频流然后渲染到
使用webview 嵌入html页面，在html页面处理摄像头采集，在video上层加上蒙版就ok了。
本地网页及相关资源（js、css等文件）务必按照上图路径存放，如果嫌麻烦，也可以把所有静态资源转为直链引入到页面
二、代码
webview里如果需要调转到App其他页面使用navigateTo，navigateBack，switchTab ， reLaunch ， redirectTo等需要在script标签内引入uni.web-view.js（点此下载） 为了方便演示，我直接写在了html文件的
判断当前环境
// 是否是手机
function isMobile() {
let userAgentInfo = navigator.userAgent;
let mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
let mobile_flag = false;
//根据userAgent判断是否是手机
for (let v = 0; v < mobileAgents.length; v++) {
if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
mobile_flag = true;
break;
}
}
let screen_width = window.screen.width;
let screen_height = window.screen.height;
//根据屏幕分辨率判断是否是手机
if (screen_width > 325 && screen_height < 750) {
mobile_flag = true;
}
return mobile_flag;
}强制唤起用户授权提示框
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
$(video).show();
if ("srcObject" in video) {
video.srcObject = stream;
} else {
video.src = window.URL.createObjectURL(stream);
}
video.onloadedmetadata = function(e) {
video.play();
};
}).catch(function(err) {
var r = confirm("是否授权使用媒体相机采集图片");
if (r == true) {
// 这里可以调用5+ API了，为了更好的兼容性，应该使用以下代码进行判断
if (window.plus) {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
} else { // 兼容老版本的plusready事件
document.addEventListener('plusready', function() {
var cmr = plus.camera.getCamera();
setTimeout(() => {
uni.webView.redirectTo({
url: '/pagesA/ruleName/cs/cs?dataType=' + strType
});
}, 2000)
}, false);
}
} else {
uni.webView.navigateBack()//未授权返回上级页面
}
}); 监听拍照按钮点击事件
capture.addEventListener('click', function(e) {
if (!flag) {
context.drawImage(video, 50, 185, 400, 280, 50, 280, 880, 450);//裁剪图片
$(canvas).show();
$(allImg).show();
$(rightImg).show();
$(video).hide();
$(capture).text("重新拍照");
flag = true;
} else {
context.clearRect(0, 0, canvas.width, canvas.height); //清除画布，避免第二次拍照出现黑屏
$(allImg).hide();
$(video).show();
$(rightImg).hide();
$(canvas).hide();
$(capture).text("拍照");
flag = false;
}
}); 从相册选择图片网页通过 postMessage 向应用发送消息，在 message 事件回调 event.detail.data 中接收消息。
leftclImg.addEventListener('click', function(e) {
plus.gallery.pick(function(path) {
toBase64(path).then((res) => {
uni.postMessage({
data: {
action: res, // 这是从html页面传参到webview所在页面发送的数据
ress: path,
}
});
})
// console.log(path);
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image"
});
});
rightImg.addEventListener('click', function(e) {
// onTorch()
sureImg()
});应用所在页面接受参数
message(data) {
uni.showLoading({
title: '识别中'
})
this.getAccessToken(data.detail.data[0].action, data.detail.data[0].ress) //初始化卡证识别
},卡证识别鉴权认证机制
// 获取AccessToken
getAccessToken(path, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token',
data: {
grant_type: 'client_credentials',
client_id: self.dataObj.client_id,//自己申请的client_id
client_secret: self.dataObj.client_secret//自己申请的client_secret
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
// uploadImageBank
console.log(res, self.dataType)
if (self.dataType == 'idcard') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'idcardblack') {
self.uploadImage(path, res.data.access_token, ress)
} else if (self.dataType == 'bank') {
self.uploadImageBank(path, res.data.access_token, ress)
} else {
self.uploadlicense(path, res.data.access_token, ress)
uni.hideLoading()
}
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '智能识别过期，请联系管理员',
icon: 'none'
})
console.log(err)
}
})
},银行卡识别（高精度版）
uploadImageBank(path, token, ress) {
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/bankcard',
data: {
image: path,
access_token: token
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
uni.$emit('noticeBank', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},身份证识别
uploadImage(path, token, ress) {
let self = this
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard',
data: {
image: path,
access_token: token,
id_card_side: 'back'
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log(res)
uni.hideLoading()
setTimeout(() => {
console.log(self.dataType)
if (self.dataType == 'idcardblack') {
console.log(self.dataType)
uni.$emit('noticeblack', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
} else {
console.log(self.dataType)
uni.$emit('notice', {
path: {
"tempFilePaths": [ress]
},
animal: false,
words: res.data
})
}
}, 300);
uni.navigateBack()
},
fail(err) {
uni.hideLoading()
uni.showToast({
title: '识别失败',
icon: 'none'
})
console.log(err)
}
})
},index. html 全部代码
调用摄像头拍照
![]()
![]()
应用页面代码