A method, medium, and apparatus for scanning an image-based identification code on a browser side

Abstract

The application discloses a method, medium and device for scanning and identifying codes in images based on a browser end, which comprises the following steps: splicing a plurality of image data to obtain a spliced image, pre-processing the spliced image, marking potential image code areas on the spliced image, calling an image code analysis component to identify each potential image code area, obtaining analysis results of image codes on each spliced image, storing the analysis results in a cache unit, displaying an analysis list, receiving an instruction for displaying analysis results of one or more image codes in the analysis list, calling the analysis results of the corresponding image codes from the cache unit, and displaying the analysis results. The above scheme can improve the identification efficiency of the codes in batch image data, facilitate users to browse the analysis results of the desired codes in real time, and make the operation more convenient.

Description

Technical Field

[0001] This application relates to the field of computer network technology, and specifically to a method, medium, and device for scanning image recognition codes based on a browser. Background Technology

[0002] Image recognition codes have been applied in many everyday scenarios, such as supermarket payments, system logins, and app downloads. Figure 1 As shown, traditional QR code scanning typically requires the application to scan the code to obtain an image of the identification code, which is then uploaded to a server over the network. The server receives and parses the image of the identification code to obtain the code string data, and then returns the code string data to the application via network communication, thus completing the entire QR code scanning process. Because this scanning method relies on the application, and each application can only recognize different types of identification codes, when multiple different types of identification codes need to be recognized, users need to open multiple applications to operate, which is inconvenient. Furthermore, current QR code scanning requires a server connection and cannot be performed offline, failing to meet the needs of offline scanning.

[0003] Application publication number CN113918243A discloses a novel method for scanning QR codes. This method obtains camera data by calling the browser's getUserMedia interface, stores the acquired Media Stream object in a video, loads the Media Stream data using the Video tag, and uses a Canvas to capture frame image information. It obtains the image data of each frame loaded from the Video, indirectly acquiring ImageData data which is then passed to jsQR for parsing. Finally, it utilizes the drawing capabilities of the Canvas to frequently draw the captured Video onto the interface to simulate video playback. Simultaneously, it uses data returned by jsQR to locate the QR code's position and marks that position using the Canvas's drawing capabilities. This method overcomes the development limitations of WeChat H5 interfaces, allowing direct access to the H5 interface via a mobile browser. It eliminates the need for numerous permission requests for development, effectively solving the problem of H5 QR code scanning being reliant on underlying development or server-side components, reducing development difficulty, and improving productivity.

[0004] However, when the number of QR code images contained in multiple consecutive frames of a video stream is large, the existing technology mentioned above needs to read and parse the QR codes frame by frame, which is a serial processing method. This results in low processing efficiency and cannot meet the processing needs of batch QR code data. Summary of the Invention

[0005] In view of the above problems, this application provides a technical solution based on scanning image recognition codes on the browser side to solve the technical problems of low processing efficiency and inability to meet the requirements of rapid batch parsing of multiple QR codes in existing QR code recognition methods.

[0006] To achieve the above objectives, in a first aspect, this application provides a method for scanning image recognition codes on a browser-based platform, the method comprising:

[0007] Acquire multiple image data;

[0008] The multiple image data are stitched together into one or more stitched images according to the size of the browser display interface, and the stitched image is drawn onto the browser display interface.

[0009] The stitched image is preprocessed to mark potential image recognition code regions on the stitched image, and first identification information is added to the potential image recognition code regions;

[0010] The image recognition code parsing component is invoked to identify each potential image recognition code region on the stitched image. If the potential image recognition code region is determined to be an image recognition code, the image recognition code is parsed, and the parsing result and the first identification information corresponding to the image recognition code region are stored in the cache unit. If the potential image recognition code region is determined not to be an image recognition code, the first identification information of the potential image recognition code region is canceled.

[0011] An image recognition code parsing list is generated based on the data stored in the cache unit. An instruction to display the parsing result of one or more image recognition codes in the parsing list is received. The parsing result of the corresponding image recognition code is retrieved from the cache unit and displayed.

[0012] Furthermore, the number of stitched images is multiple, and the method includes:

[0013] All stitched images are preprocessed, and the total number of potential image recognition code regions marked in all stitched images is counted.

[0014] If the total number of potential image recognition code regions exceeds a preset number, then multiple potential image recognition code regions are assigned to multiple processing processes for processing. Each processing process is configured to call an image recognition code parsing component to recognize at least one potential image recognition code region assigned to it.

[0015] Furthermore, the number of processing processes is determined as follows:

[0016] Estimate the maximum hardware resources required to process all the potential image recognition code regions, including the maximum memory capacity and the maximum number of processor cores;

[0017] Obtain the hardware resources of the cluster, including the total memory capacity and the total number of processor cores configured in the current cluster.

[0018] Divide the total memory capacity by the maximum memory capacity to obtain a first value, and divide the total number of processor cores by the maximum number of processor cores to obtain a second value. Compare the first value and the second value, and take the smaller value as the number of processing processes to be split.

[0019] Furthermore, acquiring multiple image data includes:

[0020] Receive multiple image data uploaded by the user;

[0021] Alternatively, acquire video stream data, and read video frame images frame by frame according to the playback order of the video stream data to obtain multiple image data;

[0022] When the multiple image data are obtained by acquiring the video stream data, the method further includes:

[0023] Set an upper limit on the number of image data segments to be processed;

[0024] The system reads the upper limit number of video frame images from the video stream data, stitches the upper limit number of video frame images into the stitched image, and after the current stitched image is processed, reads the upper limit number of video frame images from the next time period from the video stream data, stitches the newly read upper limit number of video frame images into the stitched image, and performs preprocessing.

[0025] Furthermore, the preprocessing of the stitched image includes:

[0026] The stitched image is input into the trained neural network model to obtain the potential image recognition code region marked with the first identification information;

[0027] The neural network model is configured to determine the probability that the current location region is the potential image recognition code region based on the relevant parameters of each location region on the image, and to record the location region whose probability exceeds a preset probability value as the potential image recognition code region. The relevant parameters include any one or more of the following: region size, the proportion of black pixels in the region, and the ratio between black and white pixels.

[0028] Furthermore, the step of stitching the multiple image data into one or more stitched images according to the size of the browser display interface includes:

[0029] The image data is adaptively reduced or enlarged according to its resolution, and multiple reduced or enlarged image data are stitched together to obtain a stitched image, and the size of the stitched image is made to match the size of the browser display interface.

[0030] Furthermore, the method also includes:

[0031] Add second identification information to the image data having the image recognition code and add third identification information to the stitched image;

[0032] When displaying the shortcut icon and its first identification information corresponding to each image identification code in the image identification code parsing list, the corresponding second identification information and third identification information are also displayed.

[0033] Furthermore, the parsing list includes a result display button for each image recognition code;

[0034] The step of receiving the instruction to display the parsing result of one or more image recognition codes in the parsing list, and retrieving and displaying the parsing result of the corresponding image recognition code from the cache unit, includes:

[0035] The system receives a confirmation instruction for the result display button for one or more image recognition codes in the parsing list, retrieves the parsing result of the corresponding image recognition code from the cache unit and displays it. The confirmation instruction is triggered by any one of the following: user click, touch, double-click, or biometric authentication.

[0036] In a second aspect, this application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for scanning image recognition codes based on a browser as described in the first aspect of this application.

[0037] In a third aspect, this application provides an electronic device having a computer program stored thereon, including a processor and a storage medium, wherein the computer program is stored on the storage medium, and when executed by the processor, the computer program implements the method for scanning image recognition codes based on a browser as described in the first aspect of this application.

[0038] Unlike existing technologies, the above-described method, medium, and device for scanning image recognition codes on a browser-side platform involves stitching together multiple image data to obtain a stitched image. This stitched image is then preprocessed to mark potential image recognition code regions. An image recognition code parsing component is then invoked to identify each potential region, yielding the parsing results for the image recognition codes on each stitched image. These results are stored in a cache unit and a parsing list is displayed. When a command to display the parsing results for one or more image recognition codes in the parsing list is received, the corresponding parsing results are retrieved from the cache unit and displayed. This solution improves the efficiency of recognizing codes from batches of image data, allows users to view the parsing results of desired codes in real time, and makes user operation more convenient.

[0039] The above description of the invention is merely an overview of the technical solution of this application. In order to enable those skilled in the art to better understand the technical solution of this application and to implement it based on the description and drawings, and to make the above-mentioned objectives and other objectives, features and advantages of this application easier to understand, the following description is provided in conjunction with the specific embodiments and drawings of this application. Attached Figure Description

[0040] The accompanying drawings are only used to illustrate the principles, implementation methods, applications, features, and effects of specific embodiments of the present invention and other related contents, and should not be considered as limitations on this application.

[0041] In the accompanying drawings of the instruction manual:

[0042] Figure 1 This is a schematic diagram of the process of scanning image recognition codes in the existing technology;

[0043] Figure 2 This is a flowchart of the method for scanning image recognition codes based on a browser, as described in the first exemplary embodiment of this application;

[0044] Figure 3 This is a flowchart of the method for scanning image recognition codes based on a browser, as described in the second exemplary embodiment of this application;

[0045] Figure 4 A flowchart illustrating a method for determining the number of processing processes according to a first exemplary embodiment of this application;

[0046] Figure 5 This is a flowchart of the method for scanning image recognition codes based on a browser, as described in the third exemplary embodiment of this application;

[0047] Figure 6 A schematic diagram of the electronic device described in the first exemplary embodiment of this application;

[0048] The reference numerals used in the above figures are explained as follows:

[0049] 10. Electronic devices;

[0050] 101. Processor;

[0051] 102. Storage medium. Detailed Implementation

[0052] To illustrate the possible application scenarios, technical principles, implementable specific solutions, and achievable objectives and effects of this application in detail, the following description, in conjunction with the listed specific embodiments and accompanying drawings, provides a detailed explanation. The embodiments described herein are merely illustrative of the technical solutions of this application and are therefore intended to limit the scope of protection of this application.

[0053] In this document, the term "embodiment" means that a specific feature, structure, or characteristic described in connection with an embodiment may be included in at least one embodiment of this application. The term "embodiment" appearing in various places throughout the specification does not necessarily refer to the same embodiment, nor does it specifically limit its independence or connection with other embodiments. In principle, in this application, as long as there are no technical contradictions or conflicts, the technical features mentioned in each embodiment can be combined in any way to form corresponding implementable technical solutions.

[0054] Unless otherwise defined, the technical terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains; the use of related terms herein is merely for the purpose of describing particular embodiments and is not intended to limit this application.

[0055] In the description of this application, the term "and / or" is used to describe the logical relationship between objects, indicating that three relationships can exist. For example, A and / or B means: A exists, B exists, and A and B exist simultaneously. Additionally, the character " / " in this document generally indicates that the preceding and following objects have an "or" logical relationship.

[0056] In this application, terms such as “first” and “second” are used only to distinguish one entity or operation from another, and do not necessarily require or imply any actual quantity, hierarchy or order relationship between these entities or operations.

[0057] Without further limitations, the use of terms such as “comprising,” “including,” “having,” or other similar open-ended expressions in this application is intended to cover non-exclusive inclusion, which does not exclude the presence of additional elements in a process, method, or product that includes the stated elements, such that a process, method, or product that includes a list of elements may include not only those defined elements but also other elements not expressly listed, or elements inherent to such a process, method, or product.

[0058] Similar to the understanding in the Examination Guidelines, in this application, expressions such as "greater than," "less than," and "exceeding" are understood to exclude the stated number; expressions such as "above," "below," and "within" are understood to include the stated number. Furthermore, in the description of the embodiments in this application, "multiple" means two or more (including two), and similar expressions related to "multiple" are also understood in this way, such as "multiple groups" and "multiple times," unless otherwise explicitly specified.

[0059] In the description of the embodiments of this application, the space-related expressions used, such as "center," "longitudinal," "lateral," "length," "width," "thickness," "upper," "lower," "front," "rear," "left," "right," "vertical," "horizontal," "vertical," "top," "bottom," "inner," "outer," "clockwise," "counterclockwise," "axial," "radial," and "circumferential," indicate the orientation or positional relationship based on the orientation or positional relationship shown in the specific embodiments or drawings. They are only for the purpose of describing the specific embodiments of this application or for the reader's understanding, and do not indicate or imply that the device or component referred to must have a specific position, a specific orientation, or be constructed or operated in a specific orientation. Therefore, they should not be construed as limitations on the embodiments of this application.

[0060] Unless otherwise expressly specified or limited, the terms "installation," "connection," "linking," "fixing," and "setting," as used in the description of the embodiments of this application, should be interpreted broadly. For example, "connection" can be a fixed connection, a detachable connection, or an integral setting; it can be a mechanical connection, an electrical connection, or a communication connection; it can be a direct connection or an indirect connection through an intermediate medium; it can be the internal connection of two components or the interaction between two components. For those skilled in the art to which this application pertains, the specific meaning of the above terms in the embodiments of this application can be understood according to the specific circumstances.

[0061] like Figure 2 As shown, in a first aspect, this application provides a method for scanning image recognition codes based on a browser, the method comprising:

[0062] First, proceed to step S201 to acquire multiple image data;

[0063] Then, in step S202, the multiple image data are stitched together into one or more stitched images according to the size of the browser display interface, and the stitched image is drawn onto the browser display interface.

[0064] Then, in step S203, the stitched image is preprocessed to mark the potential image recognition code region on the stitched image and add first identification information to the potential image recognition code region.

[0065] Then, step S204 can be entered to call the image recognition code parsing component to identify each potential image recognition code region on the stitched image;

[0066] After step S204, you can proceed to step S205. If the potential image recognition code region is determined to be an image recognition code, the image recognition code is parsed, and the parsing result and the first identification information corresponding to the image recognition code region are stored in the cache unit.

[0067] After step S205, step S207 can be entered to generate an image recognition code parsing list based on the data stored in the cache unit, receive a command to display the parsing result of one or more image recognition codes in the parsing list, retrieve the parsing result of the corresponding image recognition code from the cache unit and display it.

[0068] After step S204, you can proceed to step S206. If it is determined that the potential image recognition code region is not an image recognition code, then cancel the first identification information of the potential image recognition code region.

[0069] In step S201, the image data can be obtained by the user manually uploading it or by extracting frame images from the video stream data.

[0070] In step S202, the size of the browser-side display interface can be determined based on the screen size of the electronic device that opens the browser. For example, if a mobile electronic device has a resolution of 1080P, it means that the maximum image size it can display is 1920×1080 pixels. Therefore, the size of the stitched image can be set to 1920×1080 pixels. If there is a large amount of image data, stitching it into a single image would result in each original image data in the stitched image becoming very small, making it difficult for the user to observe. Therefore, in such cases, multiple stitched images can be generated. Each stitched image contains at most a certain number of image data; if this number is exceeded, the excess image data is stitched into another stitched image.

[0071] In this embodiment, the stitched image can be drawn onto the browser's display interface in the following way: the stitched image is drawn onto the canvas using the drawImage() method in the browser. drawImage() is an HTML5 Canvas method for drawing images or canvas elements. It can draw images or other canvas elements on the canvas and allows them to be scaled, cropped, and positioned.

[0072] In step S203, marking the potential image recognition code region on the stitched image can be achieved by circling the potential image recognition code region with a marker box. The shape of the marker box can be a rectangle, circle, ellipse, or other regular or irregular shape. The first identification information can be numbers, letters, or strings. The first identification information can identify the potential image recognition code region, making it easier to distinguish different potential image recognition code regions.

[0073] In step S204, taking a QR code as an example, the image recognition code parsing component can be jsQR. jsQR is an open-source library for decoding QR codes in JavaScript. It is based on the HTML5 Canvas element and JavaScript, and can decode QR codes from video streams or image files into text information. In other embodiments, the image recognition code can also be a barcode, 3D code, pinhole code, etc. Adaptively, the image recognition code parsing component can be configured to recognize these image recognition codes.

[0074] In step S205, by invoking the image recognition code parsing component, the potential image recognition code regions can be further filtered to determine the regions containing image recognition codes and eliminate the regions that do not contain image recognition codes. Since this recognition process targets the potential image recognition code regions that have undergone preliminary filtering, it is faster than methods that require recognizing the entire image to determine the image recognition code regions on the image.

[0075] In this embodiment, the caching unit may be a disk cache, a memory cache, a CDN cache, etc.

[0076] In step S206, when it is determined that one or more of the potential image recognition code regions are not image recognition codes, the first identification information of the potential image recognition code region is cancelled. Cancelling the first identification information of the potential image recognition code region means deleting the original markings (such as marking boxes, marking symbols, etc.) for that potential image recognition code region.

[0077] In step S207, the parsing list stores shortcut operation components for each image recognition code. By interacting with these shortcut operation components, the parsing results of each image recognition code can be quickly displayed since they have been stored in the cache unit, thus improving response efficiency. Furthermore, since the parsing list can display image recognition codes from multiple stitched images, and each stitched image can contain multiple image recognition codes, users can freely view the parsing results of any image recognition code they want from the parsing list, making it intuitive and efficient.

[0078] In some embodiments, the number of stitched images is multiple, such as... Figure 3 As shown, the method includes:

[0079] First, proceed to step S301 to preprocess all stitched images and count the total number of potential image recognition code regions marked in all stitched images;

[0080] Then, in step S302, if the total number of potential image recognition code regions exceeds a preset number, the multiple potential image recognition code regions are assigned to multiple processing processes for processing.

[0081] In step S302, assigning multiple potential image recognition code regions to multiple processing processes specifically means that each processing process calls one of the image recognition code parsing components to recognize at least one potential image recognition code region assigned to it, so as to cancel the marking of non-image recognition code regions or store the parsing result of the recognized image recognition code in the cache unit. The preset number can be set according to actual needs.

[0082] With this approach, when the total number of potential image recognition code regions exceeds a preset number, multiple processing processes can be invoked in parallel to identify and parse these potential image recognition code regions, effectively improving data processing efficiency.

[0083] In some embodiments, such as Figure 4 As shown, the number of processing processes is determined in the following way:

[0084] First, step S401 is performed to estimate the maximum hardware resources required to process all the potential image recognition code regions, including the maximum memory capacity and the maximum number of processor cores.

[0085] Then proceed to step S402 to obtain the hardware resources of the cluster, which include the total memory capacity and the total number of processor cores configured in the current cluster.

[0086] Then, in step S403, the total memory capacity is divided by the maximum memory capacity to obtain a first value, and the total number of processor cores is divided by the maximum number of processor cores to obtain a second value. The first value and the second value are compared, and the smaller value is rounded down to be the number of processing processes split off.

[0087] By using the above method, the utilization rate of hardware resources can be maximized. The available cluster hardware resources can be called up to identify the potential image recognition code regions, and the identified image recognition code regions can be parsed, thereby improving the processing efficiency of the potential image recognition code regions.

[0088] In some embodiments, acquiring multiple image data includes receiving multiple image data uploaded by a user. For example, a user can select multiple images to be parsed from a terminal device and upload them to a browser. After receiving the uploaded images, the browser will process them according to... Figure 2 The method shown processes the uploaded image to meet the requirement of not relying on the application to parse the image recognition code.

[0089] In other embodiments, acquiring multiple image data includes: acquiring video stream data, reading video frame images frame by frame according to the playback order of the video stream data, and obtaining multiple image data. The method further includes: setting an upper limit value for the number of image data segments to be processed; reading the upper limit value number of video frame images from the video stream data, stitching the upper limit value number of video frame images into the stitched image; and after the current stitched image is processed, reading the upper limit value number of video frame images from the next time period from the video stream data, stitching the newly read upper limit value number of video frame images into the stitched image, and performing preprocessing.

[0090] In short, users can also upload a video stream and retrieve 20 frames at a time, according to the video playback sequence, for example, based on... Figure 2The method described above processes the data, and after processing the current 20 frames, it automatically switches to processing the next set of 20 frames. Alternatively, users can acquire video stream data through real-time shooting. Compared to the existing method of copying video stream images frame by frame onto a canvas for recognition, the method in this application enables batch processing of video stream images, improving parsing efficiency.

[0091] In some embodiments, the preprocessing of the stitched image includes:

[0092] The stitched image is input into the trained neural network model to obtain the potential image recognition code region marked with the first identification information;

[0093] The neural network model is configured to determine the probability that the current location region is the potential image recognition code region based on the relevant parameters of each location region on the image, and to record the location region whose probability exceeds a preset probability value as the potential image recognition code region. The relevant parameters include any one or more of the following: region size, the proportion of black pixels in the region, and the ratio between black and white pixels.

[0094] In short, by introducing a neural network model to determine potential image recognition code regions in image data, the recognition efficiency of potential image recognition code regions can be effectively improved.

[0095] In some embodiments, stitching the multiple image data into one or more stitched images according to the size of the browser display interface includes: adaptively reducing or enlarging the size of the image data according to the resolution of the image data, and stitching the reduced or enlarged multiple image data to obtain a stitched image, such that the size of the stitched image conforms to the size of the browser display interface.

[0096] For example, some images have a low resolution. If they are enlarged, the image identification code contained in the image may become blurry, which is not conducive to the subsequent image identification code parsing component. Therefore, the image data will maintain its original size or be scaled. Of course, when scaling the image, the QR code on the scaled image must be kept in a size that is suitable for human eye observation so that it can be easily identified by users.

[0097] Specifically, the browser-side display interface can first be divided into fixed-size image placement blocks (assuming that the size of each image before scaling is the same as the size of the image placement block). Then, based on the image resolution, it is decided whether to enlarge the current image data to occupy the size of multiple image placement blocks, or to shrink it to a size smaller than a single image placement block, such as shrinking it to 1 / 2 or 1 / 3 of the size of a single image placement block. This method ensures that each original image data in the stitched image is clearly visible and also makes the arrangement of multiple image data more reasonable, facilitating user observation and subsequent processing.

[0098] In some embodiments, the method further includes: adding second identification information to the image data having the image recognition code and adding third identification information to the stitched image; and displaying the corresponding second and third identification information when displaying the shortcut icon and its first identification information corresponding to each image recognition code in the image recognition code parsing list.

[0099] Preferably, the first identification information, the second identification information, and the third identification information corresponding to the same image identification code in the image identification code parsing list are of different types. For example, the first identification information uses numbers, the second identification information uses letters, and the third identification information uses strings, so as to facilitate user differentiation.

[0100] Using the above method, users can clearly know the source of each image identification code in the parsing list, that is, which spliced ​​image or which original image data it belongs to, which facilitates subsequent tracing and tracking.

[0101] In some embodiments, the parsing list is configured with a result display button for each of the image recognition codes; receiving the instruction to display the parsing result for one or more image recognition codes in the parsing list, and retrieving and displaying the parsing result of the corresponding image recognition code from the cache unit includes: receiving a confirmation instruction for the result display button for one or more image recognition codes in the parsing list, retrieving and displaying the parsing result of the corresponding image recognition code from the cache unit, wherein the confirmation instruction is triggered based on any one of user click, touch, double-click, or biometric authentication.

[0102] In this way, users can interact with the result display button in the parsing list to view the parsing results of one or more image recognition codes at any time. Since the parsing list displays the parsing results of multiple image recognition codes on multiple image data, and these parsing results are stored in the cache unit and can be retrieved at any time, compared to the method that requires users to click to confirm each image recognition code before parsing begins, this method effectively improves processing efficiency when there are a large number of image recognition codes.

[0103] like Figure 5 As shown, in some embodiments, this application also provides the following method for implementing browser-based QR code parsing and recognition, as follows:

[0104] First, Method 1: After entering the application, the user selects to obtain a QR code by scanning a QR code, and then the following process will be executed:

[0105] 1. The application determines the operating system environment. On the computer, the camera is opened directly. On the mobile device, the front and rear cameras can be used, and the rear camera is used by default.

[0106] 2. After the user selects to scan the QR code and authorizes camera access, the application internally checks if the browser supports the `mediaDevices` method. Otherwise, it performs compatibility checks: it sequentially checks if the browser supports the relevant APIs `navigator.getUserMedia`, `navigator.webkitGetUserMedia`, `navigator.mozGetUserMedia`, and `navigator.msGetUserMedia`. If supported, it sets the relevant WebRTC parameters. If none of these are supported, it prompts that scanning is not supported, ends the scanning process, and only provides the option to select an image to recognize the QR code (see Method 2). If the user refuses authorization, the scanning process ends, and the reason is displayed.

[0107] 3. After the user activates the front / rear camera, the WebRTC interface is first called to initialize and capture the video stream, which is then bound to a `video` tag for playback. During the user's QR code scanning process, once sufficient data has been loaded, the video stream is drawn onto the canvas using the `drawImage()` method. The canvas uses the `getImageData()` method to obtain pixel data, which is then passed to the jsQR QR code parsing library. If jsQR does not return QR code data, the scan is periodically re-attempted. If QR code data is returned, it indicates that the QR code has been recognized. A rectangle will be drawn around the edge of the QR code on the canvas, and a success callback will be executed, returning the code string data and ending the scanning process.

[0108] Secondly, users can also use method two to scan and recognize the QR code. The difference between method two and method one is that method two involves selecting the image by opening the photo album (file manager). The specific method is as follows:

[0109] The image file is retrieved using the `input:file` tag. An `image` object is created using the `new Image()` constructor. The selected file data is read using `new FileReader()`, and the result is bound to the `image` object. Finally, the video stream is drawn onto the canvas using the `drawImage()` method of the `image` object. The pixel data is retrieved using the `getImageData()` method on the canvas and passed to the jsQR QR code parsing library. If jsQR does not return QR code data, the scanning process ends. If QR code data is returned, it means that the QR code has been recognized. A rectangle will be drawn around the edge of the QR code on the canvas, and a success callback will be executed, returning the code string data and ending the scanning process.

[0110] In a second aspect, the present invention also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for scanning image recognition codes based on a browser as described in the first aspect of the present invention.

[0111] The computer-readable storage medium may be volatile memory or non-volatile memory, or may include both volatile and non-volatile memory.

[0112] The non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a magnetic random access memory (FRAM), a flash memory, a magnetic surface memory, an optical disc, or a compact disc read-only memory (CD ROM); the magnetic surface memory may be a disk storage device or a magnetic tape storage device.

[0113] The volatile memory may be random access memory (RAM), which serves as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), synchronous static random access memory (SSRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synclink dynamic random access memory (SLDRAM), and direct memory bus random access memory (DRRAM). The computer-readable storage media described in the embodiments of the present invention are intended to include these and any other suitable types of memory.

[0114] like Figure 6 As shown, in a third aspect, the present invention provides an electronic device 10, including a processor 101 and a storage medium 102, wherein a computer program is stored on the storage medium, and the computer program, when executed by the processor, implements the method for scanning image recognition codes based on a browser as described in the first aspect of the present invention.

[0115] In some embodiments, the processor may be implemented by software, hardware, firmware, or a combination thereof, and may use at least one of the following: circuit, single or multiple application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), central processing units (CPUs), controllers, microcontrollers, and microprocessors, thereby enabling the processor to execute some or all of the steps or any combination thereof in the browser-based image recognition code scanning method described in the various embodiments of this application.

[0116] Finally, it should be noted that although the above embodiments have been described in the text and drawings of this application, this should not limit the scope of patent protection of this application. Any technical solutions that are based on the essential concept of this application and utilize the content described in the text and drawings of this application, resulting in equivalent structural or procedural substitutions or modifications, as well as the direct or indirect application of the technical solutions of the above embodiments to other related technical fields, are all included within the scope of patent protection of this application.

Claims

1. A method for scanning image recognition codes based on a browser, characterized in that, The method includes: Acquire multiple image data; The multiple image data are stitched together into one or more stitched images according to the size of the browser's display interface, and the stitched image is drawn onto the browser's display interface. The stitched image is preprocessed to mark potential image recognition code regions on the stitched image, and first identification information is added to the potential image recognition code regions; wherein, the preprocessing of the stitched image includes: inputting the stitched image into a trained neural network model to obtain the potential image recognition code regions marked with the first identification information; the neural network model is configured to determine the probability that the current position region is the potential image recognition code region based on the relevant parameters of each position region on the image, and to record the position region with a probability exceeding a preset probability value as the potential image recognition code region, wherein the relevant parameters include any one or more of the following: region size, the proportion of black pixels in the region, and the ratio between black and white pixels; The image recognition code parsing component is invoked to identify each potential image recognition code region on the stitched image. If the potential image recognition code region is determined to be an image recognition code, the image recognition code is parsed, and the parsing result and the first identification information corresponding to the image recognition code region are stored in the cache unit. If the potential image recognition code region is determined not to be an image recognition code, the first identification information of the potential image recognition code region is canceled. An image recognition code parsing list is generated based on the data stored in the cache unit. An instruction to display the parsing result of one or more image recognition codes in the parsing list is received. The parsing result of the corresponding image recognition code is retrieved from the cache unit and displayed. The number of stitched images is multiple, and the method includes: All stitched images are preprocessed, and the total number of potential image recognition code regions marked in all stitched images is counted. If the total number of potential image recognition code regions exceeds a preset number, then multiple potential image recognition code regions are assigned to multiple processing processes for processing. Each processing process is configured to call an image recognition code parsing component to recognize at least one potential image recognition code region assigned to it. The step of stitching the multiple image data into one or more stitched images according to the size of the browser's display interface includes: The image data is adaptively reduced or enlarged according to its resolution, and multiple reduced or enlarged image data are stitched together to obtain a stitched image, and the size of the stitched image is made to fit the size of the display interface on the browser.

2. The method for scanning image recognition codes based on a browser as described in claim 1, characterized in that, The number of processing processes is determined in the following manner: Estimate the maximum hardware resources required to process all the potential image recognition code regions, including the maximum memory capacity and the maximum number of processor cores; Obtain the hardware resources of the cluster, including the total memory capacity and the total number of processor cores configured in the current cluster. Divide the total memory capacity by the maximum memory capacity to obtain a first value, and divide the total number of processor cores by the maximum number of processor cores to obtain a second value. Compare the first value and the second value, and take the smaller value as the number of processing processes to be split.

3. The method for scanning image recognition codes based on a browser as described in claim 1, characterized in that, The acquisition of multiple image data includes: Receive multiple image data uploaded by the user; Alternatively, acquire video stream data, and read video frame images frame by frame according to the playback order of the video stream data to obtain multiple image data; When the multiple image data are obtained by acquiring the video stream data, the method further includes: Set an upper limit on the number of image data segments to be processed; The system reads the upper limit number of video frame images from the video stream data, stitches the read upper limit number of video frame images into the stitched image; and after the current stitched image is processed, it reads the upper limit number of video frame images from the next time period from the video stream data, stitches the newly read upper limit number of video frame images into the stitched image, and performs preprocessing.

4. The method for scanning image recognition codes based on a browser as described in claim 1, characterized in that, The method further includes: Add second identification information to the image data having the image recognition code and add third identification information to the stitched image; When displaying the shortcut icon and its first identification information corresponding to each image identification code in the image identification code parsing list, the corresponding second identification information and third identification information are also displayed.

5. The method for scanning image recognition codes based on a browser as described in claim 1, characterized in that, Each image recognition code in the parsing list is configured with a result display button; The step of receiving the instruction to display the parsing result of one or more image recognition codes in the parsing list, and retrieving and displaying the parsing result of the corresponding image recognition code from the cache unit, includes: The system receives a confirmation instruction for the result display button for one or more image recognition codes in the parsing list, retrieves the parsing result of the corresponding image recognition code from the cache unit and displays it. The confirmation instruction is triggered based on any one of the following: user click, touch, double-click, or biometric authentication.

6. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method for scanning image recognition codes based on the browser as described in any one of claims 1 to 5.

7. An electronic device having a computer program stored thereon, characterized in that, The device includes a processor and a storage medium, wherein a computer program is stored on the storage medium, and when executed by the processor, the computer program implements the method for scanning image recognition codes based on a browser as described in any one of claims 1 to 5.

Images