赞
踩
组件中使用
<template>
<view class="cameraPage">
<camera device-position="back" flash="off" style="width: 100%;height: 400upx; position: relative;">
<image src="../../../../static/images/imageFile.webp" class="imageFile" @click="uploadImage" mode="">
</image>
</camera>
<button type="default" @tap="TakePhoto" class="btn_camera">拍照</button>
<!-- <image :src="photoSrc" style="width: 100%;" mode=""></image> -->
</view>
</template>
<script>
import {
pathToBase64
} from '@/pages/infoProvided/componts/cameraPage/pathToBase64.js'
import ajax from 'uni-ajax'
export default {
data() {
return {
photoSrc: '',
accessToken: '', //百度识别的token
cardType: 'front', //身份证正面
IDCardInfo: { //身份证包含的信息
name: '',
ethnic: '',
address: '',
idNumber: '',
birthday: '',
gender: '',
},
}
},
onLoad() { //监听页面加载
this.getAccessToken() //获取身份识别的 Access Token
},
methods: {
TakePhoto: function() {
const _this = this
const camera = uni.createCameraContext() //创建照相机对象
camera.takePhoto({ //实现拍照功能
quality: 'high', //high 高质量成像、 normal 普通质量、row 低质量
success: (res) => {
_this.photoSrc = res.tempImagePath
pathToBase64(_this.photoSrc).then(base64 => {
let imgBase64 = base64
_this.getIdCardInfo(imgBase64)
})
}
})
},
uploadImage: function(ocrtype) { //打开相册
var _this = this
var cardType = ""
if (ocrtype == 1) {
cardType = "front"
} else {
cardType = "back"
}
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success(res) {
var tempImg = res.tempFilePaths[0]
_this.photoSrc = tempImg
pathToBase64(tempImg).then(base64 => {
let imgBase64 = base64
_this.getIdCardInfo(imgBase64)
})
}
})
},
getAccessToken: function() { // 获取身份识别的 Access Token
uni.showLoading({
title: '加载中',
mask: true
})
var _this = this
uni.request({
url: "https://aip.baidubce.com/oauth/2.0/token",
data: {
grant_type: "client_credentials",
client_id: "你的百度云API Key", //API Key
client_secret: "你的百度云Secret Key" //Secret Key
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(res) {
_this.accessToken = res.data.access_token
uni.hideLoading();
}
})
},
getIdCardInfo: function(base64) { //调用百度API进行识别身份证base64位图片
uni.showLoading({
title: '识别中',
mask: true
})
const _this = this
ajax({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=' + _this.accessToken,
data: {
id_card_side: _this.cardType,
detect_direction: true, //检测图像朝向
image: base64,
},
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(res) {
var cardName = res.data.words_result.姓名
if (cardName != undefined) {
_this.IDCardInfo.name = res.data.words_result.姓名.words
_this.IDCardInfo.ethnic = res.data.words_result.民族.words
_this.IDCardInfo.address = res.data.words_result.住址.words
_this.IDCardInfo.idNumber = res.data.words_result.公民身份号码.words
_this.IDCardInfo.birthday = res.data.words_result.出生.words
_this.IDCardInfo.gender = res.data.words_result.性别.words
uni.$emit("setIDCardInfo", _this.IDCardInfo.idNumber)
setTimeout(() => {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},1000)
}
else if (cardName && cardName.image_status && (cardName.image_status == "reversed_side" || cardName.image_status ==
"non_idcard")) {
uni.showToast({
title: "请选择正确的正面身份证图片",
icon: "none",
duration: 2000
})
setTimeout(() => {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},2000)
}else {
uni.showToast({
title: "未识别",
icon: "none",
duration: 2000
})
setTimeout(() => {
uni.navigateBack({
delta: 1, //返回层数,2则上上页
})
},2000)
}
uni.hideLoading();
},
fail(err) {
console.log(err)
uni.hideLoading();
}
})
}
},
}
</script>
<style lang="scss">
page {
width: 100%;
height: 100%;
}
.cameraPage {
position: fixed;
height: 100%;
width: 100%;
background-color: rgb(36, 41, 46);
display: flex;
flex-wrap: wrap;
align-content: center;
.btn_camera {
width: 100%;
height: 100rpx;
}
.imageFile {
position: absolute;
bottom: 20rpx;
right: 20rpx;
width: 100rpx;
height: 100rpx;
}
}
</style>
pathToBase64.js
export function pathToBase64(path) {
return new Promise(function(resolve, reject) {
if (typeof window === 'object' && 'document' in window) {
if (typeof FileReader === 'function') {
var xhr = new XMLHttpRequest()
xhr.open('GET', path, true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status === 200) {
let fileReader = new FileReader()
fileReader.onload = function(e) {
resolve(e.target.result)
}
fileReader.onerror = reject
fileReader.readAsDataURL(this.response)
}
}
xhr.onerror = reject
xhr.send()
return
}
var canvas = document.createElement('canvas')
var c2x = canvas.getContext('2d')
var img = new Image
img.onload = function() {
canvas.width = img.width
canvas.height = img.height
c2x.drawImage(img, 0, 0)
resolve(canvas.toDataURL())
canvas.height = canvas.width = 0
}
img.onerror = reject
img.src = path
return
}
if (typeof plus === 'object') {
plus.io.resolveLocalFileSystemURL(getLocalFilePath(path), function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader()
fileReader.onload = function(data) {
resolve(data.target.result)
}
fileReader.onerror = function(error) {
reject(error)
}
fileReader.readAsDataURL(file)
}, function(error) {
reject(error)
})
}, function(error) {
reject(error)
})
return
}
if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
wx.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: function(res) {
resolve('data:image/png;base64,' + res.data)
},
fail: function(error) {
reject(error)
}
})
return
}
reject(new Error('not support'))
})
}
赞
踩
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。