A method for obtaining a certificate image and a related device

Abstract

The embodiment of the present application provides a method for obtaining a certificate image and a related device. A web client obtains guidance information sent by a server, and displays the instruction information in a preview canvas according to a display rule. In response to a shooting instruction, the certificate photo is obtained, a signature area is displayed on the preview canvas, and signature information is obtained. A watermark is added to the certificate photo to obtain a certificate image. Since the instruction information is used to guide the shooting of preset certificate elements, and the certificate photo is an image including the certificate elements, the method is beneficial to improving the image quality of the certificate photo by obtaining and displaying the instruction information according to the display rule. In addition, since the signature information is obtained by a writing operation in the signature area, and the watermark is obtained based on the signature information, it is obvious that the watermark has real-time and instantaneous properties. Therefore, the certificate image obtained after adding the watermark includes both the certificate elements and the watermark. It can be seen that the method improves the security and image quality of the certificate image.

Description

Technical Field

[0001] The present application relates to the field of data processing technology, and in particular to a method for acquiring a certificate image and a related device. Background Art

[0002] At present, online authentication of identity information is becoming more and more common. For example, the document recognition function is increasingly being applied to business scenarios such as document information acquisition and customer authentication, which is used for customer information acquisition or identity authentication, etc., improving the efficiency of business handling and user experience. However, since online authentication requires the collection of private information of the authenticated object, such as various document photos (including but not limited to identity cards, bank cards, or driver's licenses, etc.), how to improve the image quality and security of document images is a problem that technicians in this field need to solve urgently. Summary of the invention

[0003] The present application provides a method for acquiring a certificate image and a related device, which are used to improve the image quality and security of the certificate image, as follows:

[0004] A method for obtaining a certificate image, applied to a web client, comprising:

[0005] Acquire guidance information sent by the server, the guidance information including instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information;

[0006] Displaying the indication information in a pre-configured preview canvas according to the display rule;

[0007] In response to a shooting instruction, obtaining a certificate photo, wherein the certificate photo is an image including elements of the certificate;

[0008] Displaying a signature area on the preview canvas and acquiring signature information, wherein the signature information is obtained by a writing operation in the signature area;

[0009] A watermark is added to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information.

[0010] Optionally, before obtaining the guidance information sent by the server, the method further includes:

[0011] In response to a preset start authentication instruction, use getUserMedia of MediaDevices to call up the camera device corresponding to the web client;

[0012] Acquire a video stream and play the video stream on the preview canvas through a vidio tag, wherein the video stream includes continuous image frames captured in real time by a camera device;

[0013] The video stream is parsed using canvas to generate video stream data, where the video stream data includes video stream information of each image frame.

[0014] Optionally, obtain the guidance information sent by the server, including:

[0015] Sending the operation information and the video stream data to the server, so that the server obtains and feeds back the guidance information based on the operation information and the video stream information of the image frame, wherein the operation information indicates the operation of the page client;

[0016] Receive guidance information sent by the server.

[0017] Optionally, the preview canvas is pre-built based on canvas and is drawn with a transparent mask, and the step of obtaining the ID photo in response to the shooting instruction includes:

[0018] In response to a shooting instruction, intercepting the last image frame within the transparent mask from the video stream as a candidate photo;

[0019] Determine whether the candidate photo includes the ID element, and if so, use the candidate photo as the ID photo.

[0020] Optionally, adding a watermark to the ID photo to obtain an ID image includes:

[0021] Obtaining preset watermark description information, wherein the watermark description information includes text indicating the purpose of use of the ID photo;

[0022] synthesizing the watermark description information and the signature information to obtain a watermark;

[0023] The watermark of a preset format is added to the ID photo to obtain the ID image, wherein the preset format includes a preset font, a preset font size, and a preset transparency.

[0024] A method for acquiring a certificate image, comprising:

[0025] The server receives operation information and video stream data sent by the web client, wherein the video stream data includes video stream information of each image frame captured in real time by the web client through a camera device; the operation information indicates the operation of the web client;

[0026] The server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame;

[0027] The server sends the operation information and the feature video stream to the agent client, wherein the feature video stream includes a feature image frame corresponding to each of the image frames;

[0028] The seat client plays the feature video stream in a mirrored canvas, where the mirrored canvas is the same as the preview canvas configured in the web client, and the preview canvas is pre-built based on canvas and has a transparent mask drawn on it;

[0029] In response to receiving the guidance information, the seat client sends the guidance information to the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and a display rule of the instruction information, and the instruction information is information input on the mirror canvas according to the display rule;

[0030] The server receives the guidance information sent by the agent client and sends the guidance information to the web client, so that the web client displays the indication information in the preview canvas according to the display rule.

[0031] A web client, comprising:

[0032] A guidance information acquisition unit, used to acquire guidance information sent by the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and display rules of the instruction information;

[0033] A guidance information display unit, configured to display the instruction information in a pre-configured preview canvas according to the display rule;

[0034] An ID photo acquisition unit, configured to acquire an ID photo in response to a shooting instruction, wherein the ID photo is an image including elements of the ID photo;

[0035] A signature information acquisition unit, used to display a signature area on the preview canvas and acquire signature information, wherein the signature information is obtained by writing in the signature area;

[0036] The certificate image acquisition unit is used to add a watermark to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information.

[0037] A system for acquiring a certificate image, comprising: a server, a web client, and an agent client;

[0038] The client is used to implement the various steps of the method for obtaining a certificate image applied to a web client as described above;

[0039] The server is used to implement the various steps of the method for obtaining the certificate image applied to the server as described above;

[0040] The agent client is used to implement the various steps of the method for acquiring a certificate image applied to the agent client as described above.

[0041] A device for acquiring a certificate image, comprising: a memory and a processor;

[0042] The memory is used to store programs;

[0043] The processor is used to execute the program to implement each step of the method for acquiring the document image.

[0044] A readable storage medium stores a computer program, which, when executed by a processor, implements each step of a method for acquiring a document image.

[0045] It can be seen from the above technical scheme that an embodiment of the present application provides a method for obtaining a certificate image and a related device, wherein a web client obtains guidance information sent by a server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and display rules of the instruction information, and displays the instruction information in a preview canvas according to the display rules, and in response to a shooting instruction, obtains a certificate photo, displays a signature area on the preview canvas, obtains signature information, adds a watermark to the certificate photo, and obtains a certificate image. Since the instruction information is used to guide the shooting of preset certificate elements, and the certificate photo is an image including certificate elements, the method is beneficial to improving the image quality of the certificate photo by obtaining and displaying the instruction information according to the display rules. Since the signature information is obtained by a writing operation in the signature area, and the watermark is obtained based on the signature information, it is obvious that the watermark has real-time and instantaneous properties. Therefore, the certificate image obtained after adding the watermark contains both the certificate elements and the watermark. It can be seen that the method improves the security and image quality of the certificate image. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0047] Figure 1 A schematic diagram of the structure of a system for acquiring a certificate image provided in an embodiment of the present application;

[0048] Figure 2 A flowchart of a specific implementation method of a method for acquiring a certificate image provided in an embodiment of the present application;

[0049] Figure 3 A schematic diagram of a display interface of a web client provided in an embodiment of the present application;

[0050] Figure 4 A schematic diagram of a certificate image provided in an embodiment of the present application;

[0051] Figure 5 A schematic diagram of a process for obtaining a certificate image provided in an embodiment of the present application;

[0052] Figure 6 A schematic diagram of the structure of a web client provided in an embodiment of the present application;

[0053] Figure 7 A schematic diagram of the structure of a device for acquiring a certificate image provided in an embodiment of the present application. DETAILED DESCRIPTION

[0054] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0055] After research, the inventor of the present application found that the current ID card shooting guide frame is mostly seen in Android native apps and WeChat applets, while the H5 page of the web client usually uses a file-type input tag to specify the capture attribute to take on-site photos. This method can directly call up the system camera function to take photos in the mobile browser, but the shooting interface cannot be controlled, and the shooting guidance cannot be implemented, resulting in the ID card image obtained during the ID card authentication process of the H5 page. The image quality is low and often does not meet the image conditions for authentication, for example, the ID card elements used for authentication are missing.

[0056] Based on this, a method for obtaining a certificate image provided in an embodiment of the present application is applied to, but not limited to, a scenario in which a certificate image for identity authentication is obtained through a web client. Figure 1 A system for acquiring a certificate image provided in an embodiment of the present application is as follows: Figure 1 As shown, the system includes a web client, a server, and an agent client, wherein the server is respectively connected to the web client and the agent client for communication. Optionally, the server connects the web client and the agent client based on the websocket protocol. In this embodiment, the web client is a user-oriented client, which is pre-configured on the client device (such as a smartphone, PC, and tablet computer, etc.), and the agent client is a customer service-oriented client, which is pre-configured on the agent-side device (such as a smartphone, PC, and tablet computer, etc.). Figure 1As shown, the web client is connected to the camera module and acquisition module built into the client device, and the agent client is connected to the acquisition module built into the agent client device. Figure 1 For the specific information interaction method between the various devices, please refer to the prior art.

[0057] Figure 2 The specific implementation process of the method for obtaining a certificate image provided in the embodiment of the present application is combined with Figure 2 right Figure 1 The various structural functions of the system shown are explained as follows: Figure 2 As shown, the method includes:

[0058] S201 . In response to a preset start authentication instruction, the web client uses getUserMedia of MediaDevices to call up a camera device corresponding to the web client.

[0059] In this embodiment, MediaDevices can provide connection access to media input devices (such as cameras, microphones, screen sharing, etc.) to obtain media data of these hardware resources. For the specific use of getUserMedia of MediaDevices, please refer to the prior art.

[0060] S202: The web client obtains the video stream and plays the video stream on the preview canvas through the vidio tag.

[0061] In this embodiment, the video stream includes continuous image frames captured by a camera device in real time. Specifically, the video stream composed of continuous image frames captured by the camera device is obtained by calling up the camera device.

[0062] In this embodiment, the preview canvas is pre-built based on canvas and has a transparent mask drawn on it. It should be noted that the transparent mask is a transparent guide canvas drawn on the current page of the web client based on Canvas, which can also be called a guide shooting frame. Generally, the area outside the transparent mask on the preview canvas is blurred.

[0063] S203: The web client uses canvas to parse the video stream and generate video stream data.

[0064] In this embodiment, the video stream data includes video stream information of each image frame.

[0065] It should be noted that Canvas is a tag in HTML5 for drawing images. For a specific method of using canvas to parse a video stream and generate video stream data, refer to the prior art.

[0066] S204: The web client sends the operation information and video stream data to the server.

[0067] In this embodiment, the operation information indicates the operation of the page client, for example, the operation is identity authentication or document information collection.

[0068] S205 , after receiving the operation information and video stream data sent by the web client, the server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame.

[0069] It should be noted that the feature extraction method includes extracting image contours, key elements, etc. For example, for document recognition operations, the key elements and contours related to the document to be identified in the image frame are extracted. For the ID card, the ID card contour and various document elements in the ID card image are extracted, such as keywords or key images at preset positions. It can be understood that the document elements do not include elements related to specific identity information, such as specific document numbers. For specific methods of extracting features, please refer to the prior art.

[0070] S206. The server sends the operation information and feature video stream to the agent client.

[0071] In this embodiment, the feature video stream includes a feature image frame corresponding to each image frame.

[0072] S207: The agent client plays the feature video stream in the mirrored canvas.

[0073] In this embodiment, the mirror image canvas of the agent client is the same canvas as the preview canvas configured in the web client, that is, both the mirror image canvas and the preview canvas are canvases pre-built based on canvas and drawn with a transparent mask.

[0074] It should be noted that the image features of the image frame are extracted to obtain the feature image frame corresponding to the image frame. The feature image frame is used as an element, and the feature video stream is a sequence of elements sorted in the order of playback. Since the server only sends the element sequence to the agent client, and since the agent client plays the feature video stream in the same mirror canvas as the preview canvas, it is guaranteed that the agent client obtains and synchronously displays the features of the image frame played in the preview canvas, and protects the privacy of the image frame displayed in the preview canvas.

[0075] S208. In response to receiving the guidance information, the agent client sends the guidance information to the server.

[0076] In this embodiment, the guidance information includes instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information, and the instruction information is information input on the mirror canvas according to the display rules.

[0077] It should be noted that the agent client plays the feature video stream in the mirrored canvas to show the customer service in real time the operations performed by the user in the web client, as well as the features of each image frame in the video stream obtained in real time by the web client through the camera device. The customer service enters instruction information for guiding the shooting of preset certificate elements in the mirrored screen according to the features of the image frame. Specifically, the display rules include display area, text style, and text size.

[0078] It should be further explained that the specific method for the agent client to obtain the guidance information is to obtain it through a collection device connected to the agent client. For details, please refer to the prior art.

[0079] S209: The server receives the guidance information sent by the agent client, and sends the guidance information to the web client.

[0080] S210: The web client receives the guidance information sent by the server, and displays the instruction information in a pre-configured preview canvas according to the display rule.

[0081] Specifically, the web client uses the context object to draw and display the instruction information on the Canvas according to the display rules.

[0082] It should be noted that since the instruction information and display rules are obtained from the agent client, the instruction information is displayed on the web client according to the display rules. This is aimed at achieving the purpose of the agent client using the instruction information to guide the shooting of preset document elements to be displayed synchronously on the web client according to the rules of the information input by the customer service in the mirror canvas, thereby further achieving the customer service's guidance of user operations. It can be understood that the web client displays the guidance information in the pre-configured preview canvas, which is conducive to guiding the user to adjust the shooting angle to obtain the document elements and achieve the purpose of improving the photo quality.

[0083] S211. The web client, in response to the shooting instruction, captures the last image frame in the transparent mask from the video stream as a candidate photo.

[0084] S212. The web client determines whether the candidate photo includes ID elements. If so, the candidate photo is used as the ID photo.

[0085] S213: The web client displays the signature area on the preview canvas and obtains signature information.

[0086] In this embodiment, the signature information is obtained by writing in the signature area.

[0087] Figure 3 A schematic diagram of a preview canvas is shown below: Figure 3As shown, a transparent mask 301 is drawn in the preview canvas. It should be noted that the specific method of obtaining the signature information is to obtain the user's writing operation in the signature area 302 through a collection device pre-connected to the web client to generate the signature information. For details, refer to the prior art.

[0088] S214: The web client obtains preset watermark description information.

[0089] In this embodiment, the watermark description information includes text indicating the purpose of use of the ID photo. Specifically, according to the operation information, the preset watermark description information corresponding to the operation information is obtained, or the watermark description information input by the user is obtained. For example, if the operation information is identity authentication, the pre-configured watermark description information corresponding to the identity authentication is obtained as "I agree that this ID image can be used for OCR recognition in the xx system, and other uses are invalid."

[0090] S215. The web client synthesizes the watermark description information and the signature information to obtain a watermark.

[0091] S216, the web client adds a watermark in a preset format to the ID photo to obtain an ID image.

[0092] In this embodiment, the preset format includes a preset font, a preset font size, and a preset transparency.

[0093] Figure 4 A schematic diagram illustrating a document image after adding a watermark.

[0094] It can be seen from the above technical scheme that in a method for obtaining an ID image provided by an embodiment of the present application, a web client obtains guidance information sent by a server, wherein the guidance information includes instruction information for guiding the shooting of preset ID elements and display rules of the instruction information, and displays the instruction information in a preview canvas according to the display rules. In response to the shooting instruction, an ID photo is obtained, a signature area is displayed on the preview canvas, and the signature information is obtained, and a watermark is added to the ID photo to obtain an ID image. Since the instruction information is used to guide the shooting of preset ID elements, and the ID photo is an image including the ID elements, this method is beneficial to improving the image quality of the ID photo by obtaining and displaying the instruction information according to the display rules. Since the signature information is obtained by writing in the signature area, and the watermark is obtained based on the signature information, it is obvious that the watermark has real-time and instantaneous properties. Therefore, the ID image obtained after adding the watermark contains both the ID elements and the watermark. It can be seen that this method improves the security and image quality of the ID image.

[0095] It should be noted that Figure 2This is only an optional specific implementation method of a method for obtaining a document image provided in an embodiment of the present application. In some optional embodiments, the present application also includes other optional specific implementation methods. Another optional specific implementation method of the method for obtaining a document image includes:

[0096] 1. The web client plays the video stream in the video and creates a shooting frame.

[0097] Specifically, use getUserMedia of MediaDevices to call up the mobile rear camera and set the resolution, obtain the video stream provided by the camera, use the HTML5 video tag to play the video stream, and cover the video tag with a pre-designed transparent mask to guide the shooting range when taking ID photos.

[0098] 2. The web client uses Canvas to obtain the video stream to realize the photo taking function.

[0099] Specifically, Canvas is used to capture the content in the video in real time, and the video is used as the input of the Canvas image, so as to realize the photo shooting function in this way.

[0100] 3. The web client obtains the user's signature.

[0101] Specifically, the Canvas is initialized as the signature area, the user writes a signature on the screen signature area, and the web client listens to touchstart, touchmove, and touchend events on the canvas, obtains the user's touch coordinate points, draws the user's signature pattern, and obtains the signature information.

[0102] 4. The web client adds a watermark on the photo screen.

[0103] Specifically, the position, size and transparency of the pattern watermark are set, the watermark is drawn into a Canvas container, and it is stamped on the photographed image to obtain the ID photographed image stamped with the pattern watermark.

[0104] 5. Obtain ID photo through web client.

[0105] Specifically, the core of photo acquisition is to use the toDataURL method of Canvas to convert the data of Canvas into a Base64-encoded JPEG image. A Button is set at a suitable position on the ID card shooting guide frame, and the toDataURL method is triggered when taking a photo to obtain the ID card shooting picture.

[0106] 6. Remote operation guidance is achieved through transparent masks.

[0107] Specifically, based on the websocket protocol, elements are distributed to the web client and the agent client through the server. A canvas with a pre-built-in client interface is established on the agent client based on canvas, and customer service is provided with operation marking (input of guidance information) and conditional display of information of the web client, so as to meet the purpose of customer service understanding user operations for the purpose of providing guidance for the next operation. A transparent mask is drawn on the web client based on canvas, and the guidance information is displayed so that the customer service can guide the customer's operations.

[0108] It can be seen from 1 to 6 that this method achieves at least the following beneficial effects:

[0109] First, using video and Canvas to implement the shooting guide frame makes up for the defect that the file type input tag in the browser cannot control the shooting interface, sets the shooting range guide, and saves data transmission resources; calling the mobile rear camera through MediaDevices's getUserMedia can directly set the photo shooting resolution, omitting the photo compression process.

[0110] Second, stamping a watermark on the ID photo can prevent the ID photo from being used for other purposes and obtain the user's signature as authorization to use the user's photo, which improves the security of the ID image and can also prevent unnecessary disputes.

[0111] Third, remote operation guidance is achieved by using a routing server to distribute elements instead of screen sharing. Operation marking and conditional display of key client operations (including the above-mentioned video stream and operation information) are performed by establishing a canvas with a pre-built-in client interface on the agent client, and a transparent mask is drawn on the web client for display to achieve the purpose of the agent guiding the customer's operation. On the one hand, it reduces the unnecessary knowledge and information sharing of the agent to the customer, effectively protecting the customer's privacy; on the other hand, the method of distributing elements through routers avoids the sharing of unnecessary information.

[0112] The method for obtaining a certificate image provided in this application is summarized as follows: Figure 5 The process shown is as follows Figure 5 As shown, this method specifically includes:

[0113] S501: The server receives operation information and video stream data sent by the web client.

[0114] In this embodiment, the video stream data includes video stream information of each image frame captured in real time by the web client through a camera device. The operation information indicates the operation of the web client.

[0115] S502: The server extracts image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame.

[0116] It should be noted that the feature extraction method includes extracting image contours, key elements, etc. For example, for document recognition operations, the key elements and contours related to the document to be identified in the image frame are extracted. For the ID card, the ID card contour and various document elements in the ID card image are extracted, such as keywords or key images at preset positions. It can be understood that the document elements do not include elements related to specific identity information, such as specific document numbers. For specific methods of extracting features, please refer to the prior art.

[0117] S503: The server sends the operation information and feature video stream to the agent client.

[0118] In this embodiment, the feature video stream includes a feature image frame corresponding to each image frame.

[0119] S504, the agent client plays the feature video stream in the mirrored canvas.

[0120] In this embodiment, the mirrored canvas is the same canvas as the preview canvas configured on the web client, and the preview canvas is pre-built based on canvas and has a transparent mask drawn on it.

[0121] It should be noted that the mirror image canvas of the seat client is the same canvas as the preview canvas configured in the web client, that is, both the mirror image canvas and the preview canvas are canvases pre-built based on canvas and drawn with a transparent mask.

[0122] S505: In response to receiving the guidance information, the agent client sends the guidance information to the server.

[0123] In this embodiment, the guidance information includes instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information, and the instruction information is information input on the mirror canvas according to the display rules.

[0124] S506: The server receives the guidance information sent by the agent client and sends the guidance information to the web client.

[0125] S507: The web client obtains the guidance information sent by the server, and displays the instruction information in a pre-configured preview canvas according to the display rule.

[0126] S508: The web client obtains a photo of the ID card in response to the shooting instruction.

[0127] In this embodiment, the ID photo is an image including ID elements. For an optional method of obtaining the ID photo, refer to the above embodiment.

[0128] S509: The web client displays the signature area on the preview canvas and obtains signature information.

[0129] In this embodiment, the signature information is obtained by writing in the signature area. For an optional method of obtaining the signature information, refer to the above embodiment.

[0130] S510. The web client adds a watermark to the ID photo to obtain an ID image.

[0131] In this embodiment, the watermark is obtained based on the signature information. An optional method for adding a watermark to a certificate photo to obtain a certificate image is described in the above embodiment.

[0132] It can be seen from the above technical scheme that in the method for obtaining an ID image provided by the embodiment of the present application, a web client obtains guidance information sent by a server, wherein the guidance information includes instruction information for guiding the shooting of preset ID elements and display rules of the instruction information, and displays the instruction information in a preview canvas according to the display rules. In response to a shooting instruction, an ID photo is obtained, a signature area is displayed on the preview canvas, and signature information is obtained, a watermark is added to the ID photo, and an ID image is obtained. Since the instruction information is used to guide the shooting of preset ID elements, and the ID photo is an image including the ID elements, the method is beneficial to improving the image quality of the ID photo by obtaining and displaying the instruction information according to the display rules. Furthermore, since the signature information is obtained by a writing operation in the signature area, and the watermark is obtained based on the signature information, it is obvious that the watermark has real-time and instantaneous properties. Therefore, the ID image obtained after adding the watermark contains both the ID elements and the watermark. It can be seen that the method improves the security and image quality of the ID image.

[0133] Furthermore, the server sends the operation information and the feature video stream to the seat client, wherein the feature video stream includes the feature image frame corresponding to each image frame. It can be seen that the server uses the feature image frame as an element, and the feature video stream is a sequence of elements sorted in the order of playback. Since the server only sends the element sequence to the seat client, and since the seat client plays the feature video stream in the same mirrored canvas as the preview canvas, it is ensured that the seat client obtains and synchronously displays the features of the image frame played in the preview canvas, and protects the privacy information included in the image frame displayed in the preview canvas.

[0134] Figure 6 The following is a schematic diagram of the structure of a web client: Figure 6 As shown, the web client includes:

[0135] A guidance information acquisition unit 601 is used to acquire guidance information sent by the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and display rules of the instruction information;

[0136] A guidance information display unit 602, configured to display the instruction information in a pre-configured preview canvas according to the display rule;

[0137] The ID photo acquisition unit 603 is used to acquire the ID photo in response to the shooting instruction, wherein the ID photo is an image including the ID elements;

[0138] A signature information acquisition unit, used to display a signature area on the preview canvas and acquire signature information, wherein the signature information is obtained by writing in the signature area;

[0139] The certificate image acquisition unit 604 is used to add a watermark to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information.

[0140] Optionally, the device further comprises: a video processing unit, configured to, before obtaining the guide information sent by the server, respond to a preset start authentication instruction and use getUserMedia of MediaDevices to call up a camera device corresponding to the web client;

[0141] Acquire a video stream and play the video stream on the preview canvas through a vidio tag, wherein the video stream includes continuous image frames captured in real time by a camera device;

[0142] The video stream is parsed using canvas to generate video stream data, where the video stream data includes video stream information of each image frame.

[0143] Optionally, the guidance information acquisition unit is used to acquire the guidance information sent by the server, including: the guidance information acquisition unit is specifically used to:

[0144] Sending the operation information and the video stream data to the server, so that the server obtains and feeds back the guidance information based on the operation information and the video stream information of the image frame, wherein the operation information indicates the operation of the page client;

[0145] Receive guidance information sent by the server.

[0146] Optionally, the preview canvas is pre-built based on canvas and is drawn with a transparent mask. The ID photo acquisition unit is used to respond to the shooting instruction and acquire the ID photo, including: the ID photo acquisition unit is specifically used to:

[0147] In response to a shooting instruction, intercepting the last image frame within the transparent mask from the video stream as a candidate photo;

[0148] Determine whether the candidate photo includes the ID element, and if so, use the candidate photo as the ID photo.

[0149] Optionally, the certificate image acquisition unit is used to add a watermark to the certificate photo to obtain the certificate image, including: the certificate image acquisition unit is specifically used to:

[0150] Obtaining preset watermark description information, wherein the watermark description information includes text indicating the purpose of use of the ID photo;

[0151] synthesizing the watermark description information and the signature information to obtain a watermark;

[0152] The watermark of a preset format is added to the ID photo to obtain the ID image, wherein the preset format includes a preset font, a preset font size, and a preset transparency.

[0153] Figure 7 A schematic diagram of the structure of a device for acquiring a document image is shown, and the device may include: at least one processor 701, at least one communication interface 702, at least one memory 703 and at least one communication bus 704;

[0154] In the embodiment of the present application, the number of the processor 701, the communication interface 702, the memory 703, and the communication bus 704 is at least one, and the processor 701, the communication interface 702, and the memory 703 communicate with each other through the communication bus 704;

[0155] The processor 701 may be a central processing unit (CPU), or an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of the present invention;

[0156] The memory 703 may include a high-speed RAM memory, and may also include a non-volatile memory, such as at least one disk memory;

[0157] The memory stores a program, and the processor can execute the program stored in the memory to implement the steps of a method for acquiring a certificate image provided in an embodiment of the present application, as follows:

[0158] A method for obtaining a certificate image, applied to a web client, comprising:

[0159] Acquire guidance information sent by the server, the guidance information including instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information;

[0160] Displaying the indication information in a pre-configured preview canvas according to the display rule;

[0161] In response to a shooting instruction, obtaining a certificate photo, wherein the certificate photo is an image including elements of the certificate;

[0162] Displaying a signature area on the preview canvas and acquiring signature information, wherein the signature information is obtained by a writing operation in the signature area;

[0163] A watermark is added to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information.

[0164] Optionally, before obtaining the guidance information sent by the server, the method further includes:

[0165] In response to a preset start authentication instruction, use getUserMedia of MediaDevices to call up the camera device corresponding to the web client;

[0166] Acquire a video stream and play the video stream on the preview canvas through a vidio tag, wherein the video stream includes continuous image frames captured in real time by a camera device;

[0167] The video stream is parsed using canvas to generate video stream data, where the video stream data includes video stream information of each image frame.

[0168] Optionally, obtain the guidance information sent by the server, including:

[0169] Sending the operation information and the video stream data to the server, so that the server obtains and feeds back the guidance information based on the operation information and the video stream information of the image frame, wherein the operation information indicates the operation of the page client;

[0170] Receive guidance information sent by the server.

[0171] Optionally, the preview canvas is pre-built based on canvas and is drawn with a transparent mask, and the step of obtaining the ID photo in response to the shooting instruction includes:

[0172] In response to a shooting instruction, intercepting the last image frame within the transparent mask from the video stream as a candidate photo;

[0173] Determine whether the candidate photo includes the ID element, and if so, use the candidate photo as the ID photo.

[0174] Optionally, adding a watermark to the ID photo to obtain an ID image includes:

[0175] Obtaining preset watermark description information, wherein the watermark description information includes text indicating the purpose of use of the ID photo;

[0176] synthesizing the watermark description information and the signature information to obtain a watermark;

[0177] The watermark of a preset format is added to the ID photo to obtain the ID image, wherein the preset format includes a preset font, a preset font size, and a preset transparency.

[0178] A method for acquiring a certificate image, comprising:

[0179] The server receives operation information and video stream data sent by the web client, wherein the video stream data includes video stream information of each image frame captured in real time by the web client through a camera device; the operation information indicates the operation of the web client;

[0180] The server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame;

[0181] The server sends the operation information and the feature video stream to the agent client, wherein the feature video stream includes a feature image frame corresponding to each of the image frames;

[0182] The seat client plays the feature video stream in a mirrored canvas, where the mirrored canvas is the same as the preview canvas configured in the web client, and the preview canvas is pre-built based on canvas and has a transparent mask drawn on it;

[0183] In response to receiving the guidance information, the seat client sends the guidance information to the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and a display rule of the instruction information, and the instruction information is information input on the mirror canvas according to the display rule;

[0184] The server receives the guidance information sent by the agent client and sends the guidance information to the web client, so that the web client displays the indication information in the preview canvas according to the display rule.

[0185] The embodiment of the present application further provides a readable storage medium, which can store a computer program suitable for execution by a processor. When the computer program is executed by the processor, the steps of a method for obtaining a document image provided in the embodiment of the present application are implemented as follows:

[0186] A method for obtaining a certificate image, applied to a web client, comprising:

[0187] Acquire guidance information sent by the server, the guidance information including instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information;

[0188] Displaying the indication information in a pre-configured preview canvas according to the display rule;

[0189] In response to a shooting instruction, obtaining a certificate photo, wherein the certificate photo is an image including elements of the certificate;

[0190] Displaying a signature area on the preview canvas and acquiring signature information, wherein the signature information is obtained by a writing operation in the signature area;

[0191] A watermark is added to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information.

[0192] Optionally, before obtaining the guidance information sent by the server, the method further includes:

[0193] In response to a preset start authentication instruction, use getUserMedia of MediaDevices to call up the camera device corresponding to the web client;

[0194] Acquire a video stream and play the video stream on the preview canvas through a vidio tag, wherein the video stream includes continuous image frames captured in real time by a camera device;

[0195] The video stream is parsed using canvas to generate video stream data, where the video stream data includes video stream information of each image frame.

[0196] Optionally, obtain the guidance information sent by the server, including:

[0197] Sending the operation information and the video stream data to the server, so that the server obtains and feeds back the guidance information based on the operation information and the video stream information of the image frame, wherein the operation information indicates the operation of the page client;

[0198] Receive guidance information sent by the server.

[0199] Optionally, the preview canvas is pre-built based on canvas and is drawn with a transparent mask, and the step of obtaining the ID photo in response to the shooting instruction includes:

[0200] In response to a shooting instruction, intercepting the last image frame within the transparent mask from the video stream as a candidate photo;

[0201] Determine whether the candidate photo includes the ID element, and if so, use the candidate photo as the ID photo.

[0202] Optionally, adding a watermark to the ID photo to obtain an ID image includes:

[0203] Obtaining preset watermark description information, wherein the watermark description information includes text indicating the purpose of use of the ID photo;

[0204] synthesizing the watermark description information and the signature information to obtain a watermark;

[0205] The watermark of a preset format is added to the ID photo to obtain the ID image, wherein the preset format includes a preset font, a preset font size, and a preset transparency.

[0206] A method for acquiring a certificate image, comprising:

[0207] The server receives operation information and video stream data sent by the web client, wherein the video stream data includes video stream information of each image frame captured in real time by the web client through a camera device; the operation information indicates the operation of the web client;

[0208] The server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame;

[0209] The server sends the operation information and the feature video stream to the agent client, wherein the feature video stream includes a feature image frame corresponding to each of the image frames;

[0210] The seat client plays the feature video stream in a mirrored canvas, where the mirrored canvas is the same as the preview canvas configured in the web client, and the preview canvas is pre-built based on canvas and has a transparent mask drawn on it;

[0211] In response to receiving the guidance information, the seat client sends the guidance information to the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and a display rule of the instruction information, and the instruction information is information input on the mirror canvas according to the display rule;

[0212] The server receives the guidance information sent by the agent client and sends the guidance information to the web client, so that the web client displays the indication information in the preview canvas according to the display rule.

[0213] Finally, it should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.

[0214] The various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments. The same or similar parts between the various embodiments can be referenced to each other.

[0215] The above description of the disclosed embodiments enables those skilled in the art to implement or use the present application. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present application. Therefore, the present application will not be limited to the embodiments shown herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for acquiring a document image, characterized in that: Applied to web clients, including: Acquire guidance information sent by the server, the guidance information including instruction information for guiding the photographing of preset certificate elements and display rules of the instruction information; Displaying the indication information in a pre-configured preview canvas according to the display rule; In response to a shooting instruction, obtaining a certificate photo, wherein the certificate photo is an image including elements of the certificate; Displaying a signature area on the preview canvas and acquiring signature information, wherein the signature information is obtained by a writing operation in the signature area; Adding a watermark to the ID photo to obtain an ID image, wherein the watermark is obtained based on the signature information; Among them, based on the websocket protocol, the server distributes elements to the web client and the agent client, a canvas with a pre-built-in client interface is established on the agent client based on canvas, a transparent mask is drawn on the web client based on canvas, and a routing server is used to distribute elements to realize remote operation guidance; The process of obtaining the guidance information is as follows: After receiving the operation information and video stream data sent by the web client, the server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame; The server sends the operation information and feature video stream to the agent client; The agent client plays the feature video stream in the mirrored canvas; In response to receiving the guidance information, the agent client sends the guidance information to the server.

2. The method according to claim 1, characterized in that Before obtaining the guidance information sent by the server, the method further includes: In response to a preset start authentication instruction, use getUserMedia of MediaDevices to call up the camera device corresponding to the web client; Acquire a video stream and play the video stream on the preview canvas through a vidio tag, wherein the video stream includes continuous image frames captured in real time by a camera device; The video stream is parsed using canvas to generate video stream data, where the video stream data includes video stream information of each image frame.

3. The method according to claim 2, characterized in that The obtaining of the guidance information sent by the server includes: Sending the operation information and the video stream data to the server, so that the server obtains and feeds back the guidance information based on the operation information and the video stream information of the image frame, wherein the operation information indicates the operation of the web client; Receive guidance information sent by the server.

4. The method according to claim 1, characterized in that: The preview canvas is pre-built based on canvas and has a transparent mask drawn thereon. The step of obtaining the ID photo in response to the shooting instruction includes: In response to a shooting instruction, intercepting the last image frame within the transparent mask from the video stream as a candidate photo; Determine whether the candidate photo includes the ID element, and if so, use the candidate photo as the ID photo.

5. The method according to claim 1, characterized in that The step of adding a watermark to the ID photo to obtain the ID image includes: Obtaining preset watermark description information, wherein the watermark description information includes text indicating the purpose of use of the ID photo; synthesizing the watermark description information and the signature information to obtain a watermark; The watermark of a preset format is added to the ID photo to obtain the ID image, wherein the preset format includes a preset font, a preset font size, and a preset transparency.

6. A method for acquiring a certificate image, characterized in that: The method comprises: The server receives operation information and video stream data sent by the web client, wherein the video stream data includes video stream information of each image frame captured in real time by the web client through a camera device; the operation information indicates the operation of the web client; The server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame; The server sends the operation information and the feature video stream to the agent client, wherein the feature video stream includes a feature image frame corresponding to each of the image frames; The seat client plays the feature video stream in a mirrored canvas, where the mirrored canvas is the same as the preview canvas configured in the web client, and the preview canvas is pre-built based on canvas and has a transparent mask drawn on it; In response to receiving the guidance information, the agent client sends the guidance information to the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and a display rule of the instruction information, and the instruction information is information input in the mirror image canvas according to the display rule; the customer service inputs the instruction information for guiding the shooting of preset certificate elements in the mirror image according to the characteristics of the image frame; The server receives the guidance information sent by the agent client and sends the guidance information to the web client, so that the web client displays the indication information in the preview canvas according to the display rule; Among them, based on the websocket protocol, elements are distributed to the web client and the agent client through the server, a canvas with a pre-built-in client interface is established on the agent client based on canvas, a transparent mask is drawn on the web client based on canvas, and a routing server is used to distribute elements to realize remote operation guidance.

7. A web client, characterized in that: include: A guidance information acquisition unit, used to acquire guidance information sent by the server, wherein the guidance information includes instruction information for guiding the shooting of preset certificate elements and display rules of the instruction information; A guidance information display unit, configured to display the instruction information in a pre-configured preview canvas according to the display rule; An ID photo acquisition unit, configured to acquire an ID photo in response to a shooting instruction, wherein the ID photo is an image including elements of the ID photo; A signature information acquisition unit, used to display a signature area on the preview canvas and acquire signature information, wherein the signature information is obtained by writing in the signature area; A certificate image acquisition unit, used to add a watermark to the certificate photo to obtain a certificate image, wherein the watermark is obtained based on the signature information; Among them, based on the websocket protocol, the server distributes elements to the web client and the agent client, a canvas with a pre-built-in client interface is established on the agent client based on canvas, a transparent mask is drawn on the web client based on canvas, and a routing server is used to distribute elements to realize remote operation guidance; The process of obtaining the guidance information is as follows: After receiving the operation information and video stream data sent by the web client, the server extracts the image features of the image frame according to the video stream information of the image frame to obtain a feature image frame corresponding to the image frame; The server sends the operation information and feature video stream to the agent client; The agent client plays the feature video stream in the mirrored canvas; In response to receiving the guidance information, the agent client sends the guidance information to the server.

8. A system for acquiring a certificate image, characterized in that: include: Server, web client and agent client; The client is used to implement the steps of the method for obtaining a certificate image applied to a web client as described in any one of claims 1 to 5; The server is used to implement each step of the method for obtaining a certificate image applied to a server as claimed in claim 6; The agent client is used to implement each step of the method for acquiring a certificate image applied to an agent client as described in claim 6.

9. An electronic device, characterized in that: include: Memory and processor; The memory is used to store programs; The processor is used to execute the program to implement the various steps of the method for acquiring an ID image as described in any one of claims 1 to 5, or to implement the various steps of the method for acquiring an ID image as described in claim 6.

10. A readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, each step of the method for acquiring an ID card image as described in any one of claims 1 to 5 is implemented, or each step of the method for acquiring an ID card image as described in claim 6 is implemented.

Images