Page making effect analysis method, device, equipment and medium

Abstract

The embodiment of the application discloses a page production effect analysis method, device, equipment and medium, wherein the page production effect analysis method comprises: generating a to-be-analyzed page picture based on a to-be-analyzed page, and obtaining an effect reference page picture; performing picture segmentation processing on the to-be-analyzed page picture and the effect reference page picture as picture comparison and analysis objects to obtain a plurality of comparison picture groups; performing pixel analysis on each comparison picture group respectively, determining and displaying different pixel points in each comparison picture group, and completing page production effect analysis. The technical scheme of the embodiment realizes relatively convenient and more accurate analysis of the production effect of the page, improves the automation degree of page effect comparison and analysis, can quickly locate different points, and thus improves the efficiency of page development.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of user interface design technology, and in particular to a method, apparatus, device and medium for analyzing page creation effects. Background Technology

[0002] When developing user-interactive pages, developers compare the initial page design with pre-designed reference mockups to determine the differences between the developed page and the original design, and then adjust the page design accordingly. This process often involves overlaying the final page mockup with the reference mockup, adjusting the transparency of the two mockups, and then having the developers manually compare the differences.

[0003] However, in the process of realizing this invention, it was found that the prior art has at least the following technical problems: when the background color of the page effect image to be compared and analyzed is light or the page content is complex, the visual perception is poor, which is not conducive to the comparison by developers; and the automation level is low in the process of comparing and analyzing the page development effect, resulting in low page development efficiency. Summary of the Invention

[0004] This invention provides a method, apparatus, device, and medium for analyzing page creation effects, which can improve the automation level of page effect comparison and analysis, quickly locate differences, and thus improve the efficiency of page development.

[0005] In a first aspect, embodiments of the present invention provide a method for analyzing page creation effects, the method comprising:

[0006] Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect;

[0007] The image of the page to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation to obtain multiple comparison image groups;

[0008] Pixel analysis is performed on each of the comparison image groups to identify and display the different pixels in each comparison image group, thus completing the page production effect analysis.

[0009] Secondly, embodiments of the present invention also provide a page creation effect analysis device, the device comprising:

[0010] The analysis object acquisition module is used to generate an image of the page to be analyzed based on the page to be analyzed, and to obtain an image of the reference page for the effect.

[0011] The analysis object preprocessing module is used to perform image segmentation processing on the page image to be analyzed and the effect reference page image as image comparison analysis objects to obtain multiple comparison image groups;

[0012] The analysis object module is used to perform pixel analysis on each of the comparison image groups, identify and display the different pixels in each comparison image group, and complete the page production effect analysis.

[0013] Thirdly, embodiments of the present invention also provide a computer device, the computer device comprising:

[0014] One or more processors;

[0015] Memory, used to store one or more programs;

[0016] When the one or more programs are executed by the one or more processors, the one or more processors implement the page creation effect analysis method provided in any embodiment of the present invention.

[0017] Fourthly, embodiments of the present invention also provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page creation effect analysis method as provided in any embodiment of the present invention.

[0018] The technical solution of this embodiment generates an image of the page to be analyzed based on the page to be analyzed, and obtains a reference page image. The image of the page to be analyzed and the reference page image are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups. Pixel analysis is performed on each comparison image group to determine and display the different pixels in each comparison image group, thus completing the page production effect analysis. The technical solution of this embodiment achieves a more convenient and accurate analysis of the page production effect, improves the automation level of page effect comparison and analysis, and can quickly locate differences, thereby improving the efficiency of page development. Attached Figure Description

[0019] Figure 1 A flowchart illustrating a page creation effect analysis method provided in an embodiment of the present invention;

[0020] Figure 2 A flowchart illustrating a page creation effect analysis method provided in an embodiment of the present invention;

[0021] Figure 3 A flowchart illustrating a page creation effect analysis method provided in an embodiment of the present invention;

[0022] Figure 4 A flowchart illustrating a page creation effect analysis method provided in an embodiment of the present invention;

[0023] Figure 5 A flowchart of an optional embodiment of a page creation effect analysis method provided by an embodiment of the present invention;

[0024] Figure 6 This is a schematic diagram of the structure of a page creation effect analysis device provided in an embodiment of the present invention;

[0025] Figure 7 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0026] The present invention will now be described in further detail with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the invention and not intended to limit it. Furthermore, it should be noted that, for ease of description, the accompanying drawings show only the parts relevant to the present invention, and not all of the structures.

[0027] Figure 1 This is a flowchart illustrating a method for analyzing page creation effects according to an embodiment of the present invention. This embodiment is applicable to scenarios involving the analysis of page creation effects. The method can be executed by a page creation effect analysis device, which can be implemented in software and / or hardware and integrated into a computer device with application development capabilities.

[0028] like Figure 1 As shown, the page creation effect analysis method in this embodiment includes the following steps:

[0029] S110. Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect.

[0030] The page to be analyzed can be understood as the front-end display page that needs to be analyzed. The front-end display page is the page rendered and displayed by the browser. Optionally, the page to be analyzed can be an HTML (HyperText Markup Language) page. During the process of front-end developers developing the page according to business requirements, it is necessary to analyze the initially completed front-end display page to determine the differences from the front-end display page design, and then adjust the initially completed front-end display page to obtain the final front-end display page.

[0031] The images on the page to be analyzed can be images generated based on the page and required for analysis. The reference page images can be understood as reference images that match the page's display effect. In practical applications, the reference page images are usually pre-designed mockups of the page's display.

[0032] In this embodiment, the page to be analyzed can be obtained by acquiring the front-end encoding file corresponding to the page to be analyzed; then, by running the front-end encoding file through a browser, the browser displays the page to be analyzed, thus obtaining the page to be analyzed. Optionally, the front-end encoding file corresponding to the page to be analyzed can be obtained by determining a storage location for storing the front-end encoding file corresponding to the page to be analyzed, and reading the front-end encoding file from the storage location.

[0033] As an optional implementation of this embodiment, generating an image of the page to be analyzed based on the page to be analyzed may include: analyzing the page to be analyzed to determine the page components and the element styles of the page components. Then, the page components can be rendered using the corresponding element styles, thereby generating a rendered image. This rendered image is the image of the page to be analyzed. The page components can be understood as the tag elements that constitute the page. Optionally, the page elements can be HTML tag elements, including but not limited to separator tags, title tags, and form tags. Element styles can be understood as the display style of the page elements. Taking a title tag element as an example, the element style may include at least one of font size, font color, font type, and font style.

[0034] In practical applications, the number of page components in the page to be analyzed is usually multiple. Generating an image of the page to be analyzed based on the page to be analyzed can include: according to the hierarchical relationship between the page components; rendering each page component with a corresponding element style according to the hierarchical relationship. This results in a rendered image, which is then used as the image of the page to be analyzed.

[0035] As another optional implementation of this embodiment, generating an image of the page to be analyzed based on the page to be analyzed may include: taking a screenshot of the page to be analyzed, thereby generating an image of the page to be analyzed. Specifically, the page to be analyzed can be captured using a preset image screenshot tool, thereby generating an image of the page to be analyzed.

[0036] In this embodiment, obtaining the effect reference page image may include: obtaining a preset page display effect image of the page to be analyzed, and using the preset page display effect image as the effect reference page image. The preset page display effect image can be understood as an effect image pre-designed for the page display effect. Optionally, obtaining the preset page display effect image of the page to be analyzed may include: receiving a preset page display effect image uploaded by a user for the page to be analyzed.

[0037] S120. The image to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups.

[0038] In this context, the image comparison analysis object can be understood as any object capable of image comparison analysis. The comparison image group can be a group of comparison images obtained by segmenting the image of the page to be analyzed and the image of the reference page as image comparison analysis objects. In this embodiment, using the image of the page to be analyzed and the image of the reference page as image comparison analysis objects for image segmentation processing can improve the fine-grainedness of page creation effect analysis.

[0039] In this embodiment, the image segmentation process, which uses the image to be analyzed and the image of the reference page as image comparison and analysis objects, may include: using the image to be analyzed and the image of the reference page as image comparison and analysis objects, and performing image segmentation processing at a preset segmentation ratio. It should be noted that the preset segmentation ratio can be a preset equal ratio or a preset non-equal ratio, and can be set according to actual needs; it is not specifically limited here.

[0040] To improve the analysis results of page creation effects, the image of the page to be analyzed and the image of the reference page are used as image comparison and analysis objects for image segmentation processing. This can include: aligning and adjusting the image content of the image of the page to be analyzed and the image of the reference page; when the image content of the image of the page to be analyzed and the image of the reference page are aligned, they can be used as image comparison and analysis objects for image segmentation processing. The advantage of this is that it avoids the influence of image edge white space on the analysis results, further improving the accuracy of page creation effect analysis. Optionally, the image content alignment and adjustment processing can include at least one of image movement processing, image scaling processing, and image rotation processing.

[0041] S130. Perform pixel analysis on each of the comparison image groups, identify and display the different pixels in each comparison image group, and complete the page production effect analysis.

[0042] In this embodiment, the advantage of performing pixel analysis on the comparison image group is that it can more accurately and effectively identify the brightness and color of pixels in the comparison image group, thereby determining the differences between the two.

[0043] Specifically, for each set of comparison images, pixel analysis can be performed. This yields the pixel analysis results for the comparison image set. Based on these results, the different pixels within the comparison image set can be identified. After identifying the different pixels, they can be displayed. This completes the analysis of the page design effect. The pixel analysis results can include both identical and different pixels within the comparison image set.

[0044] In one optional implementation, after generating an image of the page to be analyzed based on the page to be analyzed and obtaining an image of the effect reference page, the image of the page to be analyzed and the image of the effect reference page can be added as document objects and displayed in a preset page creation effect analysis interactive page; the display parameters of the image of the page to be analyzed and the image of the effect reference page can be adjusted to align the image content of the image of the page to be analyzed and the image of the effect reference page.

[0045] Here, the document object refers to the Document object in the HTML file, i.e., the DOM object. The preset page creation effect analysis interactive page can be understood as a pre-set page for interactive analysis of the page creation effect. Display parameters can be used to adjust the display information of the images on the page to be analyzed and the reference page images. For example, display parameters can be offsets, spacing, etc. Display information can include image display size, image display position, image transparency, etc.

[0046] In this embodiment, the image of the page to be analyzed and the image of the reference page are added as document objects and displayed in the preset page creation effect analysis interactive page. This can be understood as displaying the image of the page to be analyzed and the image of the reference page as document objects within the preset page creation effect analysis interactive page. The advantage of this approach is that it enables a visual display of the page creation effect analysis.

[0047] Based on the above embodiments, after the image of the page to be analyzed and the image of the effect reference page are displayed in the preset page creation effect analysis interactive page, the display parameters of the image of the page to be analyzed and the image of the effect reference page can be adjusted to achieve visual adjustment of the images. This may include: adjusting the display parameters of the image of the page to be analyzed in the preset page creation effect analysis interactive page; and / or, adjusting the display parameters of the image of the effect reference page in the preset page creation effect analysis interactive page to align the image content of the image of the page to be analyzed with the image content of the image of the effect reference page.

[0048] In this embodiment of the invention, adjusting the display parameters of the page image to be analyzed and the effect reference page image may include: adjusting the display parameters of the effect reference page image with reference to the display parameters of the page image to be analyzed; or, adjusting the display parameters of the page image to be analyzed with reference to the display parameters of the effect reference page image; or, adjusting the display parameters of the page image to be analyzed first, and then adjusting the display parameters of the effect reference page image; or, adjusting the display parameters of the effect reference page image first, and then adjusting the display parameters of the page image to be analyzed.

[0049] In this embodiment, the method further includes: displaying at least one image adjustment function control in a preset page creation effect analysis interactive page; when any of the image adjustment function controls is triggered, making corresponding adjustments to the page image to be analyzed; and comparing and analyzing the adjusted page image to be analyzed and the effect reference page image as updated image comparison and analysis objects.

[0050] The preset page creation effect analysis interactive page can include one or more image adjustment function controls, facilitating image processing operations for users during page development. These image adjustment function controls can be understood as controls used to adjust the position of the images on the page to be analyzed within the display area. For example, before the first image segmentation, the images on the page to be analyzed and the reference page images are left-aligned by default. After adjustment, they can be aligned to the right, adjusting the position of each image within its corresponding display area. This allows for comparative analysis using right alignment. The preset page creation effect analysis results obtained after multiple adjustments by the user and comparison of the image files are more comprehensive, more reliable, and more valuable for subsequent page development adjustments.

[0051] In one embodiment, if the preset page creation effect analysis interactive page may include an image adjustment function control, upon receiving a control trigger operation applied to the image adjustment function control, the editing state of the image of the page to be analyzed can be adjusted to an editable state. The adjustment operation for the image of the page to be analyzed is received. Then, based on the adjustment operation, the image of the page to be analyzed can be adjusted.

[0052] In another embodiment, if the preset page creation effect analysis interactive page includes an image adjustment function control, different image adjustment function controls have different image adjustment functions; that is, different image adjustment function controls adjust the image of the page to be analyzed in different ways. When any of the image adjustment function controls is triggered, the image of the page to be analyzed can be adjusted accordingly based on the adjustment function of the triggered image adjustment function control. Optionally, the adjustment function of the image adjustment function control can be a pre-set image alignment method, such as drag and slide adjustment functions.

[0053] The technical solution of this embodiment generates an image of the page to be analyzed based on the page to be analyzed, and obtains a reference page image. The image of the page to be analyzed and the reference page image are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups. Pixel analysis is performed on each comparison image group to determine and display the different pixels in each comparison image group, thus completing the page production effect analysis. The technical solution of this embodiment achieves a more convenient and accurate analysis of the page production effect, improves the automation level of page effect comparison and analysis, and can quickly locate differences, thereby improving the efficiency of page development.

[0054] Figure 2 This is a flowchart illustrating a page creation effect analysis method provided in an embodiment of the present invention. This embodiment belongs to the same inventive concept as the page creation effect analysis method in the above embodiments, and further describes how to perform pixel analysis on each of the comparison image groups to determine different pixels in each comparison image group. Optionally, the step of performing pixel analysis on each of the comparison image groups to determine different pixels in each comparison image group includes: performing image meshing processing on each image in each comparison image group to obtain multiple sub-comparison image groups; assigning corresponding preset color values ​​and performing pixel color difference analysis on each sub-comparison image group to determine the color difference value of each sub-comparison image group, and determining different pixels based on the color difference value. This method can be executed by a page creation effect analysis device, which can be implemented by software and / or hardware and integrated into a computer device with application development capabilities.

[0055] like Figure 2 As shown, the page creation effect analysis method in this embodiment includes the following steps:

[0056] S210. Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect.

[0057] S220. The image to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups.

[0058] S230. Perform image gridding processing on each image in the comparison image group to obtain multiple sub-comparison image groups.

[0059] In this embodiment, the sub-comparison image group can be a comparison image group obtained by performing image meshing processing on the images in each comparison image group separately. It should be noted that performing image meshing processing on the images in each comparison image group separately can more finely and accurately determine the different pixels in the page image to be analyzed and the effect reference page image.

[0060] Specifically, for each comparison image group, an image meshing tool can be used to mesh the images in the comparison image group separately. This results in multiple sub-comparison image groups. In this embodiment, meshing the images in the comparison image group separately can be achieved by meshing each image in the comparison image group into a preset number of grids. Optionally, the preset number of grids can be 64. That is, the image meshing process can be performed on each image in the comparison image group based on 64-bit pixel mapping.

[0061] In this embodiment, the images in the comparison image group are each processed into a grid. This can be done using a uniform grid division method, dividing the area containing the images into multiple sub-regions of the same size. Alternatively, the images can be processed using a non-uniform grid division method, dividing the area containing the images into multiple sub-regions, each containing at least two sub-regions of different sizes.

[0062] S240. Assign corresponding preset color values ​​and perform pixel color difference analysis on each sub-comparison image group to determine the color difference parameters of each sub-comparison image group, and determine different pixel points based on the color difference parameters.

[0063] The preset color values ​​can be pre-defined, assignable color values ​​for each pixel in the sub-comparison image group, such as red, green, or blue. This allows for appropriate adjustment of color contrast, leading to more accurate identification of different pixels. The color difference parameter can be a numerical value or a percentage.

[0064] Specifically, for each sub-comparison image group, the original color of each pixel in the image within each sub-comparison image group can be determined, along with a preset color value corresponding to the original color. The color corresponding to the preset color value is then superimposed on the original color. After color superposition, pixel color difference analysis can be performed on the images in the sub-comparison image group. This allows the determination of the color difference value for each sub-comparison image group. Furthermore, different pixel points can be identified based on the color difference value.

[0065] In this embodiment of the invention, the images in the sub-comparison image group may include a first image and a second image, wherein the first image is the image corresponding to the grid area after the image of the page to be analyzed is processed into an image grid, and the second image is the image corresponding to the grid area after the image of the effect reference page is processed into an image grid.

[0066] Based on the above embodiments, the color difference parameter is a color difference value. The step of performing pixel color difference analysis on the images in the sub-comparison image group to determine the color difference parameter of each sub-comparison image group may include: for each first pixel in the first image, determining the second pixel in the second image corresponding to the first pixel; and then calculating the color difference value between the first pixel and the second pixel based on the color value of the first pixel and the color value of the second pixel. This allows obtaining the color difference value of each pixel in the first image and each pixel in the second image, i.e., obtaining the color difference value of each pixel. Furthermore, the color difference value of the sub-comparison image group can be determined based on the color difference value of each pixel. Here, the first pixel can be understood as a pixel in the first image. The second pixel can be understood as a pixel in the second image.

[0067] Optionally, determining the color difference value of the sub-comparison image group based on the color difference value of each pixel may include: calculating the average color difference value of each pixel, and using the average color difference value as the color difference value of the sub-comparison image group. The average color difference value may be the color difference value obtained by averaging the color difference values ​​of each pixel.

[0068] It should be noted that in this embodiment, "first" and "second" in "first image" and "second image" are merely for distinguishing different images, and do not indicate an order of the images. Similarly, "first" and "second" in "first pixel" and "second pixel" in this embodiment are merely for distinguishing pixels in different images, and do not indicate a sorting of the pixels.

[0069] In this embodiment, determining different pixels based on color difference parameters may include: for each sub-comparison image group, if the color difference value of the sub-comparison image group reaches a preset color difference threshold, then the pixels in the images of the sub-comparison image group are considered as different pixels. Here, the preset color difference threshold can be understood as a pre-set color difference threshold used to distinguish whether pixels are identical.

[0070] Based on the above embodiments, the color difference parameter can be a color difference percentage. The images in the sub-comparison image group can include multiple local regions. Performing pixel color difference analysis on the images in the sub-comparison image group to determine the color difference parameter of the sub-comparison image group can include: for each local region in the images of the sub-comparison image group, performing pixel color difference analysis on the image content in that local region, thereby determining the color difference percentage of that local region; and then determining the color difference percentage of the sub-comparison image group based on the color difference percentage of each local region. In this embodiment, by using the color difference percentage of local regions in the image, the overall color difference percentage of the image can be determined more quickly.

[0071] In one embodiment, determining the color difference percentage of the sub-comparison image group based on the color difference percentage of each local region may include: averaging the color difference percentages of each local region. The calculated result is then used as the color difference percentage of the sub-comparison image group.

[0072] In another embodiment, determining the color difference percentage of the sub-comparison image group based on the color difference percentage of each local region may include: determining the color difference weight of each local region according to the importance of each local region; thereby, the color difference weight and color difference percentage of each local region can be weighted and summed first to obtain a weighted sum result. Then, the weighted sum result is averaged to obtain a calculation result, and the calculation result is used as the color difference percentage of the sub-comparison image group.

[0073] Based on the above embodiments, determining different pixels according to color difference parameters may include: for each sub-comparison image group, if the color difference percentage of a local area in the image of the comparison image group reaches a preset color difference percentage threshold, the pixels in that local area can be considered as different pixels. Here, the preset color difference percentage threshold can be understood as a pre-set color difference percentage threshold used to distinguish whether pixels in a local area of ​​an image are the same.

[0074] It is understandable that pixel analysis is performed after image meshing, eliminating the need for actual image segmentation and the generation of corresponding system files for the comparison image group to be analyzed. Therefore, the technical solution of this embodiment can improve the efficiency of image analysis and reduce the consumption of system memory and computing power.

[0075] S250. Display the different pixels in each of the comparison image groups to complete the page production effect analysis.

[0076] The technical solution of this embodiment obtains multiple sub-comparison image groups by performing image meshing processing on the images in each comparison image group; assigning corresponding preset color values ​​and performing pixel color difference analysis on each sub-comparison image group to determine the color difference value of each sub-comparison image group, and determining different pixel points based on the color difference value, which can more accurately and effectively determine different pixel points in the page image to be analyzed and the effect reference page image.

[0077] Figure 3 This is a flowchart illustrating a page creation effect analysis method provided by an embodiment of the present invention. This embodiment belongs to the same inventive concept as the page creation effect analysis method in the above embodiments, and further describes how to display different pixels in each comparison image group. Optionally, displaying different pixels in each comparison image group includes: storing the color difference values ​​of each different pixel in a two-dimensional array representing image difference points; determining all difference points between the page image to be analyzed and the effect reference page image based on the array element values ​​and corresponding array element positions in the two-dimensional array; and highlighting all difference points in the page image to be analyzed. This method can be executed by a page creation effect analysis device, which can be implemented by software and / or hardware and integrated into a computer device with application development capabilities.

[0078] like Figure 3 As shown, the page creation effect analysis method in this embodiment includes the following steps:

[0079] S310. Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect.

[0080] S320. The image to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups.

[0081] S330. For each of the comparison image groups, perform image gridding processing to obtain multiple sub-comparison image groups.

[0082] S340. Assign corresponding preset color values ​​and perform pixel color difference analysis on each sub-comparison image group to determine the color difference parameters of each sub-comparison image group, and determine different pixel points based on the color difference parameters.

[0083] S350. Store the color difference values ​​of each of the different pixels in a two-dimensional array representing the differences in the image.

[0084] In this embodiment, the two-dimensional array representing image difference points can be understood as a two-dimensional array used to store image difference points. Storing the color difference values ​​of each different pixel in the two-dimensional array can conveniently store the color difference values ​​of different pixels, thereby recording the color difference values ​​of each difference point for subsequent overall display of the difference points.

[0085] Specifically, a two-dimensional array is pre-created to store the differences between images. The color difference values ​​of each different pixel can be stored in this two-dimensional array based on a preset storage method. There are two ways to store the color difference values ​​of different pixels in the two-dimensional array: horizontal storage or vertical storage. In other words, each row or column of the two-dimensional array can be used to store the color difference value of a single different pixel.

[0086] S360. Determine all the differences between the page image to be analyzed and the effect reference page image based on the array element values ​​and corresponding array element positions in the two-dimensional array.

[0087] The two-dimensional array includes array elements. In this embodiment, a single data element corresponds to a different pixel. The array element value can be understood as the color difference value of different pixels. The array element position represents the position of different pixels in the image. All differences can be understood as all different pixels in the image to be analyzed and the reference image.

[0088] Specifically, by reading the data stored in the two-dimensional array, the values ​​of the array elements and their corresponding positions can be determined. In other words, the different pixels in the image to be analyzed and the reference image can be identified, along with their color differences and positions. Furthermore, based on these color differences and positional information, all differences between the image to be analyzed and the reference image can be determined.

[0089] S370. Highlight all the differences in the image of the page to be analyzed to complete the page creation effect analysis.

[0090] In this feature, all differences are highlighted in the image of the page to be analyzed, allowing users to clearly see the differences between the image of the page to be analyzed and the image of the reference page.

[0091] Specifically, the display style of all differences in the image of the page to be analyzed can be pre-set to a highlight style. After determining all differences, their display positions in the image can be determined. For each display position, the corresponding pixels are rendered based on the preset highlight style. This allows all differences to be highlighted in the image of the page to be analyzed, enabling users to more intuitively receive the differences between the objects being compared and analyzed. This completes the analysis of the page's design effect.

[0092] To more accurately and conveniently highlight all differences in the image of the page to be analyzed, this embodiment uses a style based on Cascading Style Sheets (CSS) to display the highlighting of all differences. This approach allows for customization of the highlighted colors to meet individual user needs.

[0093] The technical solution of this embodiment stores the color difference values ​​of each different pixel in a two-dimensional array representing image difference points. Typically, storing image difference points in a two-dimensional array facilitates the overall display of all differences between the page image to be analyzed and the reference page image. All difference points between the page image to be analyzed and the reference page image are determined based on the array element values ​​and their corresponding positions. Highlighting all difference points in the page image to be analyzed allows for accurate and rapid identification of these differences, improving user experience.

[0094] Figure 4 This is a flowchart illustrating a page creation effect analysis method provided in this embodiment of the invention. This embodiment belongs to the same inventive concept as the page creation effect analysis method in the above embodiments, and further describes how to obtain effect reference page images. Optionally, obtaining the effect reference page images includes: matching and obtaining the effect reference page images from corresponding data sources according to the priority order of each preset reference page image data source based on the title of the page to be analyzed. This method can be executed by a page creation effect analysis device, which can be implemented by software and / or hardware and integrated into a computer device with application development capabilities.

[0095] like Figure 4 As shown, the page creation effect analysis method in this embodiment includes the following steps:

[0096] S410. Generate an image of the page to be analyzed based on the page to be analyzed.

[0097] S420. Based on the title of the page to be analyzed, match and obtain the effect reference page image from the corresponding data source according to the priority order of each preset reference page image data source.

[0098] The preset reference page image data source can be understood as a pre-set data source for storing reference page images for the effect. The priority of each preset reference page image data source can be pre-configured according to actual needs.

[0099] Specifically, the title of the page to be analyzed is obtained. The priority order of the image data sources for each preset reference page is determined. Then, based on the correspondence between the image and the title, images corresponding to the title can be matched from the corresponding data sources according to this priority order. After obtaining the matched images, reference page images can be determined based on them.

[0100] In one embodiment, if only one image is matched, the matched image can be used as a reference image for the effect page.

[0101] In one embodiment, when there are multiple matched images, one image can be randomly selected from each matched image as the effect reference page image; alternatively, the similarity between each matched image and the image to be analyzed can be calculated, thus obtaining each similarity score. Based on these similarity scores, the image with the highest similarity to the image to be analyzed can be determined as the effect reference page image.

[0102] Optionally, the step of matching and obtaining the effect reference page image from the corresponding data source according to the priority of each preset reference page image data source may include: matching the effect reference page image in a preset user page effect image storage platform and / or a browser window that is open, according to the priority of each preset reference page image data source; if the number of matched effect reference page images is greater than one, displaying all the effect reference page images simultaneously, and determining the final effect reference page image based on the user's selection operation.

[0103] The preset reference page image data source can be a preset user page mockup storage platform, or it can be an open browser window. The preset user page mockup storage platform can be understood as a pre-set storage platform used to store the mockup reference page images.

[0104] In this embodiment, there are multiple ways to match the effect reference page images in the preset user page effect image storage platform and / or in the browser window that is open, according to the priority of each preset reference page image data source.

[0105] As an optional implementation of this embodiment, each preset reference page image data source may include multiple preset user page effect image storage platforms; the effect reference page images may be matched from the corresponding storage platforms according to the priority order of the multiple preset user page effect image storage platforms.

[0106] As another optional implementation of this embodiment, each preset reference page image data source may include multiple open browser windows; the effect reference page images can be matched from the corresponding browser windows according to their priority order. Specifically, the open browser windows are subjected to dynamic content and resource scanning processing to obtain each resource image in the browser window. For each resource image, a similarity comparison can be performed between the resource image and the page image to be analyzed. This allows for the matching of the effect reference page images.

[0107] Optionally, comparing the similarity between the resource image and the page image to be analyzed may include: determining the keywords of the resource image and the keywords of the page image to be analyzed; and determining the similarity between the resource image and the page image to be analyzed based on the determined keywords of the resource image and the page image to be analyzed.

[0108] As an optional implementation of this embodiment, each preset reference page image data source may include at least one preset user page effect image storage platform and at least one browser window that is open; the effect reference page image may be matched from the corresponding preset user page effect image storage platform or the browser window that is open, according to the priority order of the preset user page effect image storage platform and the browser window that is open.

[0109] Based on the above embodiments, when the number of matched effect reference page images is greater than one, all the effect reference page images can be displayed simultaneously. Optionally, the effect reference page images can be displayed simultaneously in a preset display mode, which may include a preset display position and / or a preset display size. The preset display position can be used to set the display position of each effect reference page image on the page, and the preset display size can be used to set the display size of each effect reference page image on the page.

[0110] Based on the above embodiments, when multiple effect reference page images are displayed simultaneously on a page, a user's selection operation (e.g., click or drag-and-drop) on a specific effect reference page image can be received. Therefore, the selected effect reference page image can be determined based on the selection operation. Furthermore, the selected effect reference page image can be determined as the final effect reference page image.

[0111] To improve the user experience when selecting reference images, a confirmation window can be displayed after the selected reference image is determined based on the selection operation. This confirmation window includes a "Confirm Selection" control and a "Cancel Selection" control. Upon receiving a trigger operation on the "Confirm Selection" control, the selected reference image can be confirmed as the final reference image. Upon receiving a trigger operation on the "Cancel Selection" control, the currently selected reference image can be canceled, allowing the user to reselect the final reference image from multiple options.

[0112] S430. The image to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups.

[0113] S440. Perform pixel analysis on each of the comparison image groups, identify and display the different pixels in each comparison image group, and complete the page production effect analysis.

[0114] The technical solution of this embodiment obtains the effect reference page image by matching and acquiring the effect reference page image from the corresponding data source according to the priority order of each preset reference page image data source based on the title of the page to be analyzed. This makes the acquisition of effect reference page images planned and avoids the situation of blindly acquiring effect reference page images.

[0115] Figure 5 This is a flowchart of an optional embodiment of a page creation effect analysis method provided by an embodiment of the present invention. For example... Figure 5 As shown, the page creation effect analysis method in this embodiment includes the following steps:

[0116] Step 1: Based on the page to be analyzed ( Figure 5 The "page" in the text generates an image of the page to be analyzed. Figure 5 (Image in the image). In this embodiment, generating an image of the page to be analyzed based on the page to be analyzed is equivalent to... Figure 5 The page was converted to an image.

[0117] Step 2: Obtain the effect reference page images from each preset reference page image data source (UI image data source). See [link / reference]. Figure 5 The UI image data source can include a specified platform, an open browser window, and uploaded UI images. A specified platform can be understood as a pre-defined platform for storing user page mockups. An open browser window can be understood as a browser window that is currently open.

[0118] Specifically, the effect reference page image is matched from each preset reference page image data source. Figure 5(Similar image comparison). If an image is matched, the reference image on the desired effect can be obtained (…). Figure 5 (Image extraction). If no image is found, a user-uploaded reference image can be received. Figure 5 (Upload UI image in the process). After the effect reference page image is uploaded, it can be downloaded to obtain the effect reference page image.

[0119] Step 3: Display the image of the page to be analyzed and the image of the effect reference page on the preset page creation effect analysis interactive page. Figure 5 Add to page).

[0120] Step 4: Adjust the display parameters of the image to be analyzed and the reference image. Figure 5 (Visual adjustment of comparison parameters in the text).

[0121] Step 5: Compare and analyze the adjusted page images to be analyzed and the reference page images as a set of updated images. Figure 5 (The beginning of the comparison).

[0122] Step 6: Using a preset image generation tool (e.g., Cavans), the image of the page to be analyzed and the image of the effect reference page can be used for image segmentation to obtain multiple comparison image groups. For each comparison image group, images are compared using 64-bit pixel binning to determine all differences between the image of the page to be analyzed and the image of the effect reference page. Figure 5 (Differences in generation). This allows for the analysis of the page creation effect.

[0123] Based on the above embodiments, after determining all differences between the page image to be analyzed and the effect reference page image, a drag or slide operation can be received on the page image to be analyzed to adjust it; or, an adjustment operation can be received on the page image to be analyzed and the effect reference page image, and a comparison analysis can be performed again based on the adjusted page image to be analyzed and the effect reference page image.

[0124] The technical solution in this embodiment enables a more convenient and accurate analysis of the page production effect, improves the automation of page effect comparison and analysis, and can quickly locate differences, thereby improving the efficiency of page development.

[0125] Figure 6This is a schematic diagram of a page creation effect analysis device provided in an embodiment of the present invention. This embodiment is applicable to scenarios that analyze page creation effects. The device can be implemented by software and / or hardware and integrated into a computer terminal device with application development capabilities.

[0126] like Figure 6 As shown, the page creation effect analysis device includes: an analysis object acquisition module 510, an analysis object preprocessing module 520, and an analysis object analysis module 530.

[0127] The analysis object acquisition module 510 is used to generate an image of the page to be analyzed based on the page to be analyzed, and to obtain an image of the effect reference page; the analysis object preprocessing module 520 is used to perform image segmentation processing on the image of the page to be analyzed and the image of the effect reference page as image comparison analysis objects to obtain multiple comparison image groups; the analysis object analysis module 530 is used to perform pixel analysis on each of the comparison image groups, determine and display the different pixels in each comparison image group, and complete the page production effect analysis.

[0128] The technical solution of this embodiment generates an image of the page to be analyzed based on the page to be analyzed, and obtains a reference page image. The image of the page to be analyzed and the reference page image are used as image comparison and analysis objects for image segmentation processing to obtain multiple comparison image groups. Pixel analysis is performed on each comparison image group to determine and display the different pixels in each comparison image group, thus completing the page production effect analysis. The technical solution of this embodiment achieves a more convenient and accurate analysis of the page production effect, improves the automation level of page effect comparison and analysis, and can quickly locate differences, thereby improving the efficiency of page development.

[0129] Optionally, the analysis object analysis module 530 can be used for:

[0130] The step of performing pixel analysis on each of the comparison image groups to determine the different pixels in each comparison image group includes:

[0131] For each of the comparison image groups, the images are processed by image gridding to obtain multiple sub-comparison image groups;

[0132] Each sub-comparison image group is assigned a corresponding preset color value and subjected to pixel color difference analysis to determine the color difference value of each sub-comparison image group, and different pixels are determined based on the color difference value.

[0133] Optionally, the object analysis module 530 can be used for:

[0134] The color difference values ​​of each of the different pixels are stored in a two-dimensional array representing the differences in the image;

[0135] Based on the array element values ​​and corresponding array element positions in the two-dimensional array, determine all the differences between the page image to be analyzed and the effect reference page image;

[0136] All the differences will be highlighted in the image of the page to be analyzed.

[0137] Optionally, the page creation effect analysis device also includes: an image content alignment module; the image content alignment module can be used for:

[0138] After generating the image of the page to be analyzed based on the page to be analyzed, and obtaining the reference page image,

[0139] The image of the page to be analyzed and the image of the effect reference page are added as document objects and displayed in the preset page creation effect analysis interactive page;

[0140] Adjust the display parameters of the image to be analyzed and the image of the effect reference page to align the image content of the image to be analyzed and the image of the effect reference page.

[0141] Optionally, the analysis object acquisition module 510 includes: an effect reference page image acquisition unit; the effect reference page image acquisition unit can be used for:

[0142] Based on the title of the page to be analyzed, the effect reference page image is matched and obtained from the corresponding data source according to the priority order of each preset reference page image data source.

[0143] Optionally, the effect can be referenced from the image retrieval unit on the page, and can be specifically used for:

[0144] According to the priority of each preset reference page image data source, the effect reference page image is matched in the preset user page effect image storage platform and / or in the browser window that is open;

[0145] If the number of matched effect reference page images is greater than one, all the effect reference page images will be displayed simultaneously, and the final effect reference page image will be determined based on the user's selection.

[0146] Optionally, the page creation effect analysis device also includes: an image visualization adjustment module; the image visualization adjustment module can be used for:

[0147] Display at least one image adjustment function control in the preset page creation effect analysis interactive page;

[0148] When any of the image adjustment function controls is triggered, the image of the page to be analyzed is adjusted accordingly;

[0149] The adjusted images of the page to be analyzed and the reference images of the effect are used as a set of updated images for comparative analysis.

[0150] The page creation effect analysis device provided in the embodiments of the present invention can execute the page creation effect analysis method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method execution.

[0151] Figure 7 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Figure 7 A block diagram of an exemplary computer device 12 suitable for implementing embodiments of the present invention is shown. Figure 7 The computer device 12 shown is merely an example and should not be construed as limiting the functionality or scope of the embodiments of the present invention. The computer device 12 can be any terminal device with computing capabilities, such as intelligent controllers and servers, mobile phones, and other terminal devices.

[0152] like Figure 7 As shown, the computer device 12 is represented in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, system memory 28, and a bus 18 connecting different system components (including system memory 28 and processing unit 16).

[0153] Bus 18 represents one or more of several bus architectures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of the various bus architectures. For example, these architectures include, but are not limited to, the Industry Standard Architecture (ISA) bus, the Micro Channel Architecture (MAC) bus, the Enhanced ISA bus, the Video Electronics Standards Association (VESA) local bus, and the Peripheral Component Interconnect (PCI) bus.

[0154] Computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0155] System memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. Computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, storage system 34 may be used to read and write non-removable, non-volatile magnetic media (…). Figure 7 Not shown; usually referred to as a "hard drive"). Although Figure 7 Not shown, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk") and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 18 via one or more data media interfaces. System memory 28 may include at least one program product having a set (e.g., at least one) of program modules configured to perform the functions of the embodiments of the present invention.

[0156] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in system memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data. Each or some combination of these examples may include an implementation of a network environment. Program modules 42 typically perform the functions and / or methods described in the embodiments of the present invention.

[0157] Computer device 12 can also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), and with one or more devices that enable a user to interact with the computer device 12, and / or with any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). This communication can be performed via input / output (I / O) interface 22. Furthermore, computer device 12 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 20. As shown, network adapter 20 communicates with other modules of computer device 12 via bus 18. It should be understood that, although... Figure 7 As not shown, it can be used in conjunction with computer device 12 with other hardware and / or software modules, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0158] Processing unit 16 executes various functional applications and data processing by running programs stored in system memory 28, such as implementing the page creation effect analysis method provided in this embodiment, which includes:

[0159] Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect;

[0160] The image of the page to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation to obtain multiple comparison image groups;

[0161] Pixel analysis is performed on each of the comparison image groups to identify and display the different pixels in each comparison image group, thus completing the page production effect analysis.

[0162] This invention also provides a computer-readable storage medium storing a computer program thereon. When executed by a processor, the program implements the page creation effect analysis method provided in any embodiment of this invention. The method includes:

[0163] Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect;

[0164] The image of the page to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation to obtain multiple comparison image groups;

[0165] Pixel analysis is performed on each of the comparison image groups to identify and display the different pixels in each comparison image group, thus completing the page production effect analysis.

[0166] The computer storage medium of this invention can be any combination of one or more computer-readable media. A computer-readable medium can be a computer-readable signal medium or a computer-readable storage medium. For example, a computer-readable storage medium can be, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.

[0167] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, capable of sending, propagating, or transmitting programs for use by or in connection with an instruction execution system, apparatus, or device.

[0168] Program code contained on a computer-readable medium may be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0169] Computer program code for performing the operations of this invention can be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, and C++, as well as conventional procedural programming languages ​​such as C or similar languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a standalone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving remote computers, the remote computer can be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0170] Those skilled in the art will understand that the modules or steps of the present invention described above can be implemented using general-purpose computing devices. They can be centralized on a single computing device or distributed across a network of multiple computing devices. Optionally, they can be implemented using computer-executable program code, thereby allowing them to be stored in a storage device for execution by a computing device, or they can be fabricated as separate integrated circuit modules, or multiple modules or steps can be fabricated as a single integrated circuit module. Thus, the present invention is not limited to any particular combination of hardware and software.

[0171] Note that the above description is merely a preferred embodiment of the present invention and the technical principles employed. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and various obvious changes, readjustments, and substitutions can be made without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in detail through the above embodiments, the present invention is not limited to the above embodiments, and may include many other equivalent embodiments without departing from the concept of the present invention, the scope of which is determined by the scope of the appended claims.

Claims

1. A method for analyzing page creation effects, characterized in that, include: Generate an image of the page to be analyzed based on the page to be analyzed, and obtain a reference image of the effect; The image of the page to be analyzed and the image of the effect reference page are used as image comparison and analysis objects for image segmentation to obtain multiple comparison image groups; Pixel analysis is performed on each of the comparison image groups to identify and display the different pixels in each comparison image group, thus completing the page production effect analysis. Specifically, pixel analysis is performed on each of the comparison image groups to determine the different pixels in each comparison image group, including: For each of the comparison image groups, the images are processed by image gridding to obtain multiple sub-comparison image groups; Each sub-comparison image group is assigned a corresponding preset color value and pixel color difference analysis is performed to determine the color difference parameters of each sub-comparison image group, and different pixels are determined based on the color difference parameters. The step of assigning corresponding preset color values ​​and performing pixel color difference analysis on each sub-comparison image group includes: For each sub-comparison image group, determine the original color of each pixel in the image of each sub-comparison image group, and determine the preset color value corresponding to the original color. Then, superimpose the color corresponding to the preset color value on the original color. Perform pixel color difference analysis on the images in the sub-comparison image group after color superposition.

2. The method according to claim 1, characterized in that, The display of different pixels in each of the comparison image groups includes: The color difference parameters of each different pixel are stored in a two-dimensional array representing the differences in the image; Based on the array element values ​​and corresponding array element positions in the two-dimensional array, determine all the differences between the page image to be analyzed and the effect reference page image; All the differences will be highlighted in the image of the page to be analyzed.

3. The method according to claim 1, characterized in that, After generating an image of the page to be analyzed based on the page to be analyzed and obtaining a reference image of the effect, the method further includes: The image of the page to be analyzed and the image of the effect reference page are added as document objects and displayed in the preset page creation effect analysis interactive page; Adjust the display parameters of the image to be analyzed and the image of the effect reference page to align the image content of the image to be analyzed and the image of the effect reference page.

4. The method according to claim 1, characterized in that, The reference page images for obtaining the effect include: Based on the title of the page to be analyzed, the effect reference page image is matched and obtained from the corresponding data source according to the priority order of each preset reference page image data source.

5. The method according to claim 4, characterized in that, The step of matching and obtaining the effect reference page image from the corresponding data source according to the priority of each preset reference page image data source includes: According to the priority of each preset reference page image data source, the effect reference page image is matched in the preset user page effect image storage platform and / or in the browser window that is open; If the number of matched effect reference page images is greater than one, all the effect reference page images will be displayed simultaneously, and the final effect reference page image will be determined based on the user's selection.

6. The method according to claim 1, characterized in that, The method further includes: Display at least one image adjustment function control in the preset page creation effect analysis interactive page; When any of the image adjustment function controls is triggered, the image of the page to be analyzed is adjusted accordingly; The adjusted images of the page to be analyzed and the reference images of the effect are used as a set of updated images for comparative analysis.

7. A page creation effect analysis device, characterized in that, include: The analysis object acquisition module is used to generate an image of the page to be analyzed based on the page to be analyzed, and to obtain an image of the reference page for the effect. The analysis object preprocessing module is used to perform image segmentation processing on the page image to be analyzed and the effect reference page image as image comparison analysis objects to obtain multiple comparison image groups; The analysis object module is used to perform pixel analysis on each of the comparison image groups, identify and display the different pixels in each comparison image group, and complete the page production effect analysis. Specifically, pixel analysis is performed on each of the comparison image groups to determine the different pixels in each comparison image group, including: For each of the comparison image groups, the images are processed by image gridding to obtain multiple sub-comparison image groups; Each sub-comparison image group is assigned a corresponding preset color value and pixel color difference analysis is performed to determine the color difference parameters of each sub-comparison image group, and different pixels are determined based on the color difference parameters. The step of assigning corresponding preset color values ​​and performing pixel color difference analysis on each sub-comparison image group includes: For each sub-comparison image group, determine the original color of each pixel in the image of each sub-comparison image group, and determine the preset color value corresponding to the original color. Then, superimpose the color corresponding to the preset color value on the original color. Perform pixel color difference analysis on the images in the sub-comparison image group after color superposition.

8. A computer device, characterized in that, The computer device includes: One or more processors; Memory, used to store one or more programs; When the one or more programs are executed by the one or more processors, the one or more processors implement the page creation effect analysis method as described in any one of claims 1-6.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that, When executed by the processor, the program implements the page creation effect analysis method as described in any one of claims 1-6.

Images