【学习打卡】第7天 多端全栈项目实战

课程名称：多端全栈项目实战，大型商业级代驾业务全流程落地

课程章节：第二章

主讲老师：神思者

课程内容： 

    1. ocr  识别认证

课程收获：

    1. 开通ocr 识别插件

    在小程序中 使用ocr 证件扫描，需要安装第三方插件 在微信公众平台控制面板找到设置 -》 第三方设置

添加 “ocr支持”

APPID是`wx4418e3e031e551be`

<ocr-navigator @onSuccess="scanIdcardFront" certificateType="idCard" :opposite="false">
    <button class="camera"></button>
</ocr-navigator>

使用方式

打开小程序调试后 能够取身份证信息

{"type":0,"name":{"text":"张三","pos":{"left_top":{"x":98.7780914307,"y":40.9823074341},"right_top":{"x":172.311325073,"y":41.2864379883},"right_bottom":{"x":172.190856934,"y":64.9047088623},"left_bottom":{"x":98.6072158813,"y":64.5630187988}},"label":[]},"gender":{"text":"男","pos":{"left_top":{"x":101.035919189,"y":80.7537384033},"right_top":{"x":121.421043396,"y":80.7818603516},"right_bottom":{"x":121.264938354,"y":101.272567749},"left_bottom":{"x":100.882026672,"y":101.244766235}},"label":[]},"nationality":{"text":"汉","pos":{"left_top":{"x":201.881393433,"y":81.7225189209},"right_top":{"x":222.004470825,"y":81.6959762573},"right_bottom":{"x":221.899169922,"y":101.255821228},"left_bottom":{"x":201.765304565,"y":101.291915894}},"label":[]},"address":{"text":"广州市天河区五山路483号xxxxxxxxx","pos":{"left_top":{"x":95.5787811279,"y":150.794250488},"right_top":{"x":310.358947754,"y":151.617507935},"right_bottom":{"x":310.004699707,"y":220.222885132},"left_bottom":{"x":95.1295013428,"y":219.552230835}},"label":[]},"id":{"text":"4452xxxxxxxxxxxx","pos":{"left_top":{"x":176.158676147,"y":244.072860718},"right_top":{"x":453.888336182,"y":244.978515625},"right_bottom":{"x":453.874603271,"y":266.313659668},"left_bottom":{"x":176.066543579,"y":265.342407227}},"label":[]},"card_position":{"pos":{"left_top":{"x":1085.625,"y":621.75},"right_top":{"x":338.125,"y":594.75},"right_bottom":{"x":303.625,"y":99.75},"left_bottom":{"x":1189.125,"y":126.75}},"label":[]},"image_width":1280,"image_height":960,"image_path":"http://tmp/wx4418e3e031e551be.o6zAJs-yC5ByIjnyyy09jKDZquXk.dlrc7P7WlhnGb4aca86b078fc2acb5b08e7a0f438943.jpg"}

js 获取 身份证正面信息

let that = this;
let detail = resp.detail;
that.idcard.pid = detail.id.text;
that.idcard.name = detail.name.text;
that.idcard.sex = detail.gender.text;
that.idcard.address = detail.address.text;
//需要缩略身份证地址，文字太长页面显示不了
that.idcard.shortAddress = detail.address.text.substr(0, 15) + '...';
that.idcard.birthday = detail.birth.text;
//OCR插件拍摄到的身份证正面照片存储地址
that.idcard.idcardFront = detail.image_path;
//让身份证View标签加载身份证正面照片
that.cardBackground[0] = detail.image_path;

身份证背面 js

<ocr-navigator @onSuccess="scanIdcardBack" certificateType="idCard" :opposite="true">
     <button class="camera"></button>
</ocr-navigator>

    let that = this;
    let detail = resp.detail;
    //OCR插件拍摄到的身份证背面照片存储地址
    that.idcard.idcardBack = detail.image_path;
    //View标签加载身份证背面照片
    that.cardBackground[1] = detail.image_path;
    //获取身份证过期日期
    let validDate = detail.valid_date.text.split('-')[1];
    //日期格式化成yyyy-MM-dd形式
    that.idcard.expiration = dayjs(validDate, 'YYYYMMDD').format('YYYY-MM-DD');

驾驶证 使用方法

<ocr-navigator @onSuccess="scanDrcardFront" certificateType="driverslicense">
     <button class="camera"></button>
</ocr-navigator>

驾驶证获取信息 js

    let that = this;
    let detail = resp.detail;
    that.drcard.issueDate = detail.issue_date.text; //初次领证日期
    that.drcard.carClass = detail.car_class.text; //准驾车型
    that.drcard.validFrom = detail.valid_from.text; //驾驶证起始有效期
    that.drcard.validTo = detail.valid_to.text; //驾驶证截止有效期
    that.drcard.drcardFront = detail.image_path;
    that.cardBackground[3] = detail.image_path;

驾驶证 背面 

<image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../static/filling/card.png" mode="widthFix" class="card"></image>
   <text class="desc">驾驶证背面</text>
<button class="camera" @tap="takePhoto('drcardBack')"></button>

<text class="desc">手持驾驶证</text>
<button class="camera" @tap="takePhoto('drcardHolding')"></button>

使用takePhoto 去判断传值类型 取不同得返回值

{"plate_num":{"text":"粤KDxxxx","label":[]},"vehicle_type":{"text":"小型轿车","label":[]},"owner":{"text":"周xx","label":[]},"addr":{"text":"广东省xxxxxxxx","label":[]},"use_character":{"text":"非营运","label":[]},"model":{"text":"东风日产牌xxxxxx","label":[]},"vin":{"text":"LGBH52Exxxxxx","label":[]},"engine_num":{"text":"873073Y","label":[]},"register_date":{"text":"2017-11-13","label":[]},"issue_date":{"text":"2017-11-13","label":[]},"plate_num_b":{"text":"粤R82xxxx","label":[]},"record":{"text":"4418005xxxx","label":[]},"passengers_num":{"text":"26人","label":[]},"total_quality":{"text":"6900kg","label":[]},"prepare_quality":{"text":"4480kg","label":[]},"load_quality":{"text":"","label":[]},"lead_quality":{"text":"","label":[]},"overall_size":{"text":"7725x205xxxx","label":[]},"type":2,"card_position":[{"pos":{"left_top":{"x":454.0625,"y":17.34375},"right_top":{"x":987.8125,"y":11.71875},"right_bottom":{"x":987.8125,"y":562.96875},"left_bottom":{"x":471.5625,"y":546.09375}},"label":[]},{"pos":{"left_top":{"x":-0.9375,"y":28.59375},"right_top":{"x":445.3125,"y":22.96875},"right_bottom":{"x":445.3125,"y":551.71875},"left_bottom":{"x":-0.9375,"y":546.09375}},"label":[]}],"card_position_front":{"pos":{"left_top":{"x":454.0625,"y":17.34375},"right_top":{"x":987.8125,"y":11.71875},"right_bottom":{"x":987.8125,"y":562.96875},"left_bottom":{"x":471.5625,"y":546.09375}},"label":[]},"card_position_back":{"pos":{"left_top":{"x":-0.9375,"y":28.59375},"right_top":{"x":445.3125,"y":22.96875},"right_bottom":{"x":445.3125,"y":551.71875},"left_bottom":{"x":-0.9375,"y":546.09375}},"label":[]},"image_width":1000,"image_height":600,"img_size":{"w":1000,"h":600},"image_path":"http://tmp/wx4418e3e031e551be.o6zAJs-yC5ByIjnyyy09jKDZquXk.dlrc7P7WlhnGb4aca86b078fc2acb5b08e7a0f438943.jpg"}

在这里只记录ocr得使用方法 其他得可以在下面网址查询

https://mp.weixin.qq.com/wxopen/plugindevdoc

心得：

    ocr 使用起来还是很方便得 不管是后期工作中保存身份证信息 不管是注册 还是 保存照片 ，还可以文字识别。

就是没有医保卡 有些遗憾