WeChat applet OCR plug-in to realize identification of ID cards, driving licenses, bank cards, business licenses, driver's licenses, etc.

With the continuous development of technology, image recognition technology has become a hot topic in the current mobile Internet. The image and text recognition solution based on WeChat mini programs and OCR plug-ins has become an issue that more and more mini program developers are paying attention to and researching. In this article, I will introduce you to the WeChat applet OCR plug-in to help you realize identification functions such as ID cards, driving licenses, bank cards, business licenses, and driver's licenses.

1. Add this plug-in

First, you need to go to the WeChat Mini Program Community Platform to add this plug-in (WeChat Mini Program Community Platform)

Insert image description here

2. Purchase identification times

After adding the plug-in, you need to go to the WeChat service platform to purchase the number of identifications (WeChat service platform). You can choose according to your own needs, or you can try it for 100 times for free at 0 yuan. If you do not purchase, an error will be reported and the identification will not be successful.

Insert image description here

3. Add a statement in app.json to introduce the plug-in

//app.json
"plugins": {
    "ocr-plugin": {
      "version": "3.1.3",
      "provider": "wx4418e3e031e551be"
    }
}

4. Register plug-in

Use the json where the plugin is located, or register the plugin globally

{
    "usingComponents": {
        "ocr-navigator": "plugin://ocr-plugin/ocr-navigator"
    }
}

5. Use OCR plug-in

Expose custom components to the outside world, and the UI carrier is button (style can be customized)

<!-- 识别组件 -->
<view
    <ocr-navigator bind:onSuccess="platenumSuccess" certificateType="platenum">
        <button type="primary">车牌号识别</button>
    </ocr-navigator>
</view>

<!-- 识别出来的内容 -->
<view>识别出来的内容：{
   
   { text }}</view>


Page({
    data: {text: '' //要赋的值},

    // 调用事件方法
    platenumSuccess: function (e) {
        console.log('识别数据的内容', e);
        // 赋值操作this.setData({text: e.detail.number.text})
    },
})

In addition to recognizing license plate numbers, the OCR plug-in also supports identification of ID cards, driving licenses, bank cards, business licenses, and driver's licenses.

Usage example

<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{
   
   {false}}">
	<button type="primary" class="ocr-wrapper">身份证正面识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="idCard" opposite="{
   
   {true}}">
	<button type="primary" class="ocr-wrapper">身份证反面识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="driverslicense">
	<button type="primary" class="ocr-wrapper">驾驶证识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="drivingLicense">
	<button type="primary" class="ocr-wrapper">行驶证识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="platenum">
	<button type="primary" class="ocr-wrapper">车牌识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="bankCard">
	<button type="primary" class="ocr-wrapper">银行卡识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="businessLicense">
	<button type="primary" class="ocr-wrapper">营业执照识别</button>
</ocr-navigator>

<ocr-navigator bind:onSuccess="success" certificateType="menu">
	<button type="primary" class="ocr-wrapper">菜单识别</button>
</ocr-navigator>