Image detection method, terminal device and computer program product
Through automated image detection methods, the problem that smart device application interface detection relies on manual reliance on humans is solved, efficient and accurate interface detection is achieved, and labor costs are reduced.
Patent Information
- Application Number
- CN202411918364.8
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-24
- Publication Date
- 2025-04-18
AI Technical Summary
In the prior art, interface detection of smart device applications relies on manual proofreading, resulting in high cost, low efficiency and low accuracy.
It provides an image detection method, which can obtain application interface images and design draft images, perform alignment processing, extract image feature information, calculate differences detection results, and automatically mark and analyze differences.
No manual intervention is required, which reduces labor costs, improves detection efficiency and accuracy, and ensures that the element position and size are consistent during detection.
Smart Images

Figure CN119851019A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of computer technology, and in particular, relates to an image detection method, a terminal device, and a computer program product. Background Art
[0002] In actual applications, there is a common problem in the development process of smart device applications, that is, the development cannot fully realize the design effect, resulting in a large discrepancy between the initial visual design draft and the later implemented application interface. Therefore, when drawing the application interface, it is necessary to test the application interface in combination with the UI design draft.
[0003] However, the existing technology is usually manual detection, which requires designers or developers to manually proofread and mark the design draft and application interface. It can be seen that the existing technology has the problems of high labor cost and low detection efficiency and detection accuracy. Summary of the invention
[0004] The embodiments of the present application provide an image detection method, a terminal device, and a computer program product to solve the problems of high labor costs, low detection efficiency, and low detection accuracy in the prior art.
[0005] In a first aspect, an embodiment of the present application provides an image detection method, comprising:
[0006] Acquire an application interface image and a design draft image corresponding to the application interface image;
[0007] Performing alignment processing on the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image;
[0008] Performing image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each element to be detected corresponding to the target interface image;
[0009] Based on the characteristic information of each reference element and the characteristic information of each element to be detected, a difference detection result is obtained.
[0010] Optionally, the aligning the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image includes:
[0011] Performing feature point detection on the application interface image and the design draft image respectively to obtain a first feature point set corresponding to the application interface image and a second feature point set corresponding to the design draft image;
[0012] Performing feature point matching processing on the first feature point set and the second feature point set to obtain matched target feature points;
[0013] Based on the coordinate information of the target feature points, an affine transformation matrix is calculated;
[0014] Each pixel in the application interface image is adjusted based on the affine transformation matrix to obtain the target interface image.
[0015] Optionally, performing image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each to-be-detected element corresponding to the target interface image includes:
[0016] Performing image preprocessing on the design draft image and the target interface image respectively to obtain a first image corresponding to the design draft image and a second image corresponding to the target interface image;
[0017] Performing edge detection on the first image and the second image respectively to determine each first boundary region included in the first image and each second boundary region included in the second image;
[0018] Shape detection is performed on each of the first boundary regions and each of the second boundary regions to obtain feature information of each reference element and feature information of each element to be detected.
[0019] Optionally, after performing edge detection on the first image and the second image respectively to determine each first boundary region included in the first image and each second boundary region included in the second image, the method further includes:
[0020] Performing morphological processing on the first image and the second image respectively to obtain first target areas corresponding to the first boundary areas and second target areas corresponding to the second boundary areas;
[0021] Accordingly, the performing shape detection on each of the first boundary regions and each of the second boundary regions to obtain the feature information of each reference element and the feature information of each element to be detected includes:
[0022] Shape detection is performed on each of the first target areas and each of the second target areas respectively to obtain feature information of each reference element and feature information of each element to be detected.
[0023] Optionally, the performing shape detection on each of the first boundary regions and each of the second boundary regions to obtain feature information of each reference element and feature information of each element to be detected includes:
[0024] Performing contour extraction on the first image and the second image based on the first boundary regions and the second boundary regions respectively, to obtain first contours corresponding to the first image and second contours corresponding to the second image;
[0025] Calculating and obtaining first geometric features of each of the first contours and second geometric features of each of the second contours;
[0026] Performing a hierarchical analysis on each of the first geometric features and each of the second geometric features based on a hierarchical analysis method to obtain first association information between each of the first geometric features and second association information between each of the second geometric features;
[0027] Based on each of the first geometric features, each of the second geometric features, each of the first association information, and each of the second association information, each of the reference element feature information and each of the to-be-detected element feature information are generated.
[0028] Optionally, obtaining a difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected includes:
[0029] Calculating similarities between the reference element feature information and the to-be-detected element feature information to obtain multiple groups of element detection pairs; each group of element detection pairs includes a to-be-detected element feature information and corresponding reference element feature information;
[0030] Difference detection is performed on the multiple groups of element detection pairs in different detection dimensions respectively to obtain difference detection results of the multiple groups of element detection pairs respectively; the difference detection results of each group of element detection pairs include difference detection sub-results in the different detection dimensions.
[0031] Optionally, the difference detection result includes difference content; after obtaining the difference detection result based on the feature information of each reference element and the feature information of each element to be detected, the method further includes:
[0032] determining a difference type based on the difference content;
[0033] Determining a marking method according to the difference type;
[0034] Marking the application interface image according to the marking method and the difference content to obtain a marked image;
[0035] The marked image is visually displayed.
[0036] Optionally, the difference detection result includes difference content; before obtaining the difference detection result based on the feature information of each reference element and the feature information of each element to be detected, the method further includes:
[0037] Record the alignment process and image processing process;
[0038] After obtaining the difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected, the method further includes:
[0039] Based on the difference content, determining the number and type of differences between the design draft image and the application interface image;
[0040] generating a difference analysis chart based on the difference quantity and the difference type;
[0041] Based on the difference content and the difference type, generating a difference list;
[0042] Generating adjustment prompt information corresponding to the difference list;
[0043] A difference report is generated based on the alignment process, the image processing process, the difference analysis chart, the difference list and the adjustment prompt information.
[0044] In a second aspect, an embodiment of the present application provides an image detection device, including:
[0045] An acquisition unit, used to acquire an application interface image and a design draft image corresponding to the application interface image;
[0046] An alignment unit, configured to perform alignment processing on the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image;
[0047] A first processing unit is used to perform image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each to-be-detected element corresponding to the target interface image;
[0048] The first result determination unit is used to obtain a difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected.
[0049] In a third aspect, an embodiment of the present application provides a terminal device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, an image detection method as described in any one of the first aspects above is implemented.
[0050] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the image detection method as described in any one of the first aspects above is implemented.
[0051] In a fifth aspect, an embodiment of the present application provides a computer program product. When the computer program product runs on a terminal device, the terminal device can execute the image detection method described in any one of the first aspects above.
[0052] Compared with the prior art, the embodiments of the present invention have the following beneficial effects:
[0053] An image detection method provided by an embodiment of the present application comprises the following steps: obtaining an application interface image and a design draft image corresponding to the application interface image; aligning the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image; performing image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each element to be detected corresponding to the target interface image; obtaining a difference detection result based on the feature information of each reference element and the feature information of each element to be detected. Compared with the prior art, the present application does not require manual intervention, reduces labor costs, and improves detection efficiency. At the same time, the present application aligns the design draft with the UI interface, and can determine that all subsequent comparisons are based on the image alignment, that is, to ensure that the positions and sizes of the elements in the two images are the same when the subsequent comparisons are made, thereby improving detection accuracy. BRIEF DESCRIPTION OF THE DRAWINGS
[0054] In order to more clearly illustrate the technical solutions in the embodiments of the present application, 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 any creative work.
[0055] Figure 1 is a flowchart of an implementation of an image detection method provided in an embodiment of the present application;
[0056] Figure 2 It is a schematic diagram of alignment of an application interface image and a design draft image provided by an embodiment of the present application;
[0057] Figure 3 is a schematic diagram of alignment of an application interface image and a design draft image provided by another embodiment of the present application;
[0058] Figure 4 is a flowchart of an implementation of an image detection method provided by another embodiment of the present application;
[0059] Figure 5 is a flowchart of an implementation of an image detection method provided in yet another embodiment of the present application;
[0060] Figure 6 is a flowchart of an implementation of an image detection method provided by another embodiment of the present application;
[0061] Figure 7 is a structural schematic diagram of an image detection device provided by an embodiment of the present application;
[0062] Figure 8 It is a structural diagram of a terminal device provided in one embodiment of the present application. DETAILED DESCRIPTION
[0063] In the following description, specific details such as specific system structures, technologies, etc. are provided for the purpose of illustration rather than limitation, so as to provide a thorough understanding of the embodiments of the present application. However, it should be clear to those skilled in the art that the present application may also be implemented in other embodiments without these specific details. In other cases, detailed descriptions of well-known systems, devices, circuits, and methods are omitted to prevent unnecessary details from obstructing the description of the present application.
[0064] It should be understood that when used in the present specification and the appended claims, the term "comprising" indicates the presence of described features, wholes, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components and / or combinations thereof.
[0065] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.
[0066] As used in the specification and appended claims of this application, the term "if" can be interpreted as "when" or "uponce" or "in response to determining" or "in response to detecting", depending on the context. Similarly, the phrase "if it is determined" or "if [described condition or event] is detected" can be interpreted as meaning "uponce it is determined" or "in response to determining" or "uponce [described condition or event] is detected" or "in response to detecting [described condition or event]", depending on the context.
[0067] In addition, in the description of the present application specification and the appended claims, the terms "first", "second", "third", etc. are only used to distinguish the descriptions and cannot be understood as indicating or implying relative importance.
[0068] References to "one embodiment" or "some embodiments" etc. described in the specification of this application mean that one or more embodiments of the present application include specific features, structures or characteristics described in conjunction with the embodiment. Therefore, the statements "in one embodiment", "in some embodiments", "in some other embodiments", "in some other embodiments", etc. that appear in different places in this specification do not necessarily refer to the same embodiment, but mean "one or more but not all embodiments", unless otherwise specifically emphasized in other ways. The terms "including", "comprising", "having" and their variations all mean "including but not limited to", unless otherwise specifically emphasized in other ways.
[0069] In actual applications, there is a common problem in the development process of smart device applications, that is, the development cannot fully realize the design effect, resulting in a large discrepancy between the initial visual design draft and the later implemented application interface. Therefore, when drawing the application interface, it is necessary to test the application interface in combination with the UI design draft.
[0070] However, the existing technology is usually manual detection, which requires designers or developers to manually proofread and annotate the design draft and application interface, resulting in the following problems:
[0071] 1. Due to the error in taking screenshots of the APP interface, the screenshot size and position are often inconsistent with the UI design draft;
[0072] 2. Manual comparison is time-consuming and laborious, and it is easy to miss subtle differences, which is inefficient and prone to errors;
[0073] 3. It is impossible to quickly locate and quantify the degree of deviation of interface elements, especially it is difficult to efficiently identify problems during the design iteration process.
[0074] Based on this, the present application proposes an image detection method that does not require human intervention and can improve detection efficiency and detection accuracy.
[0075] See also Figure 1 , Figure 1 This is a flowchart of an implementation of an image detection method provided in an embodiment of the present application. In the embodiment of the present application, the execution subject of the image detection method is a terminal device. The terminal device includes but is not limited to: a notebook, a desktop computer, and a computer.
[0076] like Figure 1 As shown, the image detection method provided in one embodiment of the present application may include S101 to S104, which are described in detail as follows:
[0077] In S101, an application interface image and a design draft image corresponding to the application interface image are obtained.
[0078] In actual applications, when the user needs to detect whether the interface effect has been restored according to the design draft, an image detection request can be sent to the terminal device.
[0079] In an embodiment of the present application, the terminal device detecting an image detection request sent by a user may include: detecting a preset operation. The preset operation can be set according to actual needs and is not limited here. Exemplarily, the preset operation can be clicking a preset control on the terminal device, or clicking a preset APP on the terminal device. Based on this, when the terminal device detects that its preset control is clicked, or its preset APP is clicked, it can determine that the preset operation is detected, that is, the above-mentioned image detection request is detected.
[0080] After detecting the above-mentioned image detection request, the terminal device can obtain the application interface image and the design draft image corresponding to the application interface image in real time.
[0081] In one implementation of the embodiment of the present application, the terminal device can obtain the above-mentioned application interface image through a screenshot operation in real time.
[0082] In another implementation of the embodiment of the present application, since the terminal device pre-stores the design draft image corresponding to the application interface, the terminal device can obtain the design draft image corresponding to the above-mentioned application interface image from its own memory.
[0083] In S102, the application interface image is aligned based on the design draft image to obtain a target interface image aligned with the design draft image.
[0084] In the embodiment of the present application, since the screenshot operation is different when the application interface is screenshotted, the overall image size and the overall image shape obtained by the screenshot will change, which will cause deformation of each element in the image, resulting in the application interface image obtained by the screenshot being not exactly the same as the design draft image. Therefore, in order to improve the accuracy of subsequent image comparisons and to improve the detection accuracy, the terminal device can align the application interface image based on the design draft image to obtain a target interface image that is aligned with the design draft image.
[0085] In one embodiment of the present application, in order to improve the alignment success rate and accuracy, the terminal device can specifically perform alignment processing on the application interface image according to the following steps, which are described in detail as follows:
[0086] Performing feature point detection on the application interface image and the design draft image respectively to obtain a first feature point set corresponding to the application interface image and a second feature point set corresponding to the design draft image;
[0087] Performing feature point matching processing on the first feature point set and the second feature point set to obtain matched target feature points;
[0088] Based on the coordinate information of the target feature points, an affine transformation matrix is calculated;
[0089] Each pixel in the application interface image is adjusted based on the affine transformation matrix to obtain the target interface image.
[0090] In practical applications, feature point detection is to identify unique and easily recognizable key points in an image, such as a corner, a sharp turning point of an edge, or a unique point in a texture area.
[0091] In this embodiment, the terminal device can perform feature point detection on the application interface image and the design draft image respectively through a computer vision algorithm (Oriented FAST and RotatedBRIEF, ORB) to obtain a first feature point set corresponding to the application interface image and a second feature point set corresponding to the design draft image.
[0092] It should be noted that each first feature point in the above first feature point set carries its corresponding descriptor, and each second feature point in the above second feature point set carries its corresponding descriptor.
[0093] Afterwards, the terminal device may perform feature point matching processing on the first feature point set and the second feature point set to obtain matched target feature points. By matching the feature points, the terminal device may determine the spatial relationship between the two images, and thus may calculate the transformation between the two images.
[0094] It can be understood that feature point matching refers to pairing similar feature points in two images to find points that are close in position and have similar descriptions.
[0095] In one implementation of this embodiment, since both the first feature point set and the second feature point set carry descriptors of each feature point, the terminal device can perform feature point matching processing on the first feature point set and the second feature point set through a string matching algorithm (Brute-Force) to obtain matching target feature points.
[0096] It should be noted that, in order to improve the alignment accuracy, the above-mentioned target feature points may include multiple ones.
[0097] In this embodiment, after obtaining the target feature point, the terminal device can determine the first coordinates of the target feature point on the application interface image and the second coordinates of the target feature point on the design draft image, and determine the first coordinates and the second coordinates as the coordinate information of the target feature point.
[0098] Afterwards, the terminal device can calculate the affine transformation matrix between the application interface image and the design draft image based on the coordinate information of the target feature point, namely, the first coordinate of the target feature point on the application interface image and the second coordinate of the target feature point on the design draft image.
[0099] In practical applications, affine transformation matrices are used to process and transform images to achieve operations such as translation, rotation, scaling, and distortion of images.
[0100] Based on this, the terminal device can make overall adjustments to the entire application interface image according to the affine transformation matrix calculated above to adjust the image deformation and / or image size change caused by the screenshot, so that the image size and overall image shape of the design draft image are aligned with the image size and overall image shape of the adjusted application interface image, thereby obtaining a target interface image aligned with the design draft image.
[0101] For example, see Figure 2 , Figure 2 This is a schematic diagram of the alignment of the application interface image and the design draft image provided by an embodiment of the present application. Figure 2 (a) is a design draft image, and the width of the design draft image is perpendicular to the horizontal direction, and the length is parallel to the horizontal direction; Figure 2 (b) is an application interface image, and the angle between the width of the application interface image and the horizontal direction is 45 degrees, and the angle between the length and the horizontal direction is 45 degrees. It can be seen that the application interface image needs to be rotated in combination with the above-obtained affine transformation matrix, that is, the entire application interface image is rotated 45 degrees in the horizontal direction to obtain the rotated application interface image, such as Figure 2 The target interface image shown in (c) in FIG. 8 has a width perpendicular to a horizontal direction and a length parallel to the horizontal direction.
[0102] See also Figure 3 , Figure 3 This is a schematic diagram of the alignment of an application interface image and a design draft image provided by another embodiment of the present application. Figure 3 (a) is a design draft image, and the image size of the design draft image is 1000 pixels * 600 pixels; Figure 3 (b) is an application interface image, and the image size of the application interface image is 900 pixels * 600 pixels, that is, the right side of the application interface image is missing 100 pixels; Figure 3 (c) in the figure is the target interface image, and the image size of the target interface image is 1000 pixels * 600 pixels.
[0103] It should be noted that all elements in the design draft image and the target interface image are aligned.
[0104] In S103, image processing is performed on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each to-be-detected element corresponding to the target interface image.
[0105] In an embodiment of the present application, after obtaining the target interface image, the terminal device can perform image processing on the draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the draft image and feature information of each element to be detected corresponding to the target interface image.
[0106] Among them, various reference elements include but are not limited to various reference controls in the design draft image and reference shapes of custom views.
[0107] The characteristic information of each reference element includes but is not limited to the position, size, shape, etc. of each reference element.
[0108] The elements to be detected include, but are not limited to, shapes of various controls and custom views in the target interface image.
[0109] The characteristic information of each element to be detected includes but is not limited to the position, size, shape, etc. of each element to be detected.
[0110] It should be noted that the image processing method in the embodiments of the present application includes but is not limited to: image preprocessing, edge detection, and shape detection.
[0111] Based on this, in one embodiment of the present application, the terminal device can specifically Figure 3 The steps S201 to S203 shown implement step S103, which are described in detail as follows:
[0112] In S201, image preprocessing is performed on the design draft image and the target interface image respectively to obtain a first image corresponding to the design draft image and a second image corresponding to the target interface image.
[0113] In this embodiment, the terminal device can perform grayscale processing on the draft image and the target interface image respectively, that is, convert the draft image into a first grayscale image and convert the target interface image into a second grayscale image.
[0114] It should be noted that grayscale processing of the above images can reduce computational complexity and retain only brightness information, thereby reducing the amount of data and speeding up processing.
[0115] Afterwards, the terminal device can use image smoothing technology (such as Gaussian filtering) to denoise the first grayscale image and the second grayscale image respectively to eliminate interference and make the interface elements of each image clearer and smoother, thereby obtaining a first denoised image corresponding to the first grayscale image and a second denoised image corresponding to the second grayscale image.
[0116] Afterwards, the terminal device can perform edge enhancement processing on the first denoised image and the second denoised image respectively, such as Canny edge detection or Laplace operator, to make the boundaries of the interface elements of each image more prominent and facilitate detection, thereby obtaining a first enhanced image corresponding to the first denoised image and a second enhanced image corresponding to the second denoised image.
[0117] Finally, the terminal device can perform image sharpening processing (such as using Sobel filtering or sharpening filter) on the first enhanced image and the second enhanced image respectively to enhance the clarity of edge details in each image, ensure that the outline of each interface element in each image can be accurately captured, and provide high-quality input images for subsequent shape detection, thereby obtaining a first image corresponding to the first enhanced image and a second image corresponding to the second enhanced image.
[0118] Based on this, the terminal device can complete the image preprocessing operation on the design draft image and the target interface image to obtain the first image that the design draft image finally corresponds to and the second image that the target interface image finally corresponds to.
[0119] In S202, edge detection is performed on the first image and the second image respectively to determine each first boundary region included in the first image and each second boundary region included in the second image.
[0120] In practical applications, edge detection helps to segment images into different interface elements. For UI interface analysis, edge detection can clearly distinguish the boundaries of buttons, text boxes, and other graphic elements.
[0121] Therefore, in this embodiment, after obtaining the first image and the second image, the terminal device may perform edge detection on the first image and the second image respectively to determine each first boundary area included in the first image and each second boundary area included in the second image.
[0122] In this embodiment, the edge detection method includes but is not limited to a method based on a first-order derivative and a method based on a second-order derivative.
[0123] It should be noted that the first-order derivative-based method refers to detecting the boundary by finding the maximum and minimum values in the first-order derivative of the image, and usually locating the boundary in the direction of the maximum gradient. Among them, commonly used operators include Roberts Cross operator, Prewitt operator, Sobel operator and Kirsch operator.
[0124] The second-order derivative-based method is to find the boundary by finding the zero crossing of the second-order derivative of the image, usually the zero crossing point of Laplacian or the zero crossing point of nonlinear difference representation. Among them, the commonly used methods include Marr-Hildreth method and Canny operator.
[0125] In one embodiment of the present application, since the first image and the second image are prone to generate broken parts and small noise points when performing edge detection, in order to repair the broken parts generated during edge detection, eliminate small noise points, and make the contours of the interface elements in each image clearer and more coherent, in this embodiment, the terminal device can perform morphological processing on the first image and the second image after edge detection, respectively, to obtain the first target area corresponding to each first boundary area and the second target area corresponding to each second boundary area.
[0126] In this embodiment, the morphological processing includes but is not limited to dilation, erosion, opening operation and closing operation.
[0127] In S203, shape detection is performed on each of the first boundary regions and each of the second boundary regions to obtain feature information of each reference element and feature information of each element to be detected.
[0128] In this embodiment, in order to obtain a detailed geometric description of each interface element in each image for subsequent accurate difference analysis and comparison, after the terminal device determines each first boundary area in the first image and each second boundary area in the second image, the terminal device can perform shape detection on each first boundary area and each second boundary area respectively to obtain each reference element feature information and each element to be detected feature information.
[0129] It should be noted that shape detection is an image analysis method used to identify and extract the contours and geometric features of various interface elements in an image, and analyze the shape information of the object, such as area, perimeter, direction and angle, by detecting complete closed contours.
[0130] In one embodiment of the present application, the terminal device may implement step S203 according to the following steps, which are described in detail as follows:
[0131] Performing contour extraction on the first image and the second image based on the first boundary regions and the second boundary regions respectively, to obtain first contours corresponding to the first image and second contours corresponding to the second image;
[0132] Calculating and obtaining first geometric features of each of the first contours and second geometric features of each of the second contours;
[0133] Performing a hierarchical analysis on each of the first geometric features and each of the second geometric features based on a hierarchical analysis method to obtain first association information between each of the first geometric features and second association information between each of the second geometric features;
[0134] Based on each of the first geometric features, each of the second geometric features, each of the first association information, and each of the second association information, each of the reference element feature information and each of the to-be-detected element feature information are generated.
[0135] In this embodiment, in order to improve the detection accuracy of the contours and geometric features of various interface elements in the image, the terminal device can respectively extract contours of the first image and the second image based on each first boundary area and each second boundary area to obtain each first contour corresponding to the first image and each second contour corresponding to the second image.
[0136] Afterwards, the terminal device may calculate the first geometric features of each first contour and the second geometric features of each second contour respectively through formulas corresponding to various geometric features.
[0137] The first geometric feature includes but is not limited to the perimeter, area and centroid of the first contour corresponding thereto. The second geometric feature includes but is not limited to the perimeter, area and centroid of the second contour corresponding thereto.
[0138] Based on this, the formula corresponding to the above perimeter is:
[0139]
[0140] Among them, (x i ,y i ) represents the coordinates of the i-th point on the corresponding contour, and P represents the perimeter.
[0141] The formula corresponding to the above area is:
[0142]
[0143] Among them, (x i ,y i ) represents the coordinates of the i-th point on the corresponding contour, and A represents the area.
[0144] The formula corresponding to the above centroid is:
[0145]
[0146] Among them, (x i ,y i ) represents the coordinates of the i-th point on the corresponding contour, A represents the area, C x The abscissa of the centroid, C y Represents the vertical coordinate of the centroid.
[0147] In this embodiment, after obtaining each first geometric feature and each second geometric feature, the terminal device can perform hierarchical analysis on each first geometric feature and each second geometric feature based on the hierarchical analysis method to determine the relationship and inclusion structure between each element in the same image, thereby obtaining first association information between each first geometric feature and second association information between each second geometric feature.
[0148] The first association information is used to describe the relationship and inclusion structure between the first geometric features, and the second association information is used to describe the relationship and inclusion structure between the second geometric features.
[0149] In practical applications, the analytic hierarchy process (AHP) is a method used for decision analysis. It decomposes complex problems into multiple levels, compares and weights the factors at each level, and ultimately determines the degree of influence of each factor on the overall goal. This method is particularly suitable for dealing with complex decision-making problems with multiple objectives and multiple criteria.
[0150] In this embodiment, the hierarchical analysis method can be used to analyze the relationship and inclusion structure between different features in the image. The specific steps are as follows:
[0151] Define feature hierarchy: Divide image features into different levels, such as edge features, texture features, and shape features;
[0152] Construct a judgment matrix: compare features at different levels in pairs to determine their relative importance. For example, compare the importance of edge features and texture features;
[0153] Calculate weights: After consistency check, determine the weight of each feature, thereby assigning different weight values in image processing.
[0154] Based on this, through the hierarchical analysis method, the terminal device can clearly define the relationship and inclusion structure between different features in the image.
[0155] In this embodiment, in order to facilitate the subsequent comparison of the differences between the target interface image and the design draft image, for any reference element in the design draft image, the terminal device can generate reference element feature information corresponding to the reference element based on the first geometric feature corresponding to the reference element and the corresponding first association information.
[0156] For any element to be detected in the application interface image, the terminal device can generate the element feature information to be detected corresponding to the element to be detected based on the second geometric feature corresponding to the element to be detected and the corresponding second association information.
[0157] In one embodiment of the present application, in combination with S202, after the terminal device performs morphological processing on the first image and the second image after edge detection to obtain the first target area corresponding to each first boundary area and the second target area corresponding to each second boundary area, in this embodiment, the terminal device can specifically perform shape detection on each first target area and each second target area respectively to obtain each reference element feature information and each element to be detected feature information.
[0158] In this embodiment, the specific process of the terminal device performing shape detection on each first target area and each second target area is as follows: Figure 4 Step S203 in the corresponding embodiment is the same. Please refer to the relevant description in step S203 for details, which will not be repeated here.
[0159] In S104, a difference detection result is obtained based on the characteristic information of each reference element and the characteristic information of each element to be detected.
[0160] In an embodiment of the present application, the terminal device may compare each reference element feature information with each to-be-detected element feature information one by one to obtain a difference detection result.
[0161] The above difference detection results are used to describe the difference between each element to be detected and its corresponding reference element in terms of position, size, and / or shape.
[0162] It should be noted that the differences include but are not limited to: position offset, size change, and shape change.
[0163] In one embodiment of the present application, in order to improve the accuracy of difference detection, the terminal device can implement step S104 according to the following steps, which are described in detail as follows:
[0164] Calculating similarities between the reference element feature information and the to-be-detected element feature information to obtain multiple groups of element detection pairs; each group of element detection pairs includes a to-be-detected element feature information and corresponding reference element feature information;
[0165] Difference detection is performed on the multiple groups of element detection pairs in different detection dimensions respectively to obtain difference detection results of the multiple groups of element detection pairs respectively; the difference detection results of each group of element detection pairs include difference detection sub-results in the different detection dimensions.
[0166] In this embodiment, after the terminal device obtains the characteristic information of each reference element and the characteristic information of each element to be detected, since the characteristic information of each reference element includes the shape of each reference element and the characteristic information of each element to be detected includes the shape of each element to be detected, the terminal device can compare the shape of each reference element with the shape of each element to be detected one by one, determine the similarity between the shape of each reference element and the shape of each element to be detected, thereby realizing the similarity calculation of each reference element characteristic information and each element to be detected characteristic information.
[0167] Afterwards, the terminal device can sequentially match the shape of the reference element with the greatest similarity with the shape of the element to be detected, so as to match each reference element feature information with each element feature information to be detected, and obtain multiple groups of element detection pairs, wherein each group of element detection pairs includes a reference element feature information and a corresponding element feature information to be detected.
[0168] In this embodiment, for any group of element detection pairs, the terminal device can perform difference detection on the group of element detection pairs in different detection dimensions to obtain difference detection results of the group of element detection pairs.
[0169] It should be noted that the difference detection results of each group of element detection pairs include difference detection sub-results under different detection dimensions.
[0170] Among them, different detection dimensions include but are not limited to: position dimension, size dimension and shape dimension.
[0171] Based on this, for any group of element detection pairs, the terminal device can compare the position in the reference element feature information of the element detection pair with the position in the feature information of the element to be detected, so as to determine the difference between the position of the element to be detected corresponding to the element detection pair and the position of the reference element corresponding to it, thereby obtaining the difference detection sub-result of the group of element detection pairs in the position dimension; the terminal device can compare the size in the reference element feature information of the element detection pair with the size in the feature information of the element to be detected, so as to determine the difference between the size of the element to be detected corresponding to the element detection pair and the size of the reference element corresponding to it, thereby obtaining the difference detection sub-result of the group of element detection pairs in the size dimension; the terminal device compares the shape in the reference element feature information of the element detection pair with the shape in the feature information of the element to be detected, so as to determine the difference between the shape of the element to be detected corresponding to the element detection pair and the shape of the reference element corresponding to it, thereby obtaining the difference detection sub-result of the group of element detection pairs in the shape dimension.
[0172] In some possible embodiments, since the application interface image may contain elements that are not present in the design draft image, or may not contain elements that are present in the design draft image, in this embodiment, the difference detection result can also be used to describe the newly added elements and deleted elements of the application interface image compared to the various reference elements in the design draft image.
[0173] From the above, it can be seen that an image detection method provided by an embodiment of the present application obtains an application interface image and a design draft image corresponding to the application interface image; performs alignment processing on the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image; performs image processing on the design draft image and the target interface image respectively to obtain each reference element feature information corresponding to the design draft image and each to-be-detected element feature information corresponding to the target interface image; obtains a difference detection result based on each reference element feature information and each to-be-detected element feature information. Compared with the prior art, the present application does not require manual intervention, reduces labor costs, and improves detection efficiency. At the same time, the present application aligns the design draft with the UI interface, and can determine that all subsequent comparisons are based on the image alignment, that is, to ensure that the element positions and sizes in the two images are the same when the subsequent comparisons are performed, thereby improving the detection accuracy.
[0174] See also Figure 5 , Figure 5 FIG. 1 is a flowchart of an implementation of an image detection method provided by another embodiment of the present application. Figure 1 Corresponding embodiment, this embodiment may further include S301 to S304 after S104, which are described in detail as follows:
[0175] In S301, a difference type is determined based on the difference content.
[0176] In this embodiment, the difference detection result includes the difference content, which includes but is not limited to: position shift (including the direction and degree of shift), size change (including the direction and degree of change), shape change (including the direction and degree of change), and element quantity change (including addition and deletion).
[0177] The difference types include, but are not limited to: position type, size type, shape type, and element quantity type.
[0178] Based on this, when the terminal device detects that the difference content includes a position offset, it can determine that the corresponding difference type is a position type; when the terminal device detects that the difference content includes a size change, it can determine that the corresponding difference type is a size type; when the terminal device detects that the difference content includes a shape change, it can determine that the corresponding difference type is a shape type; when the terminal device detects that the difference content includes a change in the number of elements, it can determine that the corresponding difference type is an element number type.
[0179] In S302, a marking method is determined according to the difference type.
[0180] In S303, the application interface image is marked according to the marking method and the difference content to obtain a marked image.
[0181] In S304, the marked image is visually displayed.
[0182] In this embodiment, in order to clarify the different differences so that the user can quickly and clearly determine the difference between the application interface image and the design draft image, the terminal device can determine the marking method for the difference content according to the difference type determined above.
[0183] Specifically, when the difference type is a change in the number of elements, the terminal device can determine that the corresponding marking method is to use a special icon to mark the newly added elements and / or deleted elements; when the difference type is a position shift, the terminal device can determine that the corresponding marking method is to use a direction indicator for marking (for example, using an arrow to indicate the moving direction and distance of the element to be detected that has undergone position shift, to show the position change); when the difference type is a size change, the terminal device can determine that the corresponding marking method is to use a scale indicator for marking (for example, using a two-way arrow on the boundary of the element to be detected that has undergone size change to indicate the degree of size increase or decrease, to clearly show the size change).
[0184] Based on this, the terminal device can mark the application interface image according to the difference content and the corresponding marking method to obtain a processed application interface image, that is, a marked image.
[0185] In some possible embodiments, since the change in the number of elements includes new elements and deleted elements, in order to further clarify whether new elements are added or deleted elements, the terminal device can specifically use a special icon with a green frame to mark the new elements to highlight the new content; the terminal device can also use special icons such as red crosses or shadows to mark deleted elements to indicate elements that have been removed.
[0186] Afterwards, the terminal device can visually display the above-mentioned marked image for the user to review.
[0187] It can be seen from the above that the image detection method provided in this embodiment can mark the parts where there are differences between the UI interface and the design draft, and display them visually, so that relevant personnel can clearly understand the differences between the UI interface and the design draft, so that relevant personnel can make corresponding adjustments to the UI interface based on the differences.
[0188] See also Figure 6 , Figure 6 FIG. 1 is a flowchart of an implementation of an image detection method provided in another embodiment of the present application. Figure 1 Correspondingly, this embodiment may further include S401 before S104, and correspondingly, after S104, may further include S402 to S406, which are described in detail as follows:
[0189] In S401, the alignment process and the image processing process are recorded.
[0190] In this embodiment, in order to generate a difference report for recording in detail each step of the process before and after the difference comparison between two images, the terminal device can record the specific process of aligning the application interface image with the design draft image when executing step S102, that is, the alignment processing process; the terminal device can record the specific process of image processing the target interface image and the design draft image when executing step S103, that is, the image processing process; and the terminal device can record the difference comparison process of obtaining the difference detection results based on the feature information of each reference element and the feature information of each element to be detected when executing step S104, so as to ensure that the entire image detection process is clear and transparent.
[0191] In S402, based on the difference content, the number and type of differences between the design draft image and the application interface image are determined.
[0192] In S403, a difference analysis chart is generated based on the difference quantity and the difference type.
[0193] In S404, a difference list is generated based on the difference content and the difference type.
[0194] In S405, adjustment prompt information corresponding to the difference list is generated.
[0195] In S406, a difference report is generated based on the alignment process, the image processing process, the difference analysis chart, the difference list and the adjustment prompt information.
[0196] In this embodiment, the difference detection result includes the difference content, which includes but is not limited to: position shift (including the direction and degree of shift), size change (including the direction and degree of change), shape change (including the direction and degree of change), and element quantity change (including addition and deletion).
[0197] The difference types include, but are not limited to: position type, size type, shape type, and element quantity type.
[0198] In this embodiment, the terminal device can determine the number and type of differences between the design draft image and the application interface image according to the difference content in the difference detection result.
[0199] Thereafter, in order to generate a difference report for providing a comprehensive overview of the differences, the terminal device may summarize the distribution of various types of differences based on the number of differences and the type of differences, and generate a difference analysis chart to provide an overall analysis view.
[0200] In this embodiment, the terminal device may also generate a difference list based on the difference content and the difference type, wherein the difference list includes a plurality of difference items, and each difference item includes a difference type and specific content.
[0201] In some possible embodiments, the terminal device may also visually display the difference contents in the application interface images through charts, annotations, or schematic diagrams to facilitate user understanding.
[0202] In this embodiment, in order to facilitate the subsequent user to make corresponding adjustments to the application interface, the terminal device can generate adjustment prompt information corresponding to each difference item in the difference list.
[0203] Exemplarily, when the difference type of the difference item is a position type, the corresponding adjustment prompt information may include suggestions for adjusting the element position; when the difference type of the difference item is a size type, the corresponding adjustment prompt information may include suggestions for adjusting the size.
[0204] In some possible embodiments, the terminal device may sequentially input each difference item in the difference list into the difference adjustment model for processing, so as to obtain adjustment prompt information corresponding to each difference item.
[0205] In this embodiment, the difference adjustment model can be obtained by training a pre-built deep learning model based on a preset sample set. Each sample data in the preset sample set includes a sample difference item and sample adjustment information corresponding to the sample difference item. When training the pre-built deep learning model, the sample difference item in each sample data is used as the input of the deep learning model, and the sample adjustment information corresponding to the sample difference item in each sample data is used as the output of the deep learning model. Through training, the deep learning model can learn the correspondence between all possible sample difference items and sample adjustment information, and use the trained deep learning model as the difference adjustment model.
[0206] In this embodiment, in order to provide users (such as developers, designers, and testers) with a comprehensive reference, help users understand the details of application interface differences, and provide effective solutions, the terminal device can generate a difference report based on the alignment process, image processing process, difference analysis chart, difference list, and adjustment prompt information.
[0207] As can be seen from the above, the image detection method provided in this embodiment can provide a comprehensive overview, specific list, visual display and correction suggestions of the differences between the application interface image and the design draft image through the difference report. At the same time, the difference report can track and manage historical records, facilitate team member collaboration, and improve work efficiency.
[0208] It should be understood that the serial numbers of the steps in the above embodiments do not imply a sequence of execution. The execution sequence of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.
[0209] Corresponding to an image detection method described in the above embodiment, Figure 7 The structure diagram of an image detection device provided by an embodiment of the present application is shown. For the convenience of explanation, only the part related to the embodiment of the present application is shown. Figure 7 The image detection device 500 includes: an acquisition unit 51, an alignment unit 52, a first processing unit 53 and a first result determination unit 54. Among them:
[0210] The acquisition unit 51 is used to acquire an application interface image and a design draft image corresponding to the application interface image.
[0211] The alignment unit 52 is used to perform alignment processing on the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image.
[0212] The first processing unit 53 is used to perform image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each to-be-detected element corresponding to the target interface image.
[0213] The first result determination unit 54 is used to obtain a difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected.
[0214] In one embodiment of the present application, the alignment unit 52 specifically includes: a first detection unit, a second processing unit, a first calculation unit and an adjustment unit.
[0215] The first detection unit is used to perform feature point detection on the application interface image and the design draft image respectively to obtain a first feature point set corresponding to the application interface image and a second feature point set corresponding to the design draft image.
[0216] The second processing unit is used to perform feature point matching processing on the first feature point set and the second feature point set to obtain matched target feature points.
[0217] The first calculation unit is used to calculate an affine transformation matrix based on the coordinate information of the target feature point.
[0218] The adjustment unit is used to adjust each pixel in the application interface image based on the affine transformation matrix to obtain the target interface image.
[0219] In one embodiment of the present application, the first processing unit 53 specifically includes: a third processing unit, a second detection unit and a third detection unit. Among them:
[0220] The third processing unit is used to perform image preprocessing on the design draft image and the target interface image respectively to obtain a first image corresponding to the design draft image and a second image corresponding to the target interface image.
[0221] The second detection unit is used to perform edge detection on the first image and the second image respectively, and determine each first boundary area included in the first image and each second boundary area included in the second image.
[0222] The third detection unit is used to perform shape detection on each of the first boundary regions and each of the second boundary regions respectively, to obtain feature information of each of the reference elements and feature information of each of the elements to be detected.
[0223] In one embodiment of the present application, the image detection device 500 further includes: a fourth processing unit, and accordingly, the third detection unit specifically includes: a fourth detection unit.
[0224] The fourth processing unit is used to perform morphological processing on the first image and the second image respectively to obtain the first target area corresponding to each of the first boundary areas and the second target area corresponding to each of the second boundary areas.
[0225] The fourth detection unit is used to perform shape detection on each of the first target areas and each of the second target areas, respectively, to obtain feature information of each of the reference elements and feature information of each of the elements to be detected.
[0226] In one embodiment of the present application, the third detection unit specifically includes: an extraction unit, a second calculation unit, an analysis unit and a first generation unit.
[0227] The extraction unit is used to perform contour extraction on the first image and the second image based on the first boundary areas and the second boundary areas, respectively, to obtain first contours corresponding to the first image and second contours corresponding to the second image.
[0228] The second calculation unit is used to calculate and obtain the first geometric features of each of the first contours and the second geometric features of each of the second contours.
[0229] The analyzing unit is used to perform hierarchical analysis on each of the first geometric features and each of the second geometric features based on a hierarchical analysis method to obtain first association information between each of the first geometric features and second association information between each of the second geometric features.
[0230] The first generating unit is used to generate each reference element feature information and each to-be-detected element feature information based on each first geometric feature, each second geometric feature, each first association information, and each second association information.
[0231] In one embodiment of the present application, the first determination unit 54 specifically includes: a third calculation unit and a fifth detection unit. Among them:
[0232] The third calculation unit is used to perform similarity calculation on each reference element feature information and each to-be-detected element feature information respectively, to obtain multiple groups of element detection pairs; each group of element detection pairs includes a to-be-detected element feature information and corresponding reference element feature information.
[0233] The fifth detection unit is used to perform difference detection on the multiple groups of element detection pairs in different detection dimensions, respectively, to obtain difference detection results of the multiple groups of element detection pairs; the difference detection results of each group of element detection pairs include difference detection sub-results under the different detection dimensions.
[0234] In one embodiment of the present application, the difference detection result includes the difference content; the image detection device 500 further includes: a second determination unit, a third determination unit, a fifth processing unit and a display unit. Among them:
[0235] The second determining unit is used to determine the difference type based on the difference content.
[0236] The third determining unit is used to determine a marking method according to the difference type.
[0237] The fifth processing unit is used to mark the application interface image according to the marking method and the difference content to obtain a marked image.
[0238] The display visually displays the marked image.
[0239] In one embodiment of the present application, the difference detection result includes the difference content; the image detection device 500 further includes: a recording unit, a fourth determination unit, a second generation unit, a third generation unit, a fourth generation unit and a fifth generation unit. Among them:
[0240] The recording unit is used to record the alignment process and the image processing process.
[0241] The fourth determining unit is used to determine the number and type of differences between the design draft image and the application interface image based on the difference content.
[0242] The second generating unit is used to generate a difference analysis chart based on the difference quantity and the difference type.
[0243] The third generating unit is used to generate a difference list based on the difference content and the difference type.
[0244] The fourth generating unit is used to generate adjustment prompt information corresponding to the difference list.
[0245] The fifth generating unit is used to generate a difference report based on the alignment process, the image processing process, the difference analysis chart, the difference list and the adjustment prompt information.
[0246] It should be noted that the information interaction, execution process, etc. between the above-mentioned devices / units are based on the same concept as the method embodiment of the present application. Their specific functions and technical effects can be found in the method embodiment part and will not be repeated here.
[0247] The technicians in the relevant field can clearly understand that for the convenience and simplicity of description, only the division of the above-mentioned functional units and modules is used as an example for illustration. In practical applications, the above-mentioned function allocation can be completed by different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiment can be integrated in a processing unit, or each unit can exist physically separately, or two or more units can be integrated in one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of software functional units. In addition, the specific names of the functional units and modules are only for the convenience of distinguishing each other, and are not used to limit the scope of protection of this application. The specific working process of the units and modules in the above-mentioned system can refer to the corresponding process in the aforementioned method embodiment, which will not be repeated here.
[0248] Figure 8 This is a schematic diagram of the structure of a terminal device provided in an embodiment of the present application. Figure 8 As shown, the terminal device 6 of this embodiment includes: at least one processor 60 ( Figure 8 Only one is shown in the figure) a processor, a memory 61, and a computer program 62 stored in the memory 61 and executable on the at least one processor 60, wherein the processor 60 implements the steps in any of the above-mentioned image detection method embodiments when executing the computer program 62.
[0249] The terminal device 6 may include, but is not limited to, a processor 60 and a memory 61. Those skilled in the art will appreciate that Figure 8 It is only an example of the terminal device 6 and does not constitute a limitation on the terminal device 6. It may include more or fewer components than shown in the figure, or a combination of certain components, or different components. For example, it may also include input and output devices, network access devices, etc.
[0250] The processor 60 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor, etc.
[0251] In some embodiments, the memory 61 may be an internal storage unit of the terminal device 6, such as the memory of the terminal device 6. In other embodiments, the memory 61 may also be an external storage device of the terminal device 6, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc. equipped on the terminal device 6. Further, the memory 61 may also include both the internal storage unit of the terminal device 6 and an external storage device. The memory 61 is used to store an operating system, an application program, a boot loader (BootLoader), data, and other programs, such as the program code of the computer program. The memory 61 may also be used to temporarily store data that has been output or is to be output.
[0252] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.
[0253] An embodiment of the present application provides a computer program product. When the computer program product runs on a terminal device, the terminal device can implement the steps in the above-mentioned method embodiments when executing the computer program product.
[0254] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present application implements all or part of the processes in the above-mentioned embodiment method, which can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a computer-readable storage medium, and the computer program can implement the steps of the above-mentioned various method embodiments when executed by the processor. Among them, the computer program includes computer program code, and the computer program code can be in source code form, object code form, executable file or some intermediate form. The computer-readable medium may at least include: any entity or device capable of carrying the computer program code to the terminal device, a recording medium, a computer memory, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), an electric carrier signal, a telecommunication signal and a software distribution medium. For example, a USB flash drive, a mobile hard disk, a magnetic disk or an optical disk. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electric carrier signals and telecommunication signals.
[0255] In the above embodiments, the description of each embodiment has its own emphasis. For parts that are not described or recorded in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0256] The embodiments described above are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, a person skilled in the art should understand that the technical solutions described in the aforementioned embodiments may still be modified, or some of the technical features may be replaced by equivalents. Such modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application, and should all be included in the protection scope of the present application.
Claims
1. An image detection method, characterized in that: include: Acquire an application interface image and a design draft image corresponding to the application interface image; Performing alignment processing on the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image; Performing image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each element to be detected corresponding to the target interface image; Based on the characteristic information of each reference element and the characteristic information of each element to be detected, a difference detection result is obtained.
2. The image detection method according to claim 1, characterized in that: The aligning the application interface image based on the design draft image to obtain a target interface image aligned with the design draft image includes: Performing feature point detection on the application interface image and the design draft image respectively to obtain a first feature point set corresponding to the application interface image and a second feature point set corresponding to the design draft image; Performing feature point matching processing on the first feature point set and the second feature point set to obtain matched target feature points; Based on the coordinate information of the target feature points, an affine transformation matrix is calculated; Each pixel in the application interface image is adjusted based on the affine transformation matrix to obtain the target interface image.
3. The image detection method according to claim 1, characterized in that: The performing image processing on the design draft image and the target interface image respectively to obtain feature information of each reference element corresponding to the design draft image and feature information of each to-be-detected element corresponding to the target interface image includes: Performing image preprocessing on the design draft image and the target interface image respectively to obtain a first image corresponding to the design draft image and a second image corresponding to the target interface image; Performing edge detection on the first image and the second image respectively to determine each first boundary region included in the first image and each second boundary region included in the second image; Shape detection is performed on each of the first boundary regions and each of the second boundary regions to obtain feature information of each reference element and feature information of each element to be detected.
4. The image detection method according to claim 3, characterized in that: After performing edge detection on the first image and the second image respectively to determine each first boundary region included in the first image and each second boundary region included in the second image, the method further includes: Performing morphological processing on the first image and the second image respectively to obtain first target areas corresponding to the first boundary areas and second target areas corresponding to the second boundary areas; Accordingly, the performing shape detection on each of the first boundary regions and each of the second boundary regions to obtain the feature information of each reference element and the feature information of each element to be detected includes: Shape detection is performed on each of the first target areas and each of the second target areas respectively to obtain feature information of each reference element and feature information of each element to be detected.
5. The image detection method according to claim 3, characterized in that: The performing shape detection on each of the first boundary regions and each of the second boundary regions to obtain feature information of each reference element and feature information of each element to be detected comprises: Performing contour extraction on the first image and the second image based on the first boundary regions and the second boundary regions respectively, to obtain first contours corresponding to the first image and second contours corresponding to the second image; Calculating and obtaining first geometric features of each of the first contours and second geometric features of each of the second contours; Performing a hierarchical analysis on each of the first geometric features and each of the second geometric features based on a hierarchical analysis method to obtain first association information between each of the first geometric features and second association information between each of the second geometric features; Based on each of the first geometric features, each of the second geometric features, each of the first association information, and each of the second association information, each of the reference element feature information and each of the to-be-detected element feature information are generated.
6. The image detection method according to claim 1, characterized in that: The obtaining of a difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected includes: Calculating similarities between the reference element feature information and the to-be-detected element feature information to obtain multiple groups of element detection pairs; each group of element detection pairs includes a to-be-detected element feature information and corresponding reference element feature information; Difference detection is performed on the multiple groups of element detection pairs in different detection dimensions respectively to obtain difference detection results of the multiple groups of element detection pairs respectively; the difference detection results of each group of element detection pairs include difference detection sub-results in the different detection dimensions.
7. The image detection method according to any one of claims 1 to 6, characterized in that: The difference detection result includes the difference content; after the difference detection result is obtained based on the feature information of each reference element and the feature information of each element to be detected, it also includes: determining a difference type based on the difference content; Determining a marking method according to the difference type; Marking the application interface image according to the marking method and the difference content to obtain a marked image; The marked image is visually displayed.
8. The image detection method according to any one of claims 1 to 6, characterized in that: The difference detection result includes difference content; before obtaining the difference detection result based on the feature information of each reference element and the feature information of each element to be detected, it also includes: Record the alignment process and image processing process; After obtaining the difference detection result based on the characteristic information of each reference element and the characteristic information of each element to be detected, the method further includes: Based on the difference content, determining the number and type of differences between the design draft image and the application interface image; generating a difference analysis chart based on the difference quantity and the difference type; Based on the difference content and the difference type, generating a difference list; Generating adjustment prompt information corresponding to the difference list; A difference report is generated based on the alignment process, the image processing process, the difference analysis chart, the difference list and the adjustment prompt information.
9. A terminal device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the image detection method according to any one of claims 1 to 8 is implemented.
10. A computer program product, characterized in that The invention comprises a computer program, which implements the image detection method according to any one of claims 1 to 8 when being executed.