Review method and device, electronic equipment and computer readable storage medium

Abstract

The application discloses a checking method and device, electronic equipment and a computer readable storage medium. The method comprises: obtaining a design picture; determining a to-be-checked picture corresponding to the design picture; wherein the to-be-checked picture is an interface screenshot of a to-be-checked interface when the to-be-checked interface is displayed on a display device, and the to-be-checked interface is obtained by developing based on the design picture; comparing color information of each pixel point in the to-be-checked picture with pixel points at corresponding positions in the design picture to obtain color difference information corresponding to each pixel point; and determining overall difference information of the to-be-checked picture and the design picture according to the color difference information. The scheme provided by the application can more accurately visually check the to-be-checked interface by the electronic equipment, liberate manpower, and thus make the checking speed faster and the efficiency higher.

Description

Technical Field

[0001] This application relates to the field of computer technology, specifically to a walkthrough method, apparatus, electronic device, and computer-readable storage medium. Background Technology

[0002] With the continuous development of computer technology, the development and updating speed of websites or applications is getting faster and faster. In interface design (User Interface, or UI), in order to ensure that the interface delivered by the developers is consistent with the design draft images, the designers usually need to accept the images to be checked by the developers after the website or application development is completed. This is called interface walkthrough (i.e., visual walkthrough). The developers adjust the interface according to the results of the walkthrough so that the developed interface is consistent with the design draft images.

[0003] In related technologies, the interface to be inspected is usually displayed, and the inspection personnel manually compare the displayed interface with the design draft image, record the comparison results, and obtain an inspection report.

[0004] However, the above-mentioned manual visual inspection method is a rough inspection method. Due to the differences in evaluation standards between people, different inspectors often have different inspection results for the same interface. In addition, manual inspection is easily affected by subjective factors, resulting in low accuracy of the inspection. Summary of the Invention

[0005] This application provides a method, apparatus, electronic device, and computer-readable storage medium for visual inspection, enabling more accurate visual inspection of the interface to be inspected via electronic device. The specific solution is as follows.

[0006] In a first aspect, embodiments of this application provide a walkthrough method, the method comprising: acquiring design draft images;

[0007] Identify the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image;

[0008] The color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0009] The overall difference information between the image to be inspected and the design draft image is determined based on the color difference information provided.

[0010] Optionally, comparing the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image includes:

[0011] When it is found that the number of pixels in the width direction of the image to be inspected and the design draft image are the same, the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image.

[0012] Optionally, comparing the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image includes:

[0013] If the number of pixels in the height direction of the image to be inspected is different from that of the design draft image, then the first image is cropped in the height direction so that the number of pixels in the height direction of the cropped image is the same as that of the second image. The first image is the image with more pixels in the height direction between the image to be inspected and the design draft image, and the second image is the image other than the first image between the image to be inspected and the design draft image.

[0014] The color information of each pixel in the cropped image is compared with the corresponding pixel in the second image.

[0015] If the number of pixels in the height direction of the image to be inspected is the same as that of the design draft image, then the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image.

[0016] Optionally, cropping the first image by pixels in the height direction includes:

[0017] Pixels are cropped from the bottom and / or top of the first image in the height direction.

[0018] Optionally, the color information includes the channel values ​​of the color space to which the pixel belongs, and the color difference information includes the difference between the channel values.

[0019] Optionally, the color space includes each basic color channel and an alpha channel, the color information includes each basic color channel value and the alpha channel value, and the color difference information includes the difference between each basic color channel value and the difference between alpha channel values.

[0020] Optionally, before determining the overall difference information between the image to be inspected and the design draft image based on the color difference information, the method further includes:

[0021] The degree of color difference corresponding to each pixel of the image to be inspected is determined based on the color difference information provided.

[0022] The step of determining the overall difference information between the image to be inspected and the design draft image based on the color difference information includes:

[0023] The overall difference between the image to be inspected and the design draft image is determined based on the degree of color difference, and the overall difference is defined as the overall difference information between the image to be inspected and the design draft image.

[0024] Optionally, determining the degree of color difference corresponding to each pixel in the image to be inspected based on the color difference information includes:

[0025] The maximum difference between two pixels with the greatest color difference is determined based on the maximum difference in each channel between the two pixels with the greatest color difference.

[0026] Based on the differences between the channel values ​​in the color difference information and the maximum difference value, the degree of color difference corresponding to each pixel in the image to be inspected is determined.

[0027] Optionally, before determining the maximum difference value between two pixels with the largest color difference based on the maximum difference value of each channel between the two pixels with the largest color difference, the method further includes:

[0028] Obtain the value range of the target channel in the color space, wherein the target channel is the channel with the largest value range among all channels corresponding to the color space;

[0029] Based on the value range of the target channel, the weighted values ​​of the channels other than the target channel in the color space are determined according to a weighting principle, wherein the weighting principle is that the value range of the channels other than the target channel in the color space multiplied by the weighted value is the same as the value range of the target channel.

[0030] The step of determining the maximum difference value between two pixels with the largest color difference based on the maximum difference value of each channel between the two pixels with the largest color difference includes:

[0031] The maximum difference between the two pixels with the largest color difference is determined by the sum of the maximum weighted difference values ​​of each channel between the two pixels with the largest color difference. The maximum weighted difference value is the product of the maximum difference value of the channel and the weighted value of the channel.

[0032] The step of determining the degree of color difference corresponding to each pixel of the image to be inspected based on the difference between the channel values ​​in the color difference information and the maximum difference value includes:

[0033] The ratio of the sum of the weighted differences corresponding to each channel in the color difference information to the maximum difference value is determined as the degree of color difference corresponding to each pixel in the image to be inspected. The weighted difference is the product of the channel difference corresponding to the channel and the weighted value of that channel.

[0034] Optionally, the method further includes:

[0035] Based on the degree of color difference corresponding to each pixel in the image to be inspected, a map of the difference region is determined; or

[0036] A similarity heatmap is determined based on the degree of color difference corresponding to each pixel in the image to be inspected.

[0037] Optionally, determining the difference region annotation map based on the color difference information corresponding to each pixel of the image to be inspected includes:

[0038] Pixels in the image to be inspected whose color difference is not zero are selected as difference points.

[0039] The region formed by each adjacent difference point among the aforementioned difference points is defined as a difference region;

[0040] Based on the differences, regions are labeled in the image to be inspected to obtain a region labeling map.

[0041] Optionally, the step of annotating the image to be inspected based on the difference regions to obtain a difference region annotation map includes:

[0042] Calculate the width, height, and starting position of each of the aforementioned difference regions, and mark a rectangular region in the image to be inspected that matches the width, height, and starting position to obtain a difference region annotation map;

[0043] Alternatively, calculate the center position and the longest boundary connecting line of the difference region, and mark a circular region in the image to be inspected with the center position as the center and the longest boundary connecting line as the diameter to obtain a difference region annotation map;

[0044] Alternatively, the difference regions can be marked in the image to be inspected to obtain a difference region annotation map.

[0045] Optionally, the method further includes:

[0046] The overall degree of difference in the region is determined based on the degree of difference at each point within the region.

[0047] Optionally, determining the similarity heatmap based on the degree of color difference corresponding to each pixel of the image to be inspected includes:

[0048] The heatmap color value of each pixel is determined based on the degree of color difference corresponding to each pixel in the image to be inspected.

[0049] The similarity heatmap is determined based on the heatmap color values ​​of each pixel.

[0050] Optionally, determining the heatmap color value of each pixel based on the degree of color difference corresponding to each pixel in the image to be inspected includes:

[0051] Obtain the first preset color value corresponding to a difference of 0 and the second preset color value corresponding to a difference of 100% in the similarity heatmap;

[0052] The heatmap color value of each pixel in the image to be inspected is determined based on the color determination principle. The color determination principle is that the degree of color difference corresponding to the pixel is proportional to a first difference and inversely proportional to a second difference. The first difference is the difference between the heatmap color value of the pixel and the first preset color value, and the second difference is the difference between the heatmap color value of the pixel and the second preset color value.

[0053] Optionally, determining the heatmap color value of each pixel in the image to be inspected based on the color determination principle includes:

[0054] The heatmap color value of each pixel in the image to be inspected is determined using the following formula:

[0055] heatcolor=(differentcolor-samecolor)×discounr+samecolor

[0056] Wherein, heatcolor is the color value of the heat map, differentcolor is the second preset color value, samecolor is the first preset color value, and discount is the degree of color difference.

[0057] Secondly, embodiments of this application provide a walkthrough device, the device comprising:

[0058] The acquisition unit is used to acquire design draft images;

[0059] The first determining unit is used to determine the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image;

[0060] The comparison unit is used to compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0061] The second determining unit is used to determine the overall difference information between the image to be inspected and the design draft image based on the color difference information.

[0062] Optionally, the comparison unit is specifically used to: when it is found that the number of pixels in the image to be inspected and the design draft image are the same in the width direction, compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image.

[0063] Optionally, the comparison unit is further configured to: if the number of pixels in the height direction of the image to be inspected and the design draft image are different, then the first image is cropped in the height direction so that the number of pixels in the cropped image is the same as that in the height direction of the second image. The first image is the image with more pixels in the height direction between the image to be inspected and the design draft image, and the second image is the image other than the first image between the image to be inspected and the design draft image. The color information of each pixel in the cropped image is compared with the corresponding pixel in the second image. If the number of pixels in the height direction of the image to be inspected and the design draft image is the same, then the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image.

[0064] Optionally, the comparison unit is further configured to: crop pixels from the bottom and / or top of the first image in the height direction.

[0065] Optionally, the second determining unit is specifically used to: determine the degree of color difference corresponding to each pixel of the image to be inspected based on the color difference information, determine the overall degree of difference between the image to be inspected and the design draft image based on the degree of color difference, and determine the overall degree of difference as the overall difference information between the image to be inspected and the design draft image.

[0066] Optionally, the second determining unit is further configured to: determine the maximum difference value between two pixels with the greatest color difference based on the maximum difference value of each channel between the two pixels with the greatest color difference; and determine the degree of color difference corresponding to each pixel of the image to be inspected based on the difference value of each channel value in the color difference information and the maximum difference value.

[0067] Optionally, the device further includes:

[0068] The third determining unit is used to obtain the value range of the target channel in the color space. The target channel is the channel with the largest value range among all channels in the color space. Based on the value range of the target channel, the weighted values ​​of the channels other than the target channel in the color space are determined according to a weighting principle. The weighting principle is that the value range of the channels other than the target channel in the color space multiplied by the weighted value is the same as the value range of the target channel. The sum of the maximum weighted difference values ​​of each channel between the two pixels with the largest color difference is determined as the maximum difference value between the two pixels with the largest color difference. The maximum weighted difference value is the product of the maximum difference value corresponding to the channel and the weighted value of the channel. The ratio of the sum of the weighted differences corresponding to each channel in the color difference information to the maximum difference value is determined as the degree of color difference corresponding to each pixel of the image to be inspected. The weighted difference is the product of the channel difference value corresponding to the channel and the weighted value of the channel.

[0069] Optionally, the device further includes:

[0070] The fourth determining unit is used to determine a difference region annotation map based on the degree of color difference corresponding to each pixel of the image to be inspected, or to determine a similarity heatmap based on the degree of color difference corresponding to each pixel of the image to be inspected.

[0071] Optionally, the fourth determining unit is specifically used to: filter out pixels in the image to be inspected whose color difference is not zero as difference points, determine the region formed by each adjacent difference point as a difference region, and mark the region in the image to be inspected according to the difference region to obtain a difference region marking map.

[0072] Optionally, the fourth determining unit is further specifically used to: calculate the width, height, and starting position of each of the difference regions, and mark a rectangular region in the image to be inspected that matches the width, height, and starting position to obtain a difference region annotation map; or, calculate the center position and the longest boundary connecting line of the difference region, and mark a circular region in the image to be inspected with the center position as the center and the longest boundary connecting line as the diameter to obtain a difference region annotation map; or, mark the difference regions in the image to be inspected to obtain a difference region annotation map.

[0073] Optionally, the fourth determining unit is further configured to: determine the overall degree of difference corresponding to the difference region based on the degree of difference corresponding to each difference point within the difference region.

[0074] Optionally, the fourth determining unit is further configured to: determine the heatmap color value of each pixel based on the degree of color difference corresponding to each pixel in the image to be inspected, and determine a similarity heatmap based on the heatmap color value of each pixel.

[0075] Optionally, the fourth determining unit is further specifically used to: obtain a first preset color value corresponding to a difference of 0 and a second preset color value corresponding to a difference of 100% in the similarity heatmap; and determine the heatmap color value of each pixel in the image to be inspected based on a color determination principle, wherein the color determination principle is that the color difference corresponding to the pixel is proportional to a first difference and inversely proportional to a second difference, the first difference being the difference between the heatmap color value of the pixel and the first preset color value, and the second difference being the difference between the heatmap color value of the pixel and the second preset color value.

[0076] Optionally, the fourth determining unit is further configured to: determine the heatmap color value of each pixel in the image to be inspected using the following formula:

[0077] heatcolor=(mincolor-maxcolor)×discount+maxcolor

[0078] Wherein, heatcolor is the color value of the heat map, differentcolor is the second preset color value, samecolor is the first preset color value, and discount is the degree of color difference.

[0079] Thirdly, this application also provides an electronic device, including:

[0080] Processor; and

[0081] A memory for storing a data processing program, which, when the electronic device is powered on and runs by the processor, performs the method as described in any of the first aspects.

[0082] Fourthly, embodiments of this application also provide a computer-readable storage medium storing a data processing program that is executed by a processor to perform the method described in any of the first aspects.

[0083] Compared with the prior art, this application has the following advantages:

[0084] The inspection method provided in this application determines the image to be inspected corresponding to the design draft image. Since the image to be inspected is a screenshot of the interface to be inspected displayed on a display device, it can reflect the content displayed on the interface to be inspected. Since the interface to be inspected is developed based on the design draft image, the image to be inspected can also be considered as being based on the design draft image, and the image to be inspected corresponds to the design draft image. This application's embodiments compare the color information of each pixel in the image to be inspected with the corresponding pixels in the design draft image to obtain the color difference information of each pixel. Since the image is composed of pixels with different color information, the color difference information of each pixel can well reflect the differences between the image to be inspected and the design draft image, thus well reflecting the differences between the interface to be inspected and the design draft image. Therefore, based on the color difference information of each pixel, the overall difference information between the image to be inspected and the design draft image can be obtained.

[0085] As can be seen, the solution provided in this application can accurately obtain the differences between the image to be inspected and the design draft image by using the color difference information between each pixel in the image to be inspected and the design draft image. Compared with the manual comparison method, the solution provided in this application embodiment is not affected by human subjective factors, making the accuracy of visual inspection higher.

[0086] In addition, the walkthrough method of automatic comparison by electronic devices in this application enables the acceptance personnel to quickly find the inconsistencies between the images to be inspected and the design draft images. Compared with the walkthrough method of manual comparison, the walkthrough method provided by this application can free up manpower and make the walkthrough faster and more efficient. Attached Figure Description

[0087] Figure 1 This is a flowchart of the walkthrough method provided in the embodiments of this application;

[0088] Figure 2 This is a flowchart illustrating the logic of obtaining an image to be inspected and a design draft image with the same number of pixels in both the width and height directions, as provided in an embodiment of this application.

[0089] Figure 3 This is a detailed flowchart of the walkthrough method provided in the embodiments of this application;

[0090] Figure 4 This is an example diagram of returned attribute information for a differential region provided in an embodiment of this application;

[0091] Figure 5 This is an actual effect diagram of a difference region annotation map provided in an embodiment of this application;

[0092] Figure 6This is an actual effect diagram of the similarity heatmap provided in the embodiments of this application;

[0093] Figure 7 This is an image illustrating the effect of making the image to be inspected and the design draft transparent, based on related technologies.

[0094] Figure 8 This is a structural block diagram of an example of the inspection device provided in the embodiments of this application;

[0095] Figure 9 This is a structural block diagram of an example of an electronic device provided in an embodiment of this application. Detailed Implementation

[0096] Many specific details are set forth in the following description to provide a full understanding of this application. However, this application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this application; therefore, this application is not limited to the specific embodiments disclosed below.

[0097] With the continuous development of computer technology, the development and updating speed of websites or applications is getting faster and faster. In interface design, in order to ensure that the interface delivered by the developers is consistent with the design draft images, the designers usually need to accept the images to be checked by the developers after the website or application development is completed. This is called interface walkthrough (i.e., visual walkthrough). The developers adjust the interface according to the results of the walkthrough so that the developed interface is consistent with the design draft images.

[0098] like Figure 7 As shown, in related technologies, the images to be inspected and the design draft images are usually made transparent and superimposed on each other to be presented to the inspection personnel. The inspection personnel need to manually compare the details on each image with the naked eye, record the comparison results, and obtain an inspection report.

[0099] However, the above-mentioned manual visual inspection method is a rough inspection method. Due to the differences in evaluation standards between people, different inspectors often have different inspection results for the same interface. In addition, manual inspection is easily affected by subjective factors, resulting in low accuracy of the inspection.

[0100] For the reasons stated above, in order to conduct more accurate walkthroughs of the interfaces to be inspected and improve the efficiency of the walkthroughs, this application provides a walkthrough method, apparatus, electronic device, and computer-readable storage medium. The following embodiments provide a detailed description of the method, apparatus, electronic device, and computer-readable storage medium.

[0101] The first embodiment of this application provides a walkthrough method. The subject of this method can be an electronic device, such as a desktop computer, laptop computer, mobile phone, tablet computer, server, terminal device, etc., or other electronic devices capable of data statistics. This application embodiment does not specifically limit the scope of the method.

[0102] The following combination Figure 1 , Figure 2 as well as Figure 3 The walkthrough method provided in the first embodiment of this application will be described in detail.

[0103] Figure 1 This is a flowchart of the walkthrough method provided in the first embodiment of this application. Figure 2 This is a flowchart illustrating the logic of obtaining an image to be inspected and a design draft image with the same number of pixels in both the width and height directions, as provided in the first embodiment of this application. Figure 3 A detailed flowchart illustrating the walkthrough method provided in this application embodiment.

[0104] like Figure 1 As shown, the walkthrough method provided in the first embodiment of this application includes the following steps 101 to 104.

[0105] Step 101: Obtain the design draft image.

[0106] Step 102: Identify the image to be checked that corresponds to the design draft image.

[0107] The image to be inspected is a screenshot of the interface to be inspected when it is displayed on the display device. The interface to be inspected is developed based on the design draft image.

[0108] During the development of a website or application, designers first provide design drafts. Developers then develop the website or application based on these drafts, and the resulting interface is the one to be checked. The design draft images can be provided directly by the designer. The image to be checked can be obtained by displaying the interface on a display device and taking a screenshot. Screenshots can be taken using the following methods: the display device's built-in screenshot function (by completing a specified action or using a button), the application's configured screenshot function, or the browser's screenshot function, etc. This application does not specifically limit the methods described.

[0109] The images to be inspected and the design draft images may include the following: images displayed on a computer, images displayed on a mobile phone, and images displayed on other display devices. The design draft may be an application design draft, a website design draft, a mini-program design draft, etc. This application embodiment does not specifically limit them.

[0110] Step 103: Compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0111] As is understandable, an image is composed of countless pixels. An image's resolution is divided into image resolution and display resolution. Image resolution represents the amount of information stored in the image, specifically the number of pixels per inch. Display resolution refers to the resolution of the display when showing the image, specifically the number of pixels in the width and height directions when the image is displayed on the monitor. For example, a display resolution of 2400×1800 means that the image displayed on the monitor has 2400 pixels in the width direction and 1800 pixels in the height direction. Typically, the interface to be inspected is developed based on the design draft, and the image resolution of the interface to be inspected and the design draft are the same. However, slight errors may occur during development, causing differences in the number of pixels in the width and height directions between the interface to be inspected and the design draft. This results in the display resolution of the obtained image to be inspected being different from that of the design draft, meaning the sizes of the image to be inspected and the design draft are not the same.

[0112] One implementation method is to display the image to be inspected and the design draft image on the same display device, aligning the top left corners of the two images. Pixels at corresponding positions in both images can be compared from top to bottom, or from left to right; alternatively, the bottom right corners can be aligned, and pixels at corresponding positions can be compared from bottom to top / from right to left. Since the width and height of the two images may differ, after comparing the last pair of corresponding pixels, some pixels in one image may remain uncompared, meaning there may be no corresponding pixels in the other image. In this case, the pixels at corresponding positions in both images are compared one by one; the area corresponding to the uncompared pixels can be directly identified as the direct difference area between the two images.

[0113] For example, Table 1 contains all the pixels in the image to be inspected, and Table 2 contains all the pixels in the design draft image. A1, B1, and C1 represent pixels in the same width direction in the image to be inspected, and A1, D1, and G1 represent pixels in the same height direction in the image to be inspected. The pixels in the image to be inspected in Table 1 that correspond to A2, B2, C2, D2, E2, and F2 in the design draft image in Table 2 are A1, B1, C1, D1, E1, and F1. Then, G1, H1, and I1 in Table 1 are the extra pixels in the image to be inspected compared to the design draft image. There are no corresponding pixels in the design draft image for these extra pixels. Therefore, the image areas corresponding to G1, H1, and I1 can be directly identified as the direct difference areas between the two images.

[0114] Table 1. Pixels in the image to be inspected

[0115] A1 B1 C1 D1 E1 F1 G1 H1 I1

[0116] Table 2. Pixels in the design draft images

[0117] A2 B2 C2 D2 E2 F2

[0118] Understandably, the colors of each pixel in the image to be inspected may differ from the corresponding pixels in the design draft image. For example, A1 is black, A2 is yellow, and there is a color difference between A1 and A2. B1 is green, B2 is green, and there is a color difference between B1 and B2. In step 103, each pixel in the image to be inspected is compared with the corresponding pixels in the design draft image to obtain the color difference information between each pixel.

[0119] In step 103, the color difference information of each pixel is not the same. For example, in Table 1 and Table 2, the color difference information between A1 and A2 is denoted as ΔA, the color difference information between B1 and B2 is denoted as ΔB, the color difference information between C1 and C2 is denoted as ΔC, the color difference information between D1 and D2 is denoted as ΔD, the color difference information between E1 and E2 is denoted as ΔE, and the color difference information between F1 and F2 is denoted as ΔF. Since the colors of corresponding pixels in two images may be the same or different, the color difference information between each pixel is not the same, that is, ΔA, ΔB, ΔC, ΔD, ΔE, and ΔF are not the same.

[0120] This step compares the color differences between each pixel in the image to be inspected and the corresponding pixels in the design draft image, refining the differences between the two images into individual pixel differences. This accurately obtains the color difference information of each pixel in the two images, and the color difference information of each pixel accurately describes the detailed differences between the image to be inspected and the design draft image.

[0121] Step 104: Determine the overall difference information between the image to be inspected and the design draft image based on the color difference information provided.

[0122] As one implementation method, in step 104, the overall difference information between the two images is obtained based on the color difference information (i.e., detail difference information) between each pixel. The color difference information between each pixel can be superimposed to obtain the overall difference information between the two images. For example, in Tables 1 and 2, the overall difference information between the image to be inspected and the design draft image is: ΔA+ΔB+ΔC+ΔD+ΔE+ΔF.

[0123] Optionally, the average value of the color difference information between each pixel in the image to be inspected and the corresponding pixel in the design draft image can be determined as the overall difference information between the image to be inspected and the design draft image. In this case, the overall difference information between the image to be inspected and the design draft image in Tables 1 and 2 is: (ΔA+ΔB+ΔC+ΔD+ΔE+ΔF) / 6.

[0124] As one implementation method, the median of the color difference information between each pixel in the image to be inspected and the corresponding pixel in the design draft image can be selected as the overall difference information between the image to be inspected and the design draft image. Specifically, the color difference information between each pixel is sorted in ascending order. If the number of pixels in the image to be inspected and the corresponding pixel in the design draft image is odd, the middle value is selected as the overall difference information between the image to be inspected and the design draft image; if the number of pixels in the image to be inspected and the corresponding pixel in the design draft image is even, the average of the two middle values ​​is calculated as the overall difference information between the image to be inspected and the design draft image. In this case, the overall difference information between the image to be inspected and the design draft image in Tables 1 and 2 is: (ΔC+ΔD) / 2. The overall difference information between the image to be inspected and the design draft image can also be calculated in other ways, which are not specifically limited in this embodiment.

[0125] In a specific implementation, the overall difference information between the image to be inspected and the design draft image can also be an overall difference information map, such as a difference information annotation map or a similarity heat map, which uses images to display the overall difference information between the image to be inspected and the design draft image.

[0126] After determining the overall difference information in step 104, the overall difference information can be displayed on a display device so that users can view the overall difference information.

[0127] The inspection method provided in this application determines the image to be inspected corresponding to the design draft image. Since the image to be inspected is a screenshot of the interface to be inspected displayed on a display device, it can reflect the content displayed on the interface to be inspected. Since the interface to be inspected is developed based on the design draft image, the image to be inspected can also be considered as being based on the design draft image, and the image to be inspected corresponds to the design draft image. This application's embodiments compare the color information of each pixel in the image to be inspected with the corresponding pixels in the design draft image to obtain the color difference information of each pixel. Since the image is composed of pixels with different color information, the color difference information of each pixel can well reflect the differences between the image to be inspected and the design draft image, thus well reflecting the differences between the interface to be inspected and the design draft image. Therefore, based on the color difference information of each pixel, the overall difference information between the image to be inspected and the design draft image can be obtained.

[0128] As can be seen, the solution provided in this application can accurately obtain the differences between the image to be inspected and the design draft image by using the color difference information between each pixel in the image to be inspected and the design draft image. Compared with the manual comparison method, the solution provided in this application embodiment is not affected by human subjective factors, making the accuracy of visual inspection higher.

[0129] In addition, this application embodiment describes the differences between two images by automatically comparing them using electronic devices, enabling acceptance personnel to quickly identify the inconsistencies between the image to be inspected and the design draft image. Compared with the manual comparison method, the method provided by this application can accurately and efficiently complete the inspection of the image to be inspected and the design draft image, freeing up manpower and making the inspection faster and more efficient.

[0130] Optionally, in step 103, to facilitate the comparison between the image to be inspected and the design draft image, and to ensure that the difference information obtained from the comparison is the difference information with the smallest deviation rate between the two images, it can be done according to... Figure 2 The images to be inspected and the design draft images in step 103 are then compared and contrasted.

[0131] like Figure 2 As shown in the first embodiment of this application, the logic flowchart for obtaining an image to be inspected and a design draft image with the same number of pixels in the width and height directions includes the following steps 201 to 203.

[0132] Step 201: When it is found that the number of pixels in the width direction of the image to be inspected and the design draft image are the same, compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image.

[0133] Understandably, in UI design, designers typically create design drafts based on the width of mainstream electronic devices. Developers then create the UI based on these drafts and develop the interface to be checked, also based on the width of mainstream electronic devices. In actual application development, the number of pixels in the width direction of the interface to be checked and the design draft are generally the same. If the number of pixels in the width direction of the two interfaces is different, it will cause a significant distortion in the interface to be checked compared to the design draft. The difference between the two interfaces can be directly observed by the naked eye. Developers will then readjust the interface to be checked based on the design draft to ensure that the delivered interface to be checked has the same number of pixels in the width direction as the design draft.

[0134] When the number of pixels in the width direction of the interface to be checked and the design draft are the same, developers may run the interface to be checked on a different electronic device than the one used to acquire the design draft image, take a screenshot, and then submit the image to the designers for acceptance. Because the image to be checked and the design draft image are running on different electronic devices with varying width resolutions, the two images, which initially had the same number of pixels in the width direction, will appear to have different pixel counts. This will result in significant differences at the pixel level, leading to severe distortion of details. In other words, a difference in the number of pixels in the width direction between the image to be checked and the design draft image will cause a significant and large-area discrepancy between the two images, making further comparison between the two images unnecessary. Therefore, before comparing the image to be checked and the design draft image, it is essential to first determine whether the number of pixels in the width direction of the two images is the same.

[0135] If the number of pixels in the width of the image to be inspected and the design draft image displayed on the same electronic device differs, it indicates that the developer selected a different electronic device than the one used to obtain the design draft image when displaying the product to be inspected corresponding to the image to be inspected. In this case, an error message can be returned to indicate that the widths of the image to be inspected and the design draft image are different. The error message could be something like "The widths of the image to be inspected and the design draft image are different; please change the electronic device." The user can then change the electronic device used to display the interface to be inspected to the one used by the designer when creating the design draft. For example, if the designer uses a phone with a width of 750 pixels (meaning the phone has 750 pixels in its width direction) to design the interface, then the design draft will also have 750 pixels in its width direction. When the developer designs the UI based on this design draft, the completed UI interface to be inspected will also have 750 pixels in its width direction. If the developer uses a phone with a width of 1080 pixels to display the interface to be inspected and takes a screenshot to obtain the corresponding image to be inspected, the pixels in the image to be inspected will be stretched, causing the image to become blurry. Therefore, when comparing the image to be inspected and the design draft image, electronic devices of the same model can be used to display the two images, ensuring that the number of pixels in the width direction of the image to be inspected and the design draft image are the same, thus laying a good foundation for the comparison of the two images.

[0136] Step 202: If the number of pixels in the width direction is the same, check whether the number of pixels in the height direction is the same in the image to be checked and the design draft image.

[0137] Step 203: If the number of pixels in the height direction of the image to be checked is different from that of the design draft image, then the first image is cropped in the height direction so that the number of pixels in the height direction of the cropped image is the same as that of the second image.

[0138] The first image is the image with the most pixels in the height direction among the images to be inspected and the design draft images, and the second image is the image other than the first image among the images to be inspected and the design draft images.

[0139] Specifically, pixels are cropped from the bottom and / or top of the first image in the height direction.

[0140] One approach is to align the top of the image to be inspected with the design draft image. Then, crop the image based on the lower pixel count at height, resulting in an image to be inspected and a design draft image with the same pixel count at height. In UI design, developers typically design the interface from top to bottom based on the design draft. Therefore, the top of the image to be inspected generally doesn't have errors. However, with more developers collaborating and factors like dynamic content filling, the error accumulates further down the interface design, leading to inconsistencies in pixel count at height between the final image to be inspected and the design draft. The error accumulates most at the bottom. Therefore, top alignment ensures that the top portions of the images to be inspected and the design draft are aligned, while the bottom portions with larger errors are cropped, reducing the overall deviation rate between the two images and improving the efficiency and accuracy of the comparison.

[0141] As shown in Table 3, the images to be inspected in Table 1 are aligned at the top with the design draft images in Table 2. The bottom of the images to be inspected is then cropped based on the number of pixels at the height of the design draft images. This results in the number of pixels in the cropped images.

[0142] Table 3. Pixels in the image to be inspected after bottom cropping

[0143] A1 B1 C1 D1 E1 F1

[0144] Understandably, in one implementation, it is also possible to align the bottom of the two images, crop the image with more pixels in the height direction from the top, and obtain the image to be inspected and the design draft image with the same number of pixels in the height direction. Then, the color information of the corresponding pixels in the two images is compared.

[0145] As another implementation method, feature points of the image to be inspected and the design draft image can be aligned. The image with fewer pixels in height can be cropped from the other image. A trained feature point extractor can be used to extract feature points from both images, aligning the contours connecting the feature points to maximize alignment. Then, the image with more pixels in height is cropped along the boundaries of the other image, resulting in two images with aligned feature point contours and the same number of pixels. Finally, the color differences between each pixel in the image to be inspected and the corresponding pixels in the design draft image are compared. This method maximizes the alignment of identical areas between the image to be inspected and the design draft image, reducing the overall deviation rate and improving the efficiency and accuracy of the comparison.

[0146] Optionally, in step 103, the color information includes the channel values ​​of the color space to which the pixel belongs, and the color difference information includes the difference between the channel values.

[0147] A color space, also known as a color model (or color space or color system), is used to describe color in a generally acceptable way under certain standards. There are many types of color spaces, the four most commonly used being: Red, Green, and Blue (RGB), Cyan, Magenta, and Yellow (CMY), Hue, Saturation, and Value (HSV), and Hue, Intensity, and Saturation (HIS). Any type of color space can be used as the color information for a pixel; this application does not specifically limit the types of color spaces used.

[0148] In one implementation, the pixel color information of a pixel can be represented using the values ​​of each color channel in the RGB color space. For example... Figure 3 As shown, the above inspection method may also include step 301: obtaining the basic color channel value and transparency channel value of each pixel in the image to be inspected and the corresponding pixel in the design draft image.

[0149] Understandably, all colors displayed in an image can be created by mixing red, green, and blue light in different proportions. The smallest unit in an image is a pixel, so each pixel can be recorded and described by a set of red, green, and blue values. In other words, any color in the world can be represented by a specific set of numbers. Red, green, and blue are also known as the three primary colors of light, represented as Red (R), Green (G), and Blue (B). Red, green, and blue are the basic channels in the RGB color space. Each RGB value represents the intensity of the red, green, and blue colors that make up that pixel. Typically, each RGB value has 256 intensity levels, represented numerically from 0, 1, 2... up to 255. As the R, G, and B values ​​increase from 0 to 255, the red, green, and blue colors become increasingly prominent. When the RGB value is (0, 0, 0), the red, green, and blue colors are least prominent, and the pixel appears black. When the RGB value is (255, 255, 255), the red, green, and blue colors are most prominent, and the pixel appears white. Additionally, the alpha (A) channel can be used along with the base color channels to describe pixels. The A channel does not store the pixel's color but rather its transparency. Generally, the A value is between 0 and 1. If the A value is 0, the pixel is completely transparent; if the A value is 1, the pixel has zero transparency, and is in its clearest state. For example, (255, 255, 255, 0) represents completely transparent white, (255, 255, 255, 1) represents completely opaque white, (0, 0, 0, 0) represents completely transparent black, and (0, 0, 0, 1) represents completely opaque black. The A channel adds an opacity channel to the base color channel to achieve various transparency effects.

[0150] In practical applications, the RGBA values ​​of each pixel can be obtained using various programming languages, such as JavaScript, C++, and VB. This application does not specifically limit the scope of the embodiments.

[0151] Step 302: Compare the RGBA values ​​of each pixel in the image to be inspected with the corresponding pixel values ​​in the design draft image to obtain the color difference information of each pixel.

[0152] For example, Table 1 shows the RGBA values ​​of pixels in the image to be checked: pixel A1 (0, 0, 255, 1), pixel B1 (77, 134, 96, 0.5), pixel C1 (255, 255, 255, 1), pixel D1 (236, 59, 0, 1), pixel E1 (0, 0, 0, 0.7), pixel F1 (192, 13, 6, 0); Table 2 shows the RGB values ​​of pixels in the design draft image: pixel A2 (0, 2, 246, 1), pixel B2 (69, 134, 96, 0.5), pixel C2 (255, 255, 255, 1), pixel D2 (243, 62, 0, 1), pixel E2 (0, 0, 0, 0.5), pixel F2 (187, 16, 9, 0). The color difference information for each pixel is as follows: ΔA(0, -2, 9, 0), ΔB(8, 0, 0, 0), ΔC(0, 0, 0, 0), ΔD(-7, -3, 0, 0), ΔE(0, 0, 0, 0.2), ΔF(5, -3, -3, 0). ΔA(0, -2, 9, 0) indicates that the difference between pixel A1 in the image to be checked in Table 1 and pixel A2 in the design draft image in Table 2 is that there is no difference in the red and transparency channels, but there is a difference in the green and blue channels. ΔC(0, 0, 0, 0) indicates that there is no color difference or transparency difference between pixel C1 in the image to be checked in Table 1 and pixel C2 in the design draft image in Table 2; that is, the color information of pixel C1 and pixel C2 is exactly the same.

[0153] As can be seen, this technique uses a base color channel and a transparency channel to represent each pixel in the image to be inspected and the design draft image. By comparing the base color channel values ​​and transparency channel values ​​of corresponding pixels in the two images, the subtle color changes of each pixel are obtained in a precise and detailed manner, allowing the inspectors to clearly identify the differences between the image to be inspected and the design draft image at the pixel level.

[0154] In step 302, the RGB differences of each pixel in the image to be inspected and the design draft image are obtained. The RGB difference of each pixel in the image to be inspected represents the specific color difference information between that pixel and the corresponding pixel in the design draft image. In practical applications, the number of pixels in the image to be inspected and the corresponding pixels in the design draft image is often large. Therefore, the obtained color difference information of each pixel is also a large amount of data, making the data look messy and numerous, and unable to intuitively reflect the overall difference between the two images. Therefore, in order to better display the overall difference information between the image to be inspected and the design draft image, the overall difference information between the image to be inspected and the design draft image can be determined in the following way:

[0155] The absolute values ​​of the differences in the R, G, B, and A channels of color difference information for each pixel in the image to be inspected and the design draft image can be averaged. This average value is then used to determine the overall difference information between the image to be inspected and the design draft image. In other words, the overall difference information between the two images can be represented as a vector, reflecting the average difference information of each color channel between the two images. The formula for calculating the overall difference information between the image to be inspected and the design draft image in this case is as follows:

[0156]

[0157] Wherein, *difference* represents the overall difference between the image to be inspected and the design draft image; ΔR, ΔG, ΔB, and ΔA are the differences in the red, green, blue, and alpha channels of each pixel in the image to be inspected compared to the corresponding pixel in the design draft image; and *n* is the number of pixels in the image to be inspected compared to the corresponding pixel in the design draft image. According to the above formula, the difference between the image to be inspected in Table 1 and the design draft image in Table 2 is (3.33, 1.33, 2, 0.03).

[0158] Understandably, in computer programming languages, pixels 1 to n can be represented as 0 to n. Here, 0 does not represent any meaning; it is merely a general expression in computer programming languages. In other formulas of this application embodiment, 1 to n can all be represented as 0 to n. Therefore, the formula for calculating the overall difference information between the image to be checked and the design draft image can be expressed in a computer as follows:

[0159]

[0160] Optionally, step 303 may be included before step 104.

[0161] Step 303: Determine the degree of color difference of each pixel in the image to be inspected based on the color difference information of each pixel.

[0162] It is understandable that the color difference information of each pixel in the image to be inspected is different from that of the corresponding pixel in the design draft image, and it is not possible to intuitively see the magnitude of the color difference of each pixel. Therefore, step 303 can determine the degree of color difference of each pixel in the image to be inspected based on the color difference information of each pixel in the image to be inspected and the corresponding pixel in the design draft image.

[0163] Specifically, step 104 can be implemented according to step 304.

[0164] Step 304: Determine the overall difference between the image to be inspected and the design draft image based on the color difference of each pixel, and define the overall difference as the overall difference information between the image to be inspected and the design draft image.

[0165] Furthermore, in step 304, the overall difference between the image to be inspected and the design draft image can be determined based on the degree of color difference corresponding to each pixel of the image to be inspected. In addition, the overall similarity between the image to be inspected and the design draft image can also be determined based on the overall difference between the two images. The overall difference and overall similarity can more intuitively reflect the magnitude of the overall difference between the image to be inspected and the design draft image, quickly determine whether the two images have a high degree of similarity, and enable the acceptance personnel to know at the first time whether the image to be inspected and the design draft image are consistent.

[0166] Optionally, step 303 can be implemented according to steps 303-1 to 303-4.

[0167] Step 303-1: Obtain the value range of the target channel in the color space. The target channel is the channel with the largest value range among all channels in the color space.

[0168] Step 303-2: Based on the value range of the target channel, determine the weighted values ​​of the channels other than the target channel in the color space according to the weighting principle. The weighting principle is that the value range of the channels other than the target channel in the color space multiplied by the weighted value is the same as the value range of the target channel.

[0169] Step 303-3: The sum of the maximum weighted difference values ​​of each channel between the two pixels with the largest color difference is determined as the maximum difference value between the two pixels with the largest color difference. The maximum weighted difference value is the product of the maximum difference value corresponding to the channel and the weighted value of the channel.

[0170] Step 303-4: The ratio of the sum of the weighted differences of each channel in the color difference information to the maximum difference value is determined as the degree of color difference of each pixel in the image to be inspected. The weighted difference is the product of the channel difference and the weighted value of the channel.

[0171] Understandably, the color difference between each pixel is the ratio of the individual pixel's color difference value to the maximum difference value. The color difference value of each pixel is obtained by superimposing the differences in the base color channel and the alpha channel of the corresponding pixel in the design draft image. Since the value ranges of the base color channel and the alpha channel in the color space are not the same, typically the red, green, and blue channels (RGB channels) range from 0 to 255, while the alpha channel (A channel) ranges from 0 to 1. The target channel with the largest value range is the red, green, and blue channel. Therefore, the difference in the A channel can be multiplied by 255, resulting in a weighted value for the A channel. This ensures that the A channel, R, G, and B channels are within the same value range before summing the values. In this case, the formula for calculating the color difference value of each pixel in the image to be inspected is as follows:

[0172] distance=|ΔR|+|ΔG|+|ΔB|+|ΔA|*255

[0173] Wherein, distance is the color difference value between each pixel in the image to be inspected and the corresponding pixel in the design draft image, and ΔR, ΔG, ΔB and ΔA are the differences in the red channel, green channel, blue channel and transparency channel between each pixel in the image to be inspected and the corresponding pixel in the design draft image, respectively.

[0174] In another implementation, step 303 can also be implemented as follows: Obtain the value range of each channel in the color space; based on the channel with the smallest value range, obtain the weighted values ​​of the other channels in the color space; then multiply the weighted values ​​of each channel by the difference, and sum them to calculate the color difference value of each pixel. In this case, the weighted value of the RGB channels is 1 / 255. The formula for calculating the color difference value of each pixel in the image to be inspected is as follows:

[0175]

[0176] In the image to be inspected and the design draft image, there are two pixels with the largest color difference. For example, when pixel A in the image to be inspected is completely transparent white, and pixel B in the design draft image is completely opaque black, the color difference between A (255, 255, 255, 0) and B (0, 0, 0, 1) reaches its maximum. The maximum difference value for each channel is (255, 255, 255, 1), the maximum weighted difference value is (255, 255, 255, 255*1), and the maximum difference value of the pixel is 255+255+255+255*1=1020. At this point, the degree of color difference of each pixel can be determined based on the color difference value of each pixel and the maximum difference value of the pixel. The following is the formula for calculating the degree of color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image:

[0177]

[0178] Where, discount is the degree of color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image, distance is the color difference value between each pixel in the image to be inspected and the corresponding pixel in the design draft image, and max is the maximum difference value between the two pixels with the largest color difference.

[0179] This technique transforms the color differences between each pixel in the image under inspection and its corresponding position in the design draft into a specific degree of color difference, allowing users to quickly and intuitively determine the magnitude of the color difference between each pixel in the image under inspection and its corresponding position in the design draft.

[0180] Furthermore, in step 304, the overall degree of difference between the image to be inspected and the design draft image can be determined according to the following formula:

[0181]

[0182] Where, discount represents the degree of color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image, different represents the overall degree of difference between the image to be inspected and the design draft image, and n represents the number of pixels in the image to be inspected and the corresponding pixel in the design draft image.

[0183] In another implementation, the median of the color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image can be determined as the overall difference between the image to be inspected and the design draft image. The specific determination method is similar to the method in step 104 of selecting the median of the color difference information between each pixel in the image to be inspected and the corresponding pixel in the design draft image as the overall difference information between the image to be inspected and the design draft image, and will not be elaborated here.

[0184] Optionally, the color similarity of each pixel can be calculated based on the degree of color difference between each pixel, and the overall similarity between the two images can be calculated based on the overall difference between the image to be inspected and the design draft image. The following are the formulas for calculating the color similarity of each pixel and the first similarity between the image to be inspected and the design draft image:

[0185] similarl = 1 - discount

[0186] similar2 = 1 - different

[0187] Wherein, similar1 represents the color similarity between each pixel in the image to be checked and the corresponding pixel in the design draft image, similar2 represents the overall similarity between the image to be checked and the design draft image, discount represents the color difference between each pixel in the image to be checked and the corresponding pixel in the design draft image, and different represents the overall difference between the image to be checked and the design draft image.

[0188] Optionally, the above-mentioned walkthrough method may also include at least one of the following steps:

[0189] Step 305: Determine the annotation map of the difference area based on the degree of color difference corresponding to each pixel in the image to be inspected.

[0190] Step 306: Determine the similarity heatmap based on the degree of color difference corresponding to each pixel in the image to be inspected.

[0191] Understandably, the difference area refers to the inconsistency between the image to be inspected and the design draft image. During the inspection process, the difference areas between the two images can be marked on the image to be inspected, so that the inspectors can intuitively see from the image which areas in the image to be inspected do not correctly reflect the design draft image, and quickly and easily clarify the degree of difference between the two images.

[0192] The color difference information between each pixel in the image to be inspected and the corresponding pixel in the design draft image may be 0 or not. A color difference of 0 between two pixels means that there is no color difference between the two pixels. Pixels with a color difference information of not 0 are the difference points. All difference points are filtered out and marked on the image to be inspected.

[0193] As shown in Table 4, these are the difference points in the processed images to be inspected from Table 3. Since ΔC and ΔE are both (0, 0, 0), there is no color difference between pixel C1 in the image to be inspected and pixel C2 in the design draft image. Therefore, C1 is not a difference point. Similarly, E1 is not a difference point either.

[0194] Table 4. Differences in the images to be inspected

[0195] A1 B1 D1 F1

[0196] Since the number of differences between the image to be inspected and the design draft image is often very large and dense, the difference area annotation map will look messy and cannot properly show the difference area between the image to be inspected and the design draft image. Therefore, step 305 can be implemented as step 305-1.

[0197] Step 305-1: Determine the region formed by each adjacent difference point among the difference points as a difference region, and mark the region in the image to be inspected according to the difference region to obtain a difference region marking map.

[0198] As one implementation method, the location of the difference points can be represented by coordinates. The image to be inspected is placed in a Cartesian coordinate system, and the coordinates of each pixel are represented as (posX, posY). The pixel at the top-left corner of the image is the origin, with coordinates (0, 0). This yields the coordinates of all difference points. All adjacent difference points are defined as a difference region, as shown in Table 4. Difference points A1, B1, and D1 form a difference region, while difference point F1 is a separate difference region. Each difference region is marked on the image to be inspected, and the coordinates of all difference points within that region can be output and displayed.

[0199] To better demonstrate the differences between the various regions and the degree of difference between them to users, each region can output an array to represent its attribute information. In addition, to make it easier and more convenient to annotate the regions and obtain a more regular and aesthetically pleasing annotated map of the regions, step 305-1 may also include any one of steps 305-1-1 to 305-1-3.

[0200] Step 305-1-1: Calculate the width, height, starting horizontal position, and starting vertical position of each of the difference regions, and mark the rectangular regions in the image to be inspected that match the width, height, starting horizontal position, and starting vertical position to obtain the difference region annotation map.

[0201] Understandably, in each difference region of the image to be inspected, the coordinates of all difference points have been obtained. Specifically, the posX value Xmax of difference point A (maximum posX value), the posX value Xmin of difference point B (minimum posX value), the posY value Ymax of difference point C (maximum posY value), and the posY value Ymin of difference point D (minimum posY value) are obtained. Therefore, the width of the Mth difference region is Xmax - Xmin, and the height is Ymax - Ymin. Since the difference points in each difference region are different, the obtained width and height of each difference region are also different.

[0202] Furthermore, such as Figure 5 The image shown is an actual effect diagram of a difference region annotation map provided in an embodiment of this application. Based on the width, height, starting horizontal position (i.e., Ymin where the posY value is smallest), and starting vertical position (i.e., Xmin where the posX value is smallest) of each difference region, annotations are made in the image to be inspected, resulting in a difference region annotation map labeled as rectangles. This technique quickly obtains the width and height of each difference region, intuitively showing the size of each difference region, and provides a more regular annotation of the difference regions in the image to be inspected, making the difference region annotation map more aesthetically pleasing.

[0203] Step 305-1-2: Calculate the center position and the longest boundary connecting line of the difference region. Mark a circular region in the image to be inspected with the center position as the center and the longest boundary connecting line as the diameter to obtain the difference region annotation map.

[0204] As one implementation method, the two farthest difference points i and j in the Mth difference region can be obtained, with coordinates i as (x1, y1) and j as (x2, y2). The midpoint of the line connecting i and j is used to determine the center position of the Mth difference region, and the line connecting i and j is used as the diameter of the difference region. The coordinates of the center position are ((x1+x2) / 2, (y1+y2) / 2). The formula for calculating the diameter of the difference region is as follows:

[0205]

[0206] The furthest difference points in each difference region are not the same, nor are the center coordinates of each difference region. In this case, each difference region can be marked in the image to be inspected based on its center coordinates and its diameter. The difference region is marked as a circle, where the center of the difference region is the center of the circle, and the diameter of the difference region is the diameter of the circle.

[0207] Step 305-1-3: Mark the difference areas in the image to be inspected to obtain a difference area annotation map.

[0208] In another implementation, the difference points on the boundary of a difference region can be connected in the image to be inspected, and all the difference points in the difference region can be included in the area of ​​the boundary difference point connection, thereby marking the difference region.

[0209] Optionally, step 305 may also include the following steps:

[0210] The overall degree of difference in the region is determined by the degree of difference at each point within the region.

[0211] Understandably, the image to be inspected is divided into many difference regions, each containing different difference points. The degree of color difference at each difference point is not uniform, therefore the overall degree of difference for each difference region is also not uniform. The overall degree of difference for a difference region is obtained based on the color difference of all difference points within that region. This method is the same as the method used in step 304 to determine the overall degree of difference between the image to be inspected and the design draft image based on the color difference of each pixel, and will not be elaborated upon here.

[0212] Furthermore, the overall similarity of each difference region can be obtained based on the overall degree of difference among them. This technique allows for precise acquisition of the degree of difference and similarity of each difference region, clearly defining the magnitude of the difference and similarity between each difference region in the image to be inspected and its corresponding region in the design draft image.

[0213] Understandably, in specific implementations, the width, height, starting x-coordinate, starting y-coordinate, center position coordinates, diameter, degree of difference, and degree of similarity of each difference region can be output and displayed to the user as attribute information of the difference region, such as... Figure 4 The image shown is an example of returned data for attribute information of a difference region provided in an embodiment of this application.

[0214] This technique allows the attribute information of each difference region to be represented by a set of defined values. This set of values ​​visually displays the size of the corresponding difference region, its position in the image to be inspected, and the degree of difference or similarity of the difference region. At the same time, it produces a more regular and aesthetically pleasing difference region annotation map, which intuitively and accurately displays the results of the walkthrough.

[0215] Understandably, if the differences between the image to be inspected and the design draft image are significant, using a difference region annotation map to display the differences between the two images would result in a large number of marked difference regions in the image to be inspected, making the displayed difference region annotation map overly complex. In this case, it would be difficult for users to intuitively understand the degree of difference and similarity between each pixel in the image to be inspected and the corresponding pixels in the design draft image. A heatmap refers to an image that displays certain areas in a specially highlighted form. Heatmaps can be used to display data distribution through data visualization software. Therefore, in this embodiment, a similarity heatmap can also be used to display the degree of difference and similarity between each pixel in the image to be inspected and the corresponding pixels in the design draft image, using a specially highlighted form.

[0216] Optionally, step 306 can be implemented according to steps 306-1 to 306-2.

[0217] Step 306-1: Obtain the first preset color value corresponding to the difference level of 0 and the second preset color value corresponding to the difference level of 100% in the similarity heatmap.

[0218] Creating a similarity heatmap first requires obtaining the heatmap color value of each pixel. However, the degree of color difference between each pixel in the image under inspection and its corresponding position in the design draft image may not be the same; therefore, the heatmap color values ​​of each pixel may not be identical. The heatmap color value of a pixel in the similarity heatmap reflects the degree of difference (similarity) between each pixel in the image under inspection and its corresponding position in the design draft image. For example, completely opaque blue can be set as the color of the similarity heatmap when the color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image is 0 (i.e., the color similarity of the pixels is 100%), and the RGBA value (0, 0, 255, 1) of completely opaque blue can be defined as the first preset heatmap color value, and completely opaque red can be set as the color of the similarity heatmap when the color difference between each pixel in the image to be inspected and the corresponding pixel in the design draft image is 100% (i.e., the color similarity of the pixels is 0%), and the RGBA value (255, 0, 0, 1) of completely opaque red can be defined as the second preset heatmap color value. In the similarity heatmap, the closer the color is to blue, the higher the similarity between the corresponding area in the image to be checked and the corresponding area in the design draft image. A blue area indicates that the similarity between the corresponding area in the image to be checked and the corresponding area in the design draft image is 100%. The closer the color is to red, the lower the similarity between the corresponding area in the image to be checked and the corresponding area in the design draft image. A red area indicates that the similarity between the corresponding area in the image to be checked and the corresponding area in the design draft image is 0.

[0219] Understandable. Figure 6 In this embodiment, the similarity heatmap is represented by a grayscale image. In specific implementations, different colors are used to display the degree of similarity between different areas of the image to be inspected and the design draft image. The first and second preset heatmap color values ​​can also be customized according to the user's display needs. For example, completely opaque black can be defined as the color of the similarity heatmap when the similarity between two images is 100%, and completely opaque white can be defined as the color of the similarity heatmap when the similarity between two images is 0%. This embodiment does not specifically limit the color of the similarity heatmap.

[0220] Step 306-2: Determine the heatmap color value of each pixel in the image to be inspected based on the color determination principle. The color determination principle is that the degree of color difference corresponding to the pixel is proportional to the first difference and inversely proportional to the second difference. The first difference is the difference between the heatmap color value of the pixel and the first preset color value, and the second difference is the difference between the heatmap color value of the pixel and the second preset color value.

[0221] Understandably, the smaller the difference between the heatmap color value and the first preset color value of a pixel (i.e., the closer the heatmap color value is to the first preset color with a difference of 0), the smaller the color difference between the pixel in the image to be inspected and the corresponding pixel in the design draft image. Conversely, the smaller the difference between the heatmap color value and the second preset color value of a pixel (i.e., the closer the heatmap color value is to the second preset color with a difference of 100%), the greater the color difference between the pixel in the image to be inspected and the corresponding pixel in the design draft image. Therefore, the degree of color difference corresponding to a pixel is directly proportional to the difference between the heatmap color value and the first preset color value, and inversely proportional to the difference between the heatmap color value and the second preset color value.

[0222] Optionally, step 306-2 can also use the following formula to determine the heatmap color value of each pixel:

[0223] heatcolor=(differentcolor-samecolor)×discount+samecolor

[0224] Wherein, heatcolor is the heatmap color value of the pixel, differentcolor is the second preset color value, samecolor is the first preset color value, and discount is the degree of color difference.

[0225] Specifically, the image to be inspected and the design draft image are placed on the same display screen and overlaid. The bottom layer is the design draft layer, and the top layer is the image to be inspected. The image to be inspected and the design draft layer are independent layers. Based on the heatmap color values ​​of each pixel, the colors of each pixel on the image to be inspected are redrawn. Finally, a similarity heatmap that can show the degree of difference (similarity) between the image to be inspected and the design draft image is obtained.

[0226] As one implementation method, when displaying differences, a transparency channel (A channel) can be set on the similarity heatmap. Users can adjust the value of the A channel according to their needs to achieve various display effects of the similarity heatmap, making it clearer for users to see the differences between the image to be checked and the design draft image. For example, if users want to see a clear similarity heatmap, they can increase the value of the A channel. When the value of the A channel is 1, the similarity heatmap is the clearest. When the value of the A channel is reduced to 0.2, the color of the similarity heatmap becomes lighter. When the value of the A channel is reduced to 0, the similarity heatmap becomes completely transparent.

[0227] After steps 305 and 306 determine the difference region annotation map and the similarity heatmap, the difference region annotation map and the similarity heatmap can be displayed on a display device so that users can view the difference region annotation map and the similarity heatmap that can intuitively show the degree of difference (similarity) between each region between the image to be inspected and the design draft image.

[0228] Corresponding to the walkthrough method provided in the first embodiment of this application, the second embodiment of this application also provides a walkthrough device, such as... Figure 8 As shown, the device includes:

[0229] Unit 801 is used to acquire design draft images;

[0230] The first determining unit 802 is used to determine the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image;

[0231] The comparison unit 803 is used to compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0232] The second determining unit 804 is used to determine the overall difference information between the image to be inspected and the design draft image based on the color difference information.

[0233] Optionally, the comparison unit 803 is specifically used to: when it is found that the number of pixels in the image to be inspected and the design draft image are the same in the width direction, compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image.

[0234] Optionally, the comparison unit 803 is further configured to: if the number of pixels in the height direction of the image to be inspected and the design draft image are different, then the first image is cropped in the height direction so that the number of pixels in the cropped image is the same as that in the height direction of the second image. The first image is the image with more pixels in the height direction between the image to be inspected and the design draft image, and the second image is the image other than the first image between the image to be inspected and the design draft image. The color information of each pixel in the cropped image is compared with the corresponding pixel in the second image. If the number of pixels in the height direction of the image to be inspected and the design draft image is the same, then the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image.

[0235] Optionally, the comparison unit 803 is further configured to: crop pixels from the bottom and / or top of the first image in the height direction.

[0236] Optionally, the second determining unit 804 is specifically used to: determine the degree of color difference corresponding to each pixel of the image to be inspected based on the color difference information, determine the overall degree of difference between the image to be inspected and the design draft image based on the degree of color difference, and determine the overall degree of difference as the overall difference information between the image to be inspected and the design draft image.

[0237] Optionally, the second determining unit 804 is further specifically used to: determine the maximum difference value between two pixels with the largest color difference based on the maximum difference value of each channel between the two pixels with the largest color difference; and determine the degree of color difference corresponding to each pixel of the image to be inspected based on the difference value of each channel value in the color difference information and the maximum difference value.

[0238] Optionally, the device further includes:

[0239] The third determining unit is used to obtain the value range of the target channel in the color space. The target channel is the channel with the largest value range among all channels in the color space. Based on the value range of the target channel, the weighted values ​​of the channels other than the target channel in the color space are determined according to a weighting principle. The weighting principle is that the value range of the channels other than the target channel in the color space multiplied by the weighted value is the same as the value range of the target channel. The sum of the maximum weighted difference values ​​of each channel between the two pixels with the largest color difference is determined as the maximum difference value between the two pixels with the largest color difference. The maximum weighted difference value is the product of the maximum difference value corresponding to the channel and the weighted value of the channel. The ratio of the sum of the weighted differences corresponding to each channel in the color difference information to the maximum difference value is determined as the degree of color difference corresponding to each pixel of the image to be inspected. The weighted difference is the product of the channel difference value corresponding to the channel and the weighted value of the channel.

[0240] Optionally, the device further includes:

[0241] The fourth determining unit is used to determine a difference region annotation map based on the degree of color difference corresponding to each pixel of the image to be inspected, or to determine a similarity heatmap based on the degree of color difference corresponding to each pixel of the image to be inspected.

[0242] Optionally, the fourth determining unit is specifically used to: filter out pixels in the image to be inspected whose color difference is not zero as difference points, determine the region formed by each adjacent difference point as a difference region, and mark the region in the image to be inspected according to the difference region to obtain a difference region marking map.

[0243] Optionally, the fourth determining unit is further specifically used to: calculate the width, height, and starting position of each of the difference regions, and mark a rectangular region in the image to be inspected that matches the width, height, and starting position to obtain a difference region annotation map; or, calculate the center position and the longest boundary connecting line of the difference region, and mark a circular region in the image to be inspected with the center position as the center and the longest boundary connecting line as the diameter to obtain a difference region annotation map; or, mark the difference regions in the image to be inspected to obtain a difference region annotation map.

[0244] Optionally, the fourth determining unit is further configured to: determine the overall degree of difference corresponding to the difference region based on the degree of difference corresponding to each difference point within the difference region.

[0245] Optionally, the fourth determining unit is further configured to: determine the heatmap color value of each pixel based on the degree of color difference corresponding to each pixel in the image to be inspected, and determine a similarity heatmap based on the heatmap color value of each pixel.

[0246] Optionally, the fourth determining unit is further specifically used to: obtain a first preset color value corresponding to a difference of 0 and a second preset color value corresponding to a difference of 100% in the similarity heatmap; and determine the heatmap color value of each pixel in the image to be inspected based on a color determination principle, wherein the color determination principle is that the color difference corresponding to the pixel is proportional to a first difference and inversely proportional to a second difference, the first difference being the difference between the heatmap color value of the pixel and the first preset color value, and the second difference being the difference between the heatmap color value of the pixel and the second preset color value.

[0247] Optionally, the fourth determining unit is further configured to: determine the heatmap color value of each pixel in the image to be inspected using the following formula:

[0248] hearcolor=(mincolor-maxcolor)×discount+maxcolor

[0249] Wherein, heatcolor is the color value of the heat map, differentcolor is the second preset color value, samecolor is the first preset color value, and discount is the degree of color difference.

[0250] Corresponding to the walkthrough method provided in the first embodiment of this application, the third embodiment of this application also provides an electronic device for performing walkthroughs, such as... Figure 9 As shown, the electronic device includes: a processor 901; and a memory 902 for storing data processing programs and a program for storing a walkthrough method. After the device is powered on and the program for the walkthrough method is run by the processor, the following steps are performed:

[0251] Obtain design draft images;

[0252] Identify the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image;

[0253] The color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0254] The overall difference information between the image to be inspected and the design draft image is determined based on the color difference information provided.

[0255] Corresponding to the walkthrough method provided in the first embodiment of this application, the fourth embodiment of this application provides a computer-readable storage medium storing a program for the walkthrough method, which is executed by a processor to perform the following steps:

[0256] Obtain design draft images;

[0257] Identify the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image;

[0258] The color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image to obtain the color difference information of each pixel.

[0259] The overall difference information between the image to be inspected and the design draft image is determined based on the color difference information provided.

[0260] For a detailed description of the apparatus, electronic device, and computer-readable storage medium provided in the second, third, and fourth embodiments of this application, please refer to the relevant description of the first embodiment of this application, which will not be repeated here.

[0261] Although this application discloses preferred embodiments as described above, it is not intended to limit this application. Any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of this application. Therefore, the scope of protection of this application should be determined by the scope defined in the claims of this application.

[0262] In a typical configuration, a node device in a blockchain includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0263] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0264] 1. Computer-readable media includes both permanent and non-permanent, removable and non-removable media that can store information by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage media, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include non-transitory computer-readable media, such as modulated data signals and carrier waves.

[0265] 2. Those skilled in the art will understand that embodiments of this application can be provided as methods, systems, or computer program products. Therefore, this application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0266] Although this application discloses preferred embodiments as described above, it is not intended to limit this application. Any person skilled in the art can make possible changes and modifications without departing from the spirit and scope of this application. Therefore, the scope of protection of this application should be determined by the scope defined in the claims of this application.

Claims

1. A walkthrough method, characterized in that, The method includes: Obtain design draft images; Identify the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image; Determine whether the number of pixels in the width direction of the image to be inspected and the design draft image are the same. When it is found that the number of pixels in the width direction of the image to be inspected and the design draft image are the same, compare the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image to obtain the color difference information corresponding to each pixel. Based on the color difference information, determine the overall difference information between the image to be inspected and the design draft image; The step of comparing the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image includes: If the number of pixels in the height direction of the image to be inspected is different from that of the design draft image, then the first image is cropped in the height direction so that the number of pixels in the height direction of the cropped image is the same as that of the second image. The first image is the image with more pixels in the height direction between the image to be inspected and the design draft image, and the second image is the image other than the first image between the image to be inspected and the design draft image. The color information of each pixel in the cropped image is compared with the corresponding pixel in the second image. If the number of pixels in the height direction of the image to be inspected is the same as that of the design draft image, then the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image. The step of cropping the first image by pixels in the height direction includes: Pixels are cropped from the bottom and / or top of the first image in the height direction.

2. The method according to claim 1, characterized in that, The color information includes the channel values ​​of the color space to which the pixel belongs, and the color difference information includes the difference between the channel values.

3. The method according to claim 2, characterized in that, The color space includes basic color channels and alpha channels. The color information includes values ​​for each basic color channel and alpha channel. The color difference information includes the difference between values ​​for each basic color channel and the difference between values ​​for each alpha channel.

4. The method according to claim 3, characterized in that, Before determining the overall difference information between the image to be inspected and the design draft image based on the color difference information, the method further includes: The degree of color difference corresponding to each pixel of the image to be inspected is determined based on the color difference information provided. The step of determining the overall difference information between the image to be inspected and the design draft image based on the color difference information includes: The overall difference between the image to be inspected and the design draft image is determined based on the degree of color difference, and the overall difference is defined as the overall difference information between the image to be inspected and the design draft image.

5. The method according to claim 4, characterized in that, The step of determining the degree of color difference corresponding to each pixel point of the image to be inspected based on the color difference information includes: The maximum difference between two pixels with the greatest color difference is determined based on the maximum difference in each channel between the two pixels with the greatest color difference. Based on the differences between the channel values ​​in the color difference information and the maximum difference value, the degree of color difference corresponding to each pixel in the image to be inspected is determined.

6. The method according to claim 5, characterized in that, Before determining the maximum difference value between two pixels with the largest color difference based on the maximum difference value of each channel between the two pixels with the largest color difference, the method further includes: Obtain the value range of the target channel in the color space, wherein the target channel is the channel with the largest value range among all channels corresponding to the color space; Based on the value range of the target channel, the weighted values ​​of the channels other than the target channel in the color space are determined according to a weighting principle, wherein the weighting principle is that the value range of the channels other than the target channel in the color space multiplied by the weighted value is the same as the value range of the target channel. The step of determining the maximum difference value between two pixels with the largest color difference based on the maximum difference value of each channel between the two pixels with the largest color difference includes: The maximum difference between the two pixels with the largest color difference is determined by the sum of the maximum weighted difference values ​​of each channel between the two pixels with the largest color difference. The maximum weighted difference value is the product of the maximum difference value of the channel and the weighted value of the channel. The step of determining the degree of color difference corresponding to each pixel of the image to be inspected based on the difference between the channel values ​​in the color difference information and the maximum difference value includes: The ratio of the sum of the weighted differences corresponding to each channel in the color difference information to the maximum difference value is determined as the degree of color difference corresponding to each pixel in the image to be inspected. The weighted difference is the product of the channel difference corresponding to the channel and the weighted value of that channel.

7. The method according to claim 5, characterized in that, The method further includes: Based on the degree of color difference corresponding to each pixel in the image to be inspected, a map of the difference region is determined; or A similarity heatmap is determined based on the degree of color difference corresponding to each pixel in the image to be inspected.

8. The method according to claim 7, characterized in that, The step of determining the difference region annotation map based on the color difference information corresponding to each pixel of the image to be inspected includes: Pixels in the image to be inspected whose color difference is not zero are selected as difference points. The region formed by each adjacent difference point among the aforementioned difference points is defined as a difference region; Based on the differences, regions are labeled in the image to be inspected to obtain a region labeling map.

9. The method according to claim 8, characterized in that, The step of annotating the image to be inspected based on the differences to obtain a difference region annotation map includes: Calculate the width, height, starting horizontal position, and starting vertical position of each of the aforementioned difference regions, and mark rectangular regions in the image to be inspected that match the width, height, starting horizontal position, and starting vertical position to obtain a difference region annotation map; Alternatively, calculate the center position and the longest boundary connecting line of the difference region, and mark a circular region in the image to be inspected with the center position as the center and the longest boundary connecting line as the diameter to obtain a difference region annotation map; Alternatively, the difference regions can be marked in the image to be inspected to obtain a difference region annotation map.

10. The method according to claim 9, characterized in that, The method further includes: The overall degree of difference in the region is determined based on the degree of difference at each point within the region.

11. The method according to claim 8, characterized in that, The step of determining a similarity heatmap based on the degree of color difference corresponding to each pixel of the image to be inspected includes: The heatmap color value of each pixel is determined based on the degree of color difference corresponding to each pixel in the image to be inspected. The similarity heatmap is determined based on the heatmap color values ​​of each pixel.

12. The method according to claim 11, characterized in that, The step of determining the heatmap color value of each pixel based on the degree of color difference corresponding to each pixel in the image to be inspected includes: Obtain the first preset color value corresponding to a difference of 0 and the second preset color value corresponding to a difference of 100% in the similarity heatmap; The heatmap color value of each pixel in the image to be inspected is determined based on the color determination principle. The color determination principle is that the degree of color difference corresponding to the pixel is proportional to a first difference and inversely proportional to a second difference. The first difference is the difference between the heatmap color value of the pixel and the first preset color value, and the second difference is the difference between the heatmap color value of the pixel and the second preset color value.

13. The method according to claim 12, characterized in that, The process of determining the heatmap color value of each pixel in the image to be inspected based on color determination principles includes: The heatmap color value of each pixel in the image to be inspected is determined using the following formula: r in, The color values ​​of the heatmap, The second preset color value, The first preset color value, The degree of color difference.

14. A walking inspection device, characterized in that, The device includes: The acquisition unit is used to acquire design draft images; The first determining unit is used to determine the image to be inspected corresponding to the design draft image; wherein, the image to be inspected is a screenshot of the interface to be inspected when it is displayed on a display device, and the interface to be inspected is developed based on the design draft image; Comparison unit, used for discrimination The image to be inspected and the design draft image The number of pixels in the width direction is the same. When it is found that the number of pixels in the image to be inspected and the design draft image are the same in the width direction, the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image to obtain the color difference information of each pixel. The second determining unit is used to determine the overall difference information between the image to be inspected and the design draft image based on the color difference information. The step of comparing the color information of each pixel in the image to be inspected with the corresponding pixel in the design draft image includes: If the number of pixels in the height direction of the image to be inspected is different from that of the design draft image, then the first image is cropped in the height direction so that the number of pixels in the height direction of the cropped image is the same as that of the second image. The first image is the image with more pixels in the height direction between the image to be inspected and the design draft image, and the second image is the image other than the first image between the image to be inspected and the design draft image. The color information of each pixel in the cropped image is compared with the corresponding pixel in the second image. If the number of pixels in the height direction of the image to be inspected is the same as that of the design draft image, then the color information of each pixel in the image to be inspected is compared with the corresponding pixel in the design draft image. The step of cropping the first image by pixels in the height direction includes: Pixels are cropped from the bottom and / or top of the first image in the height direction.

15. An electronic device, characterized in that, include: processor; as well as A memory for storing a data processing program, which, when the electronic device is powered on and runs through the processor, executes the method as described in any one of claims 1-13.

16. A computer-readable storage medium, characterized in that, The system contains a data processing program that is executed by a processor to perform the method as described in any one of claims 1-13.

Images