CN113780266A - A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR - Google Patents
A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR Download PDFInfo
- Publication number
- CN113780266A CN113780266A CN202111097171.7A CN202111097171A CN113780266A CN 113780266 A CN113780266 A CN 113780266A CN 202111097171 A CN202111097171 A CN 202111097171A CN 113780266 A CN113780266 A CN 113780266A
- Authority
- CN
- China
- Prior art keywords
- ocr
- picture
- card
- identity card
- module
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Landscapes
- Character Discrimination (AREA)
Abstract
本发明涉及信息技术领域，提供了一种H5实现身份证扫描识别OCR的方法、装置及存储介质，解决现有技术H5仅能通过拍照和相册选择的方式进行身份证OCR识别，而由于拍照方式不同，导致上传的身份证照片质量各不相同、OCR识别错误率居高不下的问题。主要方案包括获得摄像头提供的视频流，添加一个HTML5的Video标签，并将从摄像头获得的视频作为这个标签的输入来源；添加DIV设置摄像头蒙版，用于用户固定图片在蒙版内，实现上传图片质量统一；拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，抓拍一张图，并根据蒙版边框进行裁剪；对保存的两张身份证图片分别进行base64编码；将得到的base64位编码上传到服务器，通过OCR识别算法，实现OCR功能。The invention relates to the field of information technology, and provides a method, device and storage medium for H5 to realize ID card scanning and identification OCR, and solves the problem that the prior art H5 can only perform ID card OCR identification by taking pictures and selecting photo albums. The quality of the uploaded ID card photos is different, and the OCR recognition error rate remains high. The main scheme includes obtaining the video stream provided by the camera, adding an HTML5 Video tag, and using the video obtained from the camera as the input source of this tag; adding DIV to set the camera mask, for the user to fix the image in the mask to realize uploading The image quality is uniform; the HTML5 Canvas function is used to take pictures, the content of the Video tag is captured in real time, a picture is captured, and is cropped according to the mask frame; the two saved ID card pictures are base64 encoded respectively; the obtained base64 bit The code is uploaded to the server, and the OCR function is realized through the OCR identification algorithm.
Description
Technical Field
The invention relates to the technical field of H5, and provides a method, a device and a storage medium for realizing OCR (optical character recognition) by H5.
Background
With the advancement of science and technology, the OCR recognition of identity cards is increasingly popularized in life, more and more scenes are provided for the H5 end to use the OCR of identity cards, in order to improve the customer experience, the OCR recognition by scanning becomes a trend, but only the OCR recognition by scanning realized by an APP client is available in the market at present, and no feasible commercial product is found at the H5 end. At present, H5 can only perform OCR (optical character recognition) of the identity card by means of photographing and photo album selection, and due to different photographing modes, the quality of uploaded identity card photos is different, and the error rate of OCR recognition is high. The quality of the uploaded photos can be effectively unified by H5 terminal scanning and recognition, and the recognition success rate is improved.
Disclosure of Invention
The problem of prior art H5 only can carry out ID card OCR through the mode of shooing and album selection, and because the mode of shooing is different, lead to the ID card photo quality of uploading to be different, OCR discernment error rate is high is solved.
In order to solve the technical problems, the invention adopts the following technical means:
a method for realizing OCR (optical character recognition) by H5, comprising the following steps:
step 1, acquiring a Video stream provided by a camera by adopting a getUserMedia () method through a media capture API of HTML5, adding a Video tag of HTML5, and taking a Video acquired from the camera as an input source of the tag;
step 2, setting a viewing frame by using WebRTC, adding DIV to set a camera mask for fixing the picture in the mask by a user, and realizing uniform quality of the uploaded picture;
step 3, taking a picture by adopting a Canvas function of HTML5 to capture the content of the Video tag in real time, snap-shooting a picture, and cutting according to the mask frame;
step 4, comparing the identity card images collected in the step 3 through an average absolute difference algorithm to judge whether the images are front and back images of the identity card, if so, storing the images, otherwise, returning to the step 3
Step 5, respectively carrying out base64 coding on the two stored identity card pictures;
and 6, uploading the base64 bit code obtained in the step 5 to a server, realizing an OCR function through an OCR recognition algorithm, carrying out rule verification on data recognized by the OCR, returning a verification result to a page for reverse display, and confirming by a client.
In the above technical solution, in step 3, the data of the Canvas is converted into a PNG image encoded with 64 bits of base by using the toDataURL of the Canvas.
In the above technical scheme, in step 4, the front side of the identity card collected in step 3 is compared with the template picture of the front side of the identity card by an average absolute difference algorithm, whether the picture contains name, gender, birth, address and citizen identification number is checked, if not, the step 3 is returned to for rescanning, if yes, the current picture of the identity card is stored, meanwhile, the step 3 is returned to for scanning the back side of the identity card, the step 3 is compared with the template picture of the back side of the identity card collected in step 3 and you want to check whether national emblems exist, if not, the step 3 is returned to for rescanning, and if yes, the current picture of the identity card is stored.
In the above technical solution, in step 6, the following rules are checked for the data after OCR recognition: the name, the ID card number, the date of birth, the validity period, the issuing organization, whether the household registration address is null, whether the ID card number is 18 digits, and whether the gender is consistent with the last but one after being converted into the code value.
The invention also provides a device for realizing OCR (optical character recognition) by H5, which comprises the following modules:
an input source module, which obtains a Video stream provided by a camera by adopting a getUserMedia () method through a media capture API of HTML5, adds a Video tag of HTML5, and takes the Video obtained from the camera as an input source of the tag;
the mask module is used for setting a view-finding frame by using WebRTC, adding DIV to set a camera mask and fixing pictures in the mask by a user so as to realize uniform quality of uploaded pictures;
the snapshot module and the shooting are to capture the content of the Video tag in real time by adopting the Canvas function of HTML5, snapshot a picture and cut according to the mask frame;
the comparison module compares the acquired image of the identity card by an average absolute difference algorithm to judge whether the acquired image is a front image or a back image of the identity card, if so, the acquired image is stored, otherwise, the acquired image returns to the snapshot module;
the coding module is used for respectively carrying out base64 coding on the two stored identity card pictures;
the recognition and verification module uploads the obtained base64 bit code to the server, an OCR function is realized through an OCR recognition algorithm, data after OCR recognition is regularly verified, the verification result is transmitted back to the page to be displayed reversely, and the client confirms the result.
In the above technical solution, in the snapshot module, the toDataURL of the Canvas is adopted to convert the data of the Canvas into a PNG image encoded with base64 bits.
In the technical scheme, in the comparison module, through an average absolute difference algorithm, the front face of the identity card collected in the snapshot module is compared with the template picture of the front face of the identity card, whether the picture contains a name, a gender, a birth, an address and a citizen identity number or not is checked, if the picture does not contain the name, the gender, the birth, the address and the citizen identity number, the snapshot module is returned to scan again, if the picture contains the name, the current identity card picture is stored, meanwhile, the snapshot module is returned to scan the back face of the identity card, the back face of the identity card collected in the snapshot module is compared with the template picture of the back face of the identity card and a user wants to check whether a national emblem exists or not, if the back face of the identity card collected in the snapshot module does not exist, the snapshot module is returned to scan again, and the current identity card picture exists, and the current identity card picture is stored.
In the above technical solution, in the recognition and verification module, the following rules are verified for the data recognized by the OCR: the name, the ID card number, the date of birth, the validity period, the issuing organization, whether the household registration address is null, whether the ID card number is 18 digits, and whether the gender is consistent with the last but one after being converted into the code value.
The invention also provides a storage medium, which stores a program for realizing OCR (optical character recognition) by H5, and when the program is executed by a processor, the program realizes a method for realizing OCR by H5 as claimed in claims 1-4.
Because the invention adopts the technical scheme, the invention has the following beneficial effects:
1. the invention carries out OCR identification of the identity card based on the H5 terminal, and only needs to align the identity card in real time by a mobile phone and wait for an identification result without pressing a photographing key.
2. The identification card picture adopts the average absolute difference algorithm to judge whether the picture is the identification card picture, so that other pictures which are not the identification card picture are not identified.
3. And (5) carrying out rule judgment on the identification result to prompt the user whether the identification result is correct or not.
Detailed Description
The OCR scanning recognition module is newly built, code logic is written, through programmable access to a camera provided by The Media Capture API of HTML5, a Video stream provided by The camera can be directly obtained by a getUsermedia () method, a Video tag of HTML5 is added, and Video obtained from The camera is used as an input source of The tag;
setting a view-finding frame by using WebRTC, adding DIV to set a camera mask for fixing a picture in the mask by a user, and realizing the uniformity of the picture quality at the last time;
the method comprises the steps that the Video label content is captured in real time by adopting the Canvas function of HTML5, the Video element can be used as the input of a Canvas image, and the core idea of obtaining picture data from the Canvas is to convert the Canvas data into a base64 bit coded PNG image by using the TODataURL of the Canvas, which is similar to 'data: image/PNG'; base64, xxxxx ", so that the imgData variable stores a long string of character data content representing a base64 encoding of a PNG image. Since the real image data is the part after base64 encoded comma, we can obtain it in two ways to let the image data received by the real server be this part. The first is to intercept 22-bit character string at the front end as image data; and the second method comprises the following steps: after the transmitted data is acquired at the back end, the character string after 22 bits is intercepted by a background language (namely, the character string is directly uploaded by skipping the above step in the foreground);
after the picture is obtained, the picture is transcoded by base64 and uploaded to a server, an OCR function is realized by an OCR recognition algorithm, and recognized information (including error information) is transmitted back to a page for reverse display.
Part of the code is as follows:
acquiring a camera:
<input type＝"file"accept＝"image/*；capture＝camera">
<input type＝"file"accept＝"video/*；capture＝camcorder">
< input type ═ file "accept ═ audio/>; capture "> set the viewfinder using WebRTC:
<div style＝"width:100％；position:fixed；left:0；bottom:0；top:0；right:0；">
<img src＝"cover.png"style＝"width:100％；height:100％；position:fixed；left:0；bottom:0；top:0；right:0；"/>
<video></video>
<canvas id＝"mycanvas"></canvas>
</div>
the img label is a framing frame covering layer;
the video tag is used for displaying the video stream of the camera;
a canvas is used to capture a picture from a video stream and upload it.
Claims (9)
1. A method for realizing OCR (optical character recognition) by scanning an identity card by H5 is characterized by comprising the following steps:
step 1, acquiring a Video stream provided by a camera by adopting a getUserMedia () method through a media capture API of HTML5, adding a Video tag of HTML5, and taking a Video acquired from the camera as an input source of the tag;
step 2, setting a viewing frame by using WebRTC, adding DIV to set a camera mask for fixing the picture in the mask by a user, and realizing uniform quality of the uploaded picture;
step 3, taking a picture by adopting a Canvas function of HTML5 to capture the content of the Video tag in real time, snap-shooting a picture, and cutting according to the mask frame;
step 4, comparing the identity card images collected in the step 3 through an average absolute difference algorithm to judge whether the images are front and back images of the identity card, if so, storing the images, otherwise, returning to the step 3
Step 5, respectively carrying out base64 coding on the two stored identity card pictures;
and 6, uploading the base64 bit code obtained in the step 5 to a server, realizing an OCR function through an OCR recognition algorithm, carrying out rule verification on data recognized by the OCR, returning a verification result to a page for reverse display, and confirming by a client.
2. The method for realizing OCR (optical character recognition) by H5 as claimed in claim 1, wherein in step 3, the data of Canvas is converted into PNG image encoded by base64 bits by using the TODataURL of Canvas.
3. The method for realizing OCR (optical character recognition) by scanning an identity card through H5 as claimed in claim 1, wherein in step 4, the front face of the identity card collected in step 3 is compared with the template picture of the front face of the identity card through an average absolute difference algorithm, whether the picture contains a name, a gender, a birth, an address and a citizen identity number or not is checked, if not, the step 3 is returned to for rescanning, if yes, the current identity card picture is stored, meanwhile, the step 3 is returned to for scanning the back face of the identity card, the template picture of the back face of the identity card collected in step 3 is compared with the template picture of the back face of the identity card and a person who wants to check whether a national emblem exists or not, if not, the step 3 is returned to for rescanning, and if yes, the current identity card picture is stored.
4. The method for H5 to realize OCR according to claim 1, wherein in step 6, the following rules are checked for the OCR-recognized data: the name, the ID card number, the date of birth, the validity period, the issuing organization, whether the household registration address is null, whether the ID card number is 18 digits, and whether the gender is consistent with the last but one after being converted into the code value.
5. An apparatus for realizing OCR (optical character recognition) by H5, which is characterized in that,
an input source module, which obtains a Video stream provided by a camera by adopting a getUserMedia () method through a media capture API of HTML5, adds a Video tag of HTML5, and takes the Video obtained from the camera as an input source of the tag;
the mask module is used for setting a view-finding frame by using WebRTC, adding DIV to set a camera mask and fixing pictures in the mask by a user so as to realize uniform quality of uploaded pictures;
the snapshot module and the shooting are to capture the content of the Video tag in real time by adopting the Canvas function of HTML5, snapshot a picture and cut according to the mask frame;
the comparison module compares the acquired image of the identity card by an average absolute difference algorithm to judge whether the acquired image is a front image or a back image of the identity card, if so, the acquired image is stored, otherwise, the acquired image returns to the snapshot module;
the coding module is used for respectively carrying out base64 coding on the two stored identity card pictures;
the recognition and verification module uploads the obtained base64 bit code to the server, an OCR function is realized through an OCR recognition algorithm, data after OCR recognition is regularly verified, the verification result is transmitted back to the page to be displayed reversely, and the client confirms the result.
6. An apparatus for realizing OCR by H5 as claimed in claim 1, wherein in the snapshot module, the data of Canvas is converted into PNG image encoded by base64 bits by using the TODataURL of Canvas.
7. The device as claimed in claim 1, wherein the comparing module compares the front side of the identification card collected by the capturing module with the front side template picture of the identification card through an average absolute difference algorithm, checks whether the picture contains name, gender, birth, address, and national identification number, returns to the capturing module for rescanning if the picture does not contain the name, gender, birth, address, and national identification number, and if the picture contains the national identification number, saves the current identification card picture, returns to the capturing module for rescanning the back side of the identification card, compares the back side of the identification card collected by the capturing module with the back side template picture of the identification card and wants to check whether the national emblem exists, returns to the capturing module for rescanning if the national emblem does not exist, and saves the current identification card picture if the national emblem exists.
8. An apparatus as claimed in claim 1, wherein the H5 is configured to implement OCR recognition, and the recognition verification module is configured to perform the following rules on OCR-recognized data: the name, the ID card number, the date of birth, the validity period, the issuing organization, whether the household registration address is null, whether the ID card number is 18 digits, and whether the gender is consistent with the last but one after being converted into the code value.
9. A storage medium storing a program H5 for implementing OCR, and a processor executing the program to implement the OCR method according to claim 1-4 in H5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111097171.7A CN113780266A (en) | 2021-09-18 | 2021-09-18 | A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111097171.7A CN113780266A (en) | 2021-09-18 | 2021-09-18 | A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113780266A true CN113780266A (en) | 2021-12-10 |
Family
ID=78851981
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111097171.7A Pending CN113780266A (en) | 2021-09-18 | 2021-09-18 | A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113780266A (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20140369556A1 (en) * | 2013-06-14 | 2014-12-18 | ABBYYDevelopment LLC | Applying super resolution for quality improvement of ocr processing |
| US20150371219A1 (en) * | 2013-02-07 | 2015-12-24 | Paneleven Limited | Method and apparatus for use in image processing |
| CN106022330A (en) * | 2016-05-20 | 2016-10-12 | 广东海辰科技股份有限公司 | ID card information collection method and collection terminal |
| WO2017069385A1 (en) * | 2015-10-23 | 2017-04-27 | 주식회사 피노텍 | Identification recognition device using mobile device |
| CN108520254A (en) * | 2018-03-01 | 2018-09-11 | 腾讯科技（深圳）有限公司 | A kind of Method for text detection, device and relevant device based on formatted image |
| WO2018233487A1 (en) * | 2017-06-22 | 2018-12-27 | 腾讯科技（深圳）有限公司 | Identity authentication method, terminal and storage medium |
| CN109325480A (en) * | 2018-09-03 | 2019-02-12 | 平安普惠企业管理有限公司 | The input method and terminal device of identity information |
| WO2020015162A1 (en) * | 2018-07-18 | 2020-01-23 | 平安科技（深圳）有限公司 | Image processing method for hybrid application, apparatus, computer device and storage medium |
-
2021
- 2021-09-18 CN CN202111097171.7A patent/CN113780266A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150371219A1 (en) * | 2013-02-07 | 2015-12-24 | Paneleven Limited | Method and apparatus for use in image processing |
| US20140369556A1 (en) * | 2013-06-14 | 2014-12-18 | ABBYYDevelopment LLC | Applying super resolution for quality improvement of ocr processing |
| WO2017069385A1 (en) * | 2015-10-23 | 2017-04-27 | 주식회사 피노텍 | Identification recognition device using mobile device |
| CN106022330A (en) * | 2016-05-20 | 2016-10-12 | 广东海辰科技股份有限公司 | ID card information collection method and collection terminal |
| WO2018233487A1 (en) * | 2017-06-22 | 2018-12-27 | 腾讯科技（深圳）有限公司 | Identity authentication method, terminal and storage medium |
| CN108520254A (en) * | 2018-03-01 | 2018-09-11 | 腾讯科技（深圳）有限公司 | A kind of Method for text detection, device and relevant device based on formatted image |
| WO2020015162A1 (en) * | 2018-07-18 | 2020-01-23 | 平安科技（深圳）有限公司 | Image processing method for hybrid application, apparatus, computer device and storage medium |
| CN109325480A (en) * | 2018-09-03 | 2019-02-12 | 平安普惠企业管理有限公司 | The input method and terminal device of identity information |
Non-Patent Citations (1)
| Title |
|---|
| 翁梅;刘明明;尹红征;: "基于HTML5的大田数据采集与传输系统的构建及应用", 河南农业科学, no. 09, pages 169 - 172 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Grgic et al. | SCface–surveillance cameras face database | |
| WO2019104930A1 (en) | Identity authentication method, electronic device and computer-readable storage medium | |
| US8194940B1 (en) | Automatic media sharing via shutter click | |
| US7450163B2 (en) | Device and method for embedding and retrieving information in digital images | |
| US9547667B2 (en) | Image annotation for image auxiliary information storage and retrieval | |
| JP6514139B2 (en) | Moving image providing system | |
| CN104572732A (en) | Method and device for inquiring user identification and method and device for acquiring user identification | |
| CN103024607B (en) | Method and apparatus for showing summarized radio | |
| TW200406122A (en) | System and method for remote controlled photography | |
| KR20070034048A (en) | How to improve quality of service on your mobile phone | |
| CN106446880A (en) | Information providing system and computer program | |
| CN105814905B (en) | Method and system for synchronizing use information between the device and server | |
| TWI518602B (en) | Image recognizing method, apparatus, terminal apparatus and server | |
| US9081801B2 (en) | Metadata supersets for matching images | |
| CN111432121A (en) | Generation method, electronic device, and storage medium | |
| CN114820407B (en) | A method for obtaining a certificate image and a related device | |
| WO2019127892A1 (en) | Method for remotely photographing picture, electronic device and computer readable storage medium | |
| CN113780266A (en) | A kind of H5 method, device and storage medium for realizing ID card scanning identification OCR | |
| CN111767845B (en) | Certificate identification method and device | |
| JP6806955B1 (en) | Information processing equipment, information processing systems, information processing methods, and programs | |
| CN108229339A (en) | Identification apparatus, certificate personal identification method and storage medium | |
| CN113784058A (en) | An image generation method, device, storage medium and electronic device | |
| CN112073684A (en) | Method for collecting universal image video resources | |
| US10592762B2 (en) | Metadata based interest point detection | |
| KR20170028593A (en) | Method and program for making moving image |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211210 |
|
| RJ01 | Rejection of invention patent application after publication |