136 lines
4.0 KiB
Vue
136 lines
4.0 KiB
Vue
<template>
|
||
<ciy-header ref="header" title="ciy-aicameraocr组件"></ciy-header>
|
||
<view>
|
||
<view class="ciy-card">
|
||
<view class="title">实时OCR识别</view>
|
||
<view class="content">
|
||
点击后置摄像头，支持png线框蒙版。<br />
|
||
支持身份证自动校正，身份证完整性检查。<br />
|
||
识别后在图上点击识别块，可复制文字。<br />
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<ciy-aicameraocr :maskpng="props.maskpng" :mode="props.mode" @textclick="txtclk" @change="chglog('change', $event)" ref="cameraocr"></ciy-aicameraocr>
|
||
<view @longtap="copyboard(copytxt)" v-if="copytxt" class="px4 py4">
|
||
<text class="kbd">长按复制</text>
|
||
{{copytxt}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="ciy-card">
|
||
<view class="title">属性</view>
|
||
<view class="content">
|
||
<view class="prp">mode</view>
|
||
<view class="tip">
|
||
识别类型。<br />
|
||
text任意场景、idcard身份证场景、none 无文字场景。<br />
|
||
如果text或idcard，且无文字的情况，5秒后自动超时。<br/>
|
||
默认 text
|
||
</view>
|
||
<view><ciy-radio left v-model="props.mode" :range="[{id:'text',name:'text'},{id:'idcard',name:'idcard'}]"></ciy-radio></view>
|
||
<view class="hr"></view>
|
||
<view class="prp">checkidcard</view>
|
||
<view class="tip">
|
||
校验身份证的某一面。<br />
|
||
front 人像面、back 国徽面。<br />
|
||
默认 无
|
||
</view>
|
||
<view><ciy-radio left v-model="props.mode" :range="[{id:'',name:'不限'},{id:'front人像',name:'front'},{id:'back',name:'back'}]"></ciy-radio></view>
|
||
<view class="hr"></view>
|
||
<view class="prp">maskpng</view>
|
||
<view class="tip">
|
||
相机蒙版png图片。<br />
|
||
</view>
|
||
<view><ciy-input left v-model="props.maskpng" bb></ciy-input></view>
|
||
<view class="hr"></view>
|
||
<view class="prp">height</view>
|
||
<view class="tip">
|
||
相机高度，使用vw单位。<br />
|
||
默认 60
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="prp">bordercolor</view>
|
||
<view class="tip">
|
||
OCR文字框颜色。<br />
|
||
默认 <text style="border:1px solid #00e112;">#00e112</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">方法</view>
|
||
<view class="content">
|
||
<view class="fun">Step</view>
|
||
<view class="tip">
|
||
改变当前状态。0 关闭摄像头，1 摄像头拍摄<br />
|
||
</view>
|
||
<button class="btn sm" @tap="funstep(0)">调用0</button>
|
||
<button class="btn sm" @tap="funstep(1)">调用1</button>
|
||
</view>
|
||
</view>
|
||
<view class="ciy-card">
|
||
<view class="title">事件</view>
|
||
<view class="content">
|
||
<view class="evt">@change</view>
|
||
<view class="tip">
|
||
OCR识别事件<br />
|
||
{<br />
|
||
tempimg: 临时图片地址<br/>
|
||
width: 图片宽度px<br/>
|
||
height: 图片高度px<br/>
|
||
idcardface: 身份证面 0 人像面 / 1 国徽面<br/>
|
||
orientation: 身份证朝向 （0 朝上 1 朝下 2 朝下 3 朝左）<br/>
|
||
txts: 文字数组<br/>
|
||
txtall: 全部文字文本<br/>
|
||
anchors: 原始数据<br/>
|
||
}
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="evt">@textclick</view>
|
||
<view class="tip">
|
||
OCR识别结果区域点击事件<br />
|
||
{<br />
|
||
text: 识别文字<br/>
|
||
pos: [{x,y},{x,y},{x,y},{x,y}] 框选点，相对%<br/>
|
||
}
|
||
</view>
|
||
<view class="hr"></view>
|
||
<view class="log" v-for="(item, index) in eventlog" :key="index">
|
||
<text class="code">{{eventlog.length - index}}</text>
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="hr"></view>
|
||
</view>
|
||
</template>
|
||
|
||
<style>
|
||
@import '@/pages/demo/zdemo.css';
|
||
</style>
|
||
|
||
<script>
|
||
import zmixin from '@/pages/demo/zmixin.js';
|
||
export default {
|
||
mixins: [zmixin],
|
||
data() {
|
||
return {
|
||
props: {
|
||
mode: 'text',
|
||
maskpng: '/img/maskcamera.png',
|
||
checkidcard: '',
|
||
},
|
||
copytxt: ''
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
methods: {
|
||
txtclk(po) {
|
||
this.copytxt = po.text;
|
||
},
|
||
funstep(step){
|
||
this.getrefsSync('cameraocr').Step(step);
|
||
}
|
||
}
|
||
}
|
||
</script> |