Methods, apparatus and electronic devices for processing interactive images

Abstract

This invention provides a method, apparatus, and electronic device for processing interactive images. The method involves acquiring a first interactive image to be processed, including element icons; the element icons occupying a portion of the first interactive image area; performing edge detection on the element icons in the first interactive image to obtain their edge contour information; and cropping the first interactive image based on the edge contour information to obtain a second interactive image containing the element icons. This method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons, and removing excess portions, avoids the problem of interactive images displayed on a specified page occluding each other, thus preventing the accidental triggering of preset interactive events. It also provides an interactive area for preset interactive events based on the edge contours of the second interactive image, improving the user experience.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a method, apparatus, and electronic device for processing interactive images. Background Technology

[0002] Clickable elements are often set up on event pages. After binding a click event to this element, clicking anywhere on the element will trigger the corresponding interaction event. Since clickable elements are usually rectangular transparent background images, if the images need to be arranged irregularly on the event page, they may overlap. This can cause parts of the clickable element to obscure the icons of other clickable elements. Consequently, when a user clicks on the obscured area, the click event of the obscured area is actually triggered, severely impacting the user experience. Summary of the Invention

[0003] In view of this, the purpose of the present invention is to provide a method, apparatus and electronic device for processing interactive images, so as to avoid the problem of mutual occlusion between interactive images displayed on a page and improve the user experience.

[0004] In a first aspect, embodiments of the present invention provide a method for processing interactive images, the method comprising: acquiring a first interactive image to be processed; wherein the first interactive image includes element icons; the element icons occupy a portion of the image area of ​​the first interactive image; performing edge detection on the element icons in the first interactive image to obtain edge contour information of the element icons; and cropping the first interactive image based on the edge contour information of the element icons to obtain a second interactive image containing the element icons; wherein the second interactive image is used to: when the second interactive image is displayed on a specified page, provide an interactive area for a preset interactive event based on the edge contour of the second interactive image.

[0005] Furthermore, the step of performing edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons includes: performing edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons; drawing the edge detection results onto a preset canvas object to obtain an intermediate interactive image containing the element icons; and determining the edge contour information of the element icons based on the intermediate interactive image.

[0006] Furthermore, the step of determining the edge contour information of the element icon based on the intermediate interactive image includes: obtaining pixel data of each pixel in the intermediate interactive image according to the target interface provided by the preset canvas object; wherein, the pixel data is used to indicate the color of the pixel; and determining the edge contour information of the element icon based on the pixel data.

[0007] Furthermore, the step of determining the edge contour information of the element icon based on pixel data includes: obtaining the first pixel point in each row of pixels of the intermediate interactive image whose pixel data is the first pixel data; wherein the first pixel data is used to indicate that the pixel point is the edge detection result of the element icon; obtaining the target pixel points located at both ends from each row of first pixel points, and determining the target pixel points as the edge contour endpoints of the element icon; and determining the coordinates of the edge contour endpoints as the edge contour information of the element icon.

[0008] Furthermore, after determining the coordinates of the edge contour endpoints as the edge contour information of the element icon, the method further includes: if there are two target edge contour endpoints in the edge contour endpoints of the element icon located at the first edge position of the middle interactive image; obtain the edge contour endpoints of each row or column between the two target edge contour endpoints; for each row or column edge contour endpoint, update the edge contour endpoint closer to the first edge position to the edge point of the corresponding first edge position of the row or column.

[0009] Furthermore, the step of performing edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons includes: converting the first interactive image into a grayscale image; using an edge detection algorithm, identifying pixels in the grayscale image whose grayscale value changes are greater than a first preset threshold as edge points; and identifying the edge points as the edge detection results of the element icons.

[0010] Furthermore, after performing edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons, the method further includes: expanding the edge contour of the element icons based on the edge contour information of the element icons to obtain the expanded edge contour information of the element icons.

[0011] Furthermore, the step of expanding the edge contour of the element icon based on the edge contour information of the element icon to obtain the expanded edge contour information of the element icon includes: obtaining the first initial coordinates of the first edge contour endpoint located in the first direction and the second initial coordinates of the second edge contour endpoint located in the second direction from the edge contour information; shifting the first initial coordinates in the first direction by a first value and shifting the second initial coordinates in the second direction by a second value to obtain the first target coordinates of the first edge contour endpoint and the second target coordinates of the second edge contour endpoint; and determining the expanded edge contour information of the element icon based on the first target coordinates and the second target coordinates.

[0012] Further, the first and second directions are used to indicate the rows of pixels in the element icon; the step of determining the edge contour information of the expanded element icon based on the first target coordinate and the second target coordinate includes: dividing the element icon into multiple sub-regions; wherein each sub-region includes a region corresponding to a first preset number of rows; for each sub-region, performing the following operations: obtaining the minimum value of the abscissa of the first target coordinate of the endpoint of the first edge contour in the sub-region, and the maximum value of the abscissa of the second target coordinate of the endpoint of the second edge contour; updating the abscissa of the first initial coordinate of the endpoint of the first edge contour in the sub-region to the minimum value, and updating the abscissa of the second initial coordinate of the endpoint of the second edge contour in the sub-region to the maximum value, thereby obtaining the edge contour information of the expanded element icon.

[0013] Furthermore, the edge contour information includes the edge contour endpoints of the element icons and the coordinates of the edge contour endpoints; the step of cropping the first interactive image based on the edge contour information of the element icons to obtain a second interactive image containing the element icons includes: setting a specified attribute of the display style of the first interactive image according to the coordinates of the edge contour endpoints to obtain a cropping script for the first interactive image; and cropping the element icons in the first interactive image using the cropping script to obtain a second interactive image containing the element icons.

[0014] Secondly, embodiments of the present invention provide an interactive image processing apparatus, the apparatus comprising: an acquisition module, configured to acquire a first interactive image to be processed; wherein the first interactive image includes element icons; the element icons occupy a portion of the image area of ​​the first interactive image; an edge detection module, configured to perform edge detection on the element icons in the first interactive image to obtain edge contour information of the element icons; and a cropping module, configured to crop the first interactive image based on the edge contour information of the element icons to obtain a second interactive image containing the element icons; wherein the second interactive image is used to: when the second interactive image is displayed on a specified page, provide an interactive area for a preset interactive event based on the edge contour of the second interactive image.

[0015] Thirdly, embodiments of the present invention provide an electronic device, including a processor and a memory, wherein the memory stores computer-executable instructions that can be executed by the processor, and the processor executes the computer-executable instructions to implement the interactive image processing method of any of the first aspects.

[0016] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to implement the interactive image processing method of any one of the first aspects.

[0017] The embodiments of the present invention bring the following beneficial effects:

[0018] This invention provides a method, apparatus, and electronic device for processing interactive images. The method involves acquiring a first interactive image to be processed, including element icons; the element icons occupying a portion of the first interactive image area; performing edge detection on the element icons in the first interactive image to obtain their edge contour information; and cropping the first interactive image based on the edge contour information to obtain a second interactive image containing the element icons. This method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons, and removing excess portions, avoids the problem of interactive images displayed on a specified page occluding each other, thus preventing the accidental triggering of preset interactive events. It also provides an interactive area for preset interactive events based on the edge contours of the second interactive image, improving the user experience.

[0019] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention are realized and obtained in accordance with the structures particularly pointed out in the description, claims and drawings.

[0020] To make the above-mentioned objects, features and advantages of the present invention more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings. Attached Figure Description

[0021] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0022] Figure 1 This is a schematic diagram of an interactive image on a specified page provided in an embodiment of the present invention;

[0023] Figure 2 A flowchart illustrating an interactive image processing method provided in an embodiment of the present invention;

[0024] Figure 3 This is a schematic diagram of an edge detection result provided in an embodiment of the present invention;

[0025] Figure 4 A schematic diagram of the edge outline of an element icon provided in an embodiment of the present invention;

[0026] Figure 5A schematic diagram of the edge outline of another element icon provided in an embodiment of the present invention;

[0027] Figure 6 A schematic diagram of the edge outline of another element icon provided in an embodiment of the present invention;

[0028] Figure 7 This is a schematic diagram of another interactive image on a designated page provided in an embodiment of the present invention;

[0029] Figure 8 A schematic diagram of the structure of an interactive image processing device provided in an embodiment of the present invention;

[0030] Figure 9 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0031] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0032] Currently, in some event pages, clickable elements are generally rectangular. When a click event is bound to this element, clicking anywhere within the rectangle will trigger the corresponding click event. Since the clickable elements on the event page are all rectangular transparent background images, irregular arrangement of these elements may cause overlapping clickable areas, resulting in a discrepancy between the visually apparent clickable area and the user's expected interaction area. Furthermore, when clickable elements are stacked, there is significant overlap between the icons. For example... Figure 1 As shown, some clickable areas of icons obscure other icons, causing users to click on the obscured area but actually triggering the click event of the upper-level obscuring icon, severely impacting the user experience.

[0033] In some related technologies, multiple transparent background canvases are typically used to draw the image of the clicked element. The color of the coordinates of the user's click position is obtained, and if the color is opaque, a click event is triggered at the clicked position; otherwise, no event is triggered. However, this method suffers from layer overlap issues because the canvas layer is a regular rectangle, and it can only trigger the click judgment for a single or non-overlapping area, resulting in low click accuracy.

[0034] Other related technologies typically divide the image corresponding to the clicked element into multiple small rectangular regions, stitch these regions together, and set click events in some of these smaller rectangular regions (for example, setting a click event in the large area of ​​the element icon in the image corresponding to the clicked element), thus narrowing down the clickable area within the clicked element. However, this method requires calculating the position of each rectangular region within the image. If it is determined that the rectangular region includes the element icon in the image, then a click event is set for that rectangular region, which is a complex process and time-consuming.

[0035] Based on this, embodiments of the present invention provide a method, apparatus, and electronic device for processing interactive images, which can be applied to electronic devices such as laptops and computers.

[0036] To facilitate understanding of this embodiment, a method for processing interactive images disclosed in this invention will first be described in detail, such as... Figure 2 As shown, the method includes the following steps:

[0037] Step S202: Obtain the first interactive image to be processed; wherein, the first interactive image includes element icons; the element icons occupy part of the image area of ​​the first interactive image;

[0038] To save development time, the aforementioned first interactive area is usually set as a rectangular image. This first interactive image typically refers to an element image with interactive functionality on a webpage. This first interactive element usually needs to be displayed on a designated page to provide an interactive area for preset interactive events. The designated page can be a game page, a live streaming page, a video page, etc. The preset interactive event can be triggered when the user clicks on the first interactive image on the designated page, such as opening a new page, entering the next level in a game, or opening the in-game inventory. Preset interactive events can be pre-defined for the first interactive image according to actual needs.

[0039] The outline of the first interactive image is typically rectangular; therefore, the interactive area is considered the first interactive image. The element icons are usually located in the center of the first interactive image, such as... Figure 3 As shown in (a), the first interactive image is a rectangular image, with the element icon occupying the central area of ​​the first interactive image. Furthermore, the background of the first interactive image is transparent, so visually only the element icon is visible when the first interactive image is actually displayed. However, the transparent background of the first interactive image is also the interactive area for a preset interactive event; that is, when the first interactive image is displayed on the specified page, clicking the background area will also trigger the preset interactive event.

[0040] Step S204: Perform edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons;

[0041] The edge detection described above can be either detecting the outermost edge of the element icon or detecting the edge contours of all its sub-icons. In practice, all edge lines in the first interactive image can be detected first, and then the edge contours of the element icons can be determined. Based on the edge contours of the element icons, edge contour information is obtained, which includes at least the coordinates of each pixel in the edge contour of the element icon. The goal is to crop out the element icons from the first interactive image to remove the redundant background.

[0042] Step S206: Based on the edge contour information of the element icon, the first interactive image is cropped to obtain a second interactive image containing the element icon; wherein, the second interactive image is used to: provide an interactive area for a preset interactive event based on the edge contour of the second interactive image when the second interactive image is displayed on a specified page.

[0043] Specifically, based on the edge contour information obtained in the above steps, the element icons in the first interactive image can be cropped out, and the redundant background can be removed. Since the edge contour information is obtained based on the edges of the element icons, the complete element icons can be cropped, resulting in a second interactive image containing the element icons, so that the shape of the second interactive image is the shape of the edge contour of the element icons. The second interactive image is mainly used to display on a specified page and provide an interactive area for preset interactive events; this interactive area is the second interactive image.

[0044] It should be noted that the second interactive image obtained after cropping is smaller than the first interactive image, but still includes the complete element icon. This solves the problem of the click event when the user clicks on the overlapping rectangular area deviating from the user's expected click event. By cropping, the click event is limited to the outline of the element icon, avoiding the impact of overlapping interactive areas.

[0045] This invention provides a method for processing interactive images. The method involves obtaining a first interactive image to be processed, including element icons; the element icons occupying a portion of the first interactive image area; performing edge detection on the element icons in the first interactive image to obtain their edge contour information; and cropping the first interactive image based on the edge contour information to obtain a second interactive image containing the element icons. This method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons, and removing excess portions, yields a second interactive image containing the element icons. This avoids the problem of preset interactive events being mistakenly triggered due to mutual occlusion between interactive images displayed on a specified page. Furthermore, it provides an interactive area for preset interactive events based on the edge contours of the second interactive image, improving the user experience.

[0046] To obtain more accurate edge contour information, the following describes the steps for performing edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons, and one possible implementation method:

[0047] (1) Perform edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons;

[0048] The above first edge detection results are as follows: Figure 3 As shown in (b) in the diagram, it includes all the edge lines of the element icon, similar to a wireframe. Figure 3 (a) in the image represents a first interactive image. Edge detection is performed on the element icons in the first interactive image to obtain the following result: Figure 3 The edge detection results of the element icon shown in (b) are shown in the image.

[0049] One possible implementation: Convert the first interactive image into a grayscale image; use an edge detection algorithm to identify pixels in the grayscale image whose grayscale value changes are greater than a first preset threshold as edge points; and use the edge points as the edge detection results of the element icon.

[0050] The aforementioned first preset threshold is set according to actual needs. In actual implementation, the opencv.js library can be used. First, the first interactive image is converted to grayscale using OpenCV. Then, the Canny function provided by OpenCV is used to perform edge detection on the image using the Canny edge detection algorithm. Specifically, pixels in the grayscale image whose grayscale value changes more than the first preset threshold are identified as edge points. That is, pixels with large changes in grayscale value are considered edge points. The edge points can be set to white, and the other pixels can be set to black. Figure 3As shown in (b) of the diagram. The first interactive image is converted to a grayscale image. An edge detection algorithm is then used to perform edge detection on the grayscale image, resulting in an improved edge detection accuracy.

[0051] (2) Draw the edge detection results onto the preset canvas object to obtain an intermediate interactive image containing element icons;

[0052] To obtain the color of each pixel in the edge detection results, the edge detection results can be drawn onto a preset canvas object. This can be done through rendering. The preset canvas object can be represented as a canvas. The size of the intermediate interactive image is the same as the first interactive image. The purpose of this step is to use the functions provided by the preset canvas object to obtain pixel data from the edge detection results, thereby determining the edge contour information.

[0053] (3) Determine the edge outline information of the element icon based on the intermediate interactive image.

[0054] Specifically, since the intermediate interactive image is drawn on a canvas object, the pixel data of each pixel in the edge detection result can be obtained using the interface provided by the canvas object. Then, the edge contour information of the element icon in the edge detection result can be obtained based on the pixel data. For example, the edge contour information of the element icon can be determined based on the color and position of each pixel.

[0055] In the above method, the edge detection results are drawn onto the canvas object to obtain the intermediate interactive image. The functions in the canvas object can be used to determine the edge contour information of the element icon, which can obtain richer contour information and improve the accuracy of the edge contour information.

[0056] The following describes a possible implementation of step (3) above, which involves determining the edge contour information of the element icon based on the intermediate interactive image:

[0057] (1) Obtain pixel data of each pixel in the intermediate interactive image according to the target interface provided by the preset canvas object; wherein, the pixel data is used to indicate the color of the pixel;

[0058] Specifically, by using the getImageDataapi provided by canvas (corresponding to the target interface mentioned above), pixel data for each pixel in the intermediate interactive image is obtained. This pixel data indicates the color of the pixel, including white and black. For example, the first pixel value indicates that the pixel is white, and the second pixel value indicates that the pixel is black. Additionally, the pixel data can also include the coordinates of the pixel.

[0059] (2) Determine the edge outline information of the element icon based on the pixel data.

[0060] Specifically, based on the color of the pixels indicated by the pixel data, first obtain the white pixels in the edge detection results, and then determine the edge outline of the element icon from the white pixels. For example, the pixels located at the edge can be determined by scanning line by line, or the pixels located at the edge can be determined by the coordinates of the pixels, and then the pixels located at the edge can be determined as the edge outline information of the element icon.

[0061] One possible implementation: From each row of pixels in the intermediate interactive image, obtain the first pixel point whose pixel data is the first pixel data; wherein, the first pixel data is used to indicate that the pixel point is the edge detection result of the element icon; obtain the target pixel points located at both ends from the first pixel points in each row, and determine the target pixel points as the edge contour endpoints of the element icon; determine the coordinates of the edge contour endpoints as the edge contour information of the element icon.

[0062] Specifically, by scanning line by line, the first pixel in each row whose pixel data is the first pixel data is obtained. This first pixel data indicates that the pixel's color is white, which is the edge detection result of the element icon mentioned above. Then, the pixels at both ends of the first pixel in each row are determined as edge contour endpoints. Finally, the coordinates of these edge contour endpoints are determined as edge contour information, resulting in the following: Figure 4 The shown element icon has an edge outline. In this method, the outline endpoints are determined by scanning line by line, with the white-colored points at both ends of each line.

[0063] In the above method, the pixel data of each pixel can be obtained through the target interface provided by the preset canvas object, and the edge contour information can be determined through the pixel data, which further improves the accuracy of the edge contour information.

[0064] Because the element icon will have a broken outline when it reaches the boundary of the first interactive image, such as Figure 4 As shown, there is a problem that the outline of the rectangular frame cannot completely cover the element icon. Based on this, after determining the coordinates of the endpoints of the edge outline as the edge outline information of the element icon, the method further includes:

[0065] If there are two target edge contour endpoints in the edge contour endpoints of the element icon, located at the first edge position of the middle interactive image; obtain the edge contour endpoints of each row or column between the two target edge contour endpoints; for each row or column edge contour endpoint, update the edge contour endpoint closer to the first edge position to the edge point of the corresponding first edge position of the row or column.

[0066] The aforementioned first edge position can be the left, right, top, or bottom, etc. Typically, in actual implementation, it's necessary to judge and process the left, right, top, and bottom edges. Taking the left edge position as an example, firstly, following a top-to-bottom direction, determine if there are any edge contour endpoints in the edge contour information that are image edge points. That is, whether there is a first target edge contour endpoint at the first edge position of the middle interactive image. If so, record the row containing the first target edge contour endpoint as r0. Continue scanning downwards to determine if there are any other edge contour endpoints in the edge contour information that are image edge points. That is, whether there is a second target edge contour endpoint at the first edge position of the middle interactive image. If so, record the row containing the second target edge contour endpoint as r1. Obtain the edge contour endpoints of each row between the two target edge contour endpoints. Obtain all edge contour endpoints between rows r1 and r0, and update the edge contour endpoints closer to the left edge to the edge point of the corresponding first edge position in that row. Specifically, update the x-coordinate of the edge contour endpoint closer to the left edge to the x-coordinate of the edge point of the corresponding first edge position in that row. Additionally, if a row does not have an edge contour endpoint near the left edge, then the edge point at the first edge position is set as the edge contour endpoint of the left edge of that row, resulting in the following: Figure 5 The edge outline of the element icon shown demonstrates that the edge outline completely covers the element icon.

[0067] In the above method, by updating the endpoints of the edge contour of each row in the contour line section to the edge points of the first edge position, it is possible to first enable the edge contour of the element icon to close along the edge, and also to ensure that the contour line can completely contain the element icon, thereby further improving the accuracy of the edge contour information.

[0068] Furthermore, since edge detection algorithms may discard some image details of the first interactive image, directly using the edge contour information obtained in the above steps to crop the first interactive image may result in the loss of some image details. Therefore, in order to ensure that the edge contour can completely cover the element icon and avoid the loss of some details, after the above steps of performing edge detection on the element icon in the first interactive image to obtain the edge contour information of the element icon, the above method further includes:

[0069] Based on the edge outline information of the element icon, expand the edge outline of the element icon to obtain the expanded edge outline information of the element icon.

[0070] The edge contour of an element icon can be expanded based on the coordinates of its edge contour endpoints. Specifically, a certain value is subtracted from the coordinates of each edge contour endpoint on the left and a certain value is added to the coordinates of each edge contour endpoint on the right. Alternatively, a certain value can be added to the coordinates of each edge contour endpoint on the top and a certain value is subtracted from the coordinates of each edge contour endpoint on the bottom, thus obtaining the edge contour information of the expanded element icon.

[0071] In the above method, by expanding the edge outline of the element icon, the loss of details in the image is avoided, the edge outline of the element icon has more details, and the accuracy of the edge outline information is improved.

[0072] One possible implementation of the above steps, which involve expanding the edge contour of an element icon based on its edge contour information to obtain the expanded edge contour information of the element icon, is as follows:

[0073] (1) Obtain the first initial coordinates of the first edge contour endpoint located in the first direction and the second initial coordinates of the second edge contour endpoint located in the second direction from the edge contour information;

[0074] The first direction mentioned above can be left, right, up, or down. Similarly, the second direction can correspond to right, left, down, or up. It can be understood that the first and second directions are relative; for example, if the first direction is left, then the second direction is right. Taking a left-handed first direction and a right-handed second direction as an example, the endpoint of the first edge contour can be... Figure 5 The left edge contour endpoint of the dashed line shown above, the aforementioned second contour endpoint can be... Figure 5 The right edge of the dashed line shown is the endpoint of the outline, where the dashed line is the center line of the interactive image. The initial coordinates mentioned above include the x-coordinate and y-coordinate, i.e., (x, y).

[0075] Specifically, obtain the first initial coordinates of the first edge contour endpoints in the first direction and the second initial coordinates of the second edge contour endpoints in the second direction for each row.

[0076] (2) Move the first initial coordinate in the first direction by a first value, and move the second initial coordinate in the second direction by a second value to obtain the first target coordinate of the endpoint of the first edge contour and the second target coordinate of the endpoint of the second edge contour.

[0077] The first value mentioned above can be set according to actual needs, such as 10. The second value mentioned above can be the same as or different from the first value, depending on the actual needs. Continuing with the example above, for the left edge contour endpoint of each row, that is, the first initial coordinate of the first edge contour endpoint is subtracted from the first value, that is, the first initial coordinate is shifted to the left by the first value, to obtain the first target coordinate of the first edge contour endpoint, i.e., (x-10, y). Similarly, for the right edge contour endpoint of each row, that is, the second initial coordinate of the second edge contour endpoint is added to the second value, that is, the second initial coordinate is shifted to the right by the second value, to obtain the second target coordinate of the second edge contour endpoint, i.e., (x+10, y). Figure 5 As shown, the point at the left end of the dashed line moves to the left by one value, and the point at the right end of the dashed line moves to the right by two values.

[0078] (3) Determine the edge contour information of the expanded element icon based on the first target coordinates and the second target coordinates.

[0079] Specifically, the endpoints of the moved edge contour can be directly determined as the edge contour information of the expanded element icon. Alternatively, based on the first and second target coordinates, the endpoints of the moved edge contour can be further processed, such as smoothing or further expansion, to obtain the edge contour information of the expanded element icon.

[0080] In the above method, the edge contour of the element icon is expanded by moving the endpoint of the edge wheel contour. While ensuring that the shape of the edge contour remains unchanged, the edge contour of the element icon can be further expanded, thereby further improving the accuracy of the edge contour information of the element icon.

[0081] The first and second directions mentioned above are used to indicate the rows of pixels in the element icon; the step of determining the edge contour information of the expanded element icon based on the first and second target coordinates, one possible implementation is as follows:

[0082] Divide the element icon into multiple sub-regions; each sub-region includes the region corresponding to a first preset row number; for each sub-region, perform the following operations: obtain the minimum value of the x-coordinate of the first target coordinate of the first edge contour endpoint in the sub-region, and the maximum value of the x-coordinate of the second target coordinate of the second edge contour endpoint; update the x-coordinate of the first initial coordinate of the first edge contour endpoint in the sub-region to the minimum value, and update the x-coordinate of the second initial coordinate of the second edge contour endpoint in the sub-region to the maximum value, thereby obtaining the edge contour information of the expanded element icon.

[0083] The first preset number of rows can be set according to actual needs, such as 10 rows, 5 rows, etc. Specifically, if the vertical coordinate of the first row is y, then the first sub-region can be represented as the region from y-10 to the range of row y. In the first sub-region, obtain the minimum value of the x-coordinate of the first target coordinate of all left edge contour endpoints in the sub-region, i.e., the first edge contour endpoints. Update the x-coordinate of the first initial coordinate of the first edge contour endpoints in the sub-region to the minimum value. This can be expressed as follows: for the left endpoint (x, y) of each row, shift x 10 to the left, and shift y-10 to the x-coordinate of all x-coordinates of row y. i Let it be Min(x) i (x-10). Additionally, obtain the maximum x-coordinate of the second target coordinate of all right-end edge contour endpoints within this sub-region, i.e., the second edge contour endpoints. Update the x-coordinate of the second initial coordinate of the second edge contour endpoints within this sub-region to the maximum value. This can be expressed as follows: for the right endpoint (x, y) of each row, shift x 10 to the right, and y-10 to all x-coordinates of row y. i Let it be Max(x) i (x+10). The edge outline information of the expanded element icon is obtained as follows: Figure 6 As shown.

[0084] In the above method, by dividing the element icon into multiple sub-regions and expanding the endpoints of the moved edge contour in each sub-region, the smoothness of the edge contour can be improved while ensuring the basic contour of the element icon.

[0085] The aforementioned edge contour information includes the edge contour endpoints of the element icon and the coordinates of the edge contour endpoints; step S206, which involves cropping the first interactive image based on the edge contour information of the element icon to obtain a second interactive image containing the element icon, can be implemented in the following possible ways:

[0086] Based on the coordinates of the endpoints of the edge contour, the specified attributes of the display style of the first interactive image are set to obtain the cropping script of the first interactive image; using the cropping script, the element icons in the first interactive image are cropped to obtain the second interactive image containing the element icons.

[0087] The aforementioned edge contour information can be represented as M 243 0 L 241 1 L 239 2 L 237 3…, where M represents moving to (243,0) and L represents connecting from the previous point to (241,1). Specifically, based on the coordinates of the edge contour endpoints, the clip-path property of the element's CSS style can be set to path('M 241 0 L241 1…') to crop the first interactive image from its original rectangular area to the outer contour area of ​​the element icon, thus achieving the goal of making the clickable hotspot the outer contour of the image. For example… Figure 7 As shown, after the above cropping process, the designated page for displaying the second interactive image is obtained, thus avoiding the problem of mutual obstruction between the interactive images.

[0088] Furthermore, the above steps are actually JavaScript code. By selecting a local image and the first interactive image mentioned above, the image outline path (path) can be output, which is the edge outline information mentioned above. Setting the element's CSS style `clip-path` property to the outline path path will crop the element's clickable area from the original rectangular area to the outline area of ​​the element icon. This restricts the clickable hotspot to the image outline area, effectively reducing the overlap area of ​​the clickable hotspot when rectangular elements overlap, improving click accuracy, and enhancing the user experience.

[0089] Corresponding to the above method embodiments, this embodiment of the invention provides an interactive image processing apparatus, such as... Figure 8 As shown, the device includes:

[0090] The acquisition module 81 is used to acquire the first interactive image to be processed; wherein, the first interactive image includes element icons; the element icons occupy part of the image area of ​​the first interactive image;

[0091] Edge detection module 82 is used to perform edge detection on element icons in the first interactive image to obtain the edge contour information of the element icons;

[0092] The cropping module 83 is used to crop the first interactive image based on the edge contour information of the element icon to obtain a second interactive image containing the element icon; wherein, the second interactive image is used to: provide an interactive area for preset interactive events based on the edge contour of the second interactive image when the second interactive image is displayed on a specified page.

[0093] This invention provides an interactive image processing apparatus. The apparatus acquires a first interactive image to be processed, including element icons; the element icons occupy a portion of the image area of ​​the first interactive image; edge detection is performed on the element icons in the first interactive image to obtain their edge contour information; based on the edge contour information of the element icons, the first interactive image is cropped to obtain a second interactive image containing the element icons. This method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons in the first interactive image, and removing excess portions, obtains a second interactive image containing the element icons. This avoids the problem of interactive images displayed on a specified page occluding each other, thus preventing the accidental triggering of preset interactive events. It can provide the interactive area for preset interactive events based on the edge contour of the second interactive image, improving the user experience.

[0094] Furthermore, the aforementioned edge detection module is also used to: perform edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons; draw the edge detection results onto a preset canvas object to obtain an intermediate interactive image containing the element icons; and determine the edge contour information of the element icons based on the intermediate interactive image.

[0095] Furthermore, the aforementioned edge detection module is also used to: obtain pixel data of each pixel in the intermediate interactive image according to the target interface provided by the preset canvas object; wherein, the pixel data is used to indicate the color of the pixel; and determine the edge contour information of the element icon based on the pixel data.

[0096] Furthermore, the aforementioned edge detection module is also used to: obtain the first pixel point in each row of pixels of the intermediate interactive image whose pixel data is the first pixel data; wherein, the first pixel data is used to indicate that the pixel point is the edge detection result of the element icon; obtain the target pixel points located at both ends from the first pixel points in each row, and determine the target pixel points as the edge contour endpoints of the element icon; and determine the coordinates of the edge contour endpoints as the edge contour information of the element icon.

[0097] Furthermore, the aforementioned edge detection module also includes an update unit, used for: if there are two target edge contour endpoints in the edge contour endpoints of the element icon, located at the first edge position of the middle interactive image; obtaining the edge contour endpoints of each row or column between the two target edge contour endpoints; and for each row or column edge contour endpoint, updating the edge contour endpoint closer to the first edge position to the edge point of the corresponding first edge position of the row or column.

[0098] Furthermore, the aforementioned edge detection module is also used to: convert the first interactive image into a grayscale image; determine the pixels in the grayscale image whose grayscale value changes are greater than a first preset threshold as edge points using an edge detection algorithm; and determine the edge points as the edge detection results of the element icon.

[0099] Furthermore, the above-mentioned device also includes an extension module, used to: extend the edge contour of the element icon according to the edge contour information of the element icon, so as to obtain the extended edge contour information of the element icon.

[0100] Furthermore, the aforementioned extension module is also used to: obtain, from the edge contour information, the first initial coordinates of the first edge contour endpoint located in the first direction and the second initial coordinates of the second edge contour endpoint located in the second direction; move the first initial coordinates to the first direction by a first value and move the second initial coordinates to the second direction by a second value to obtain the first target coordinates of the first edge contour endpoint and the second target coordinates of the second edge contour endpoint; and determine the edge contour information of the extended element icon based on the first target coordinates and the second target coordinates.

[0101] Furthermore, the first and second directions mentioned above are used to indicate the rows of pixels in the element icon; the extension module is also used to: divide the element icon into multiple sub-regions; wherein each sub-region includes a region corresponding to a first preset number of rows; for each sub-region, perform the following operations: obtain the minimum value of the abscissa of the first target coordinate of the endpoint of the first edge contour in the sub-region, and the maximum value of the abscissa of the second target coordinate of the endpoint of the second edge contour; update the abscissa of the first initial coordinate of the endpoint of the first edge contour in the sub-region to the minimum value, and update the abscissa of the second initial coordinate of the endpoint of the second edge contour in the sub-region to the maximum value, thereby obtaining the edge contour information of the extended element icon.

[0102] Furthermore, the aforementioned edge contour information includes the edge contour endpoints of the element icons and the coordinates of the edge contour endpoints; the aforementioned cropping module is also used to: set the specified attributes of the display style of the first interactive image according to the coordinates of the edge contour endpoints, and obtain the cropping script of the first interactive image; and crop the element icons in the first interactive image through the cropping script to obtain a second interactive image containing the element icons.

[0103] The interactive image processing apparatus provided in this embodiment of the invention has the same technical features as the interactive image processing method provided in the above embodiments, so it can also solve the same technical problems and achieve the same technical effects.

[0104] This embodiment also provides an electronic device, including a processor and a memory. The memory stores computer-executable instructions that can be executed by the processor. The processor executes the computer-executable instructions to implement the above-described interactive image processing method. This electronic device can be a server or a terminal device.

[0105] See Figure 9 As shown, the electronic device includes a processor 100 and a memory 101. The memory 101 stores computer-executable instructions that can be executed by the processor 100. The processor 100 executes the computer-executable instructions to implement the above-mentioned interactive image processing method, which specifically includes the following method steps:

[0106] Obtain a first interactive image to be processed; wherein the first interactive image includes element icons; the element icons occupy a portion of the image area of ​​the first interactive image; perform edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons; based on the edge contour information of the element icons, crop the first interactive image to obtain a second interactive image containing the element icons; wherein the second interactive image is used to: when the second interactive image is displayed on a specified page, provide an interactive area for a preset interactive event based on the edge contour of the second interactive image.

[0107] In the above method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons in the first interactive image, and removing the excess parts, a second interactive image containing the element icons is obtained. This avoids the problem of interactive images displayed on a specified page occluding each other. Based on the edge contours of the second interactive image, it can provide the interactive area for preset interactive events, thus improving the user experience.

[0108] The steps described above for performing edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons include: performing edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons; drawing the edge detection results onto a preset canvas object to obtain an intermediate interactive image containing the element icons; and determining the edge contour information of the element icons based on the intermediate interactive image. In this method, drawing the edge detection results onto a canvas object to obtain an intermediate interactive image allows for the determination of the edge contour information of the element icons using the functions of the canvas object, resulting in richer contour information and improved accuracy of the edge contour information.

[0109] The steps described above for determining the edge contour information of an element icon based on an intermediate interactive image include: obtaining pixel data for each pixel in the intermediate interactive image according to a target interface provided by a preset canvas object; wherein the pixel data is used to indicate the color of the pixel; and determining the edge contour information of the element icon based on the pixel data. In this method, the pixel data for each pixel can be obtained through the target interface provided by the preset canvas object, and the edge contour information can be determined using the pixel data, further improving the accuracy of the edge contour information.

[0110] The steps described above for determining the edge contour information of an element icon based on pixel data include: obtaining the first pixel point in each row of pixels of the intermediate interactive image whose pixel data is the first pixel data; wherein the first pixel data is used to indicate that the pixel point is the edge detection result of the element icon; obtaining the target pixel points located at both ends from the first pixel points in each row, and determining the target pixel points as the edge contour endpoints of the element icon; and determining the coordinates of the edge contour endpoints as the edge contour information of the element icon.

[0111] Following the step of determining the coordinates of the edge contour endpoints as the edge contour information of the element icon, the method further includes: if there are two target edge contour endpoints located at the first edge position of the middle interactive image among the edge contour endpoints of the element icon; obtaining the edge contour endpoints of each row or column between the two target edge contour endpoints; and updating the edge contour endpoints closer to the first edge position to the edge point of the corresponding first edge position for each row or column. In this method, by updating the edge contour endpoints of each row in the contour line segment to the edge point of the first edge position, the edge contour of the element icon can first be closed along the edge, and it can also ensure that the contour line completely contains the element icon, further improving the accuracy of the edge contour information.

[0112] The steps described above for performing edge detection on element icons in the first interactive image to obtain edge detection results for the element icons include: converting the first interactive image into a grayscale image; using an edge detection algorithm to identify pixels in the grayscale image whose grayscale value changes greater than a first preset threshold as edge points; and determining the edge points as the edge detection results for the element icons. In this method, by converting the first interactive image into a grayscale image and then performing edge detection on the grayscale image using an edge detection algorithm to obtain edge detection results, the accuracy of edge detection is improved.

[0113] After performing edge detection on the element icons in the first interactive image to obtain their edge contour information, the method further includes: expanding the edge contour of the element icons based on their edge contour information to obtain expanded edge contour information. This method avoids losing details in the image by expanding the edge contour of the element icons, resulting in more detailed edge contours and improving the accuracy of the edge contour information.

[0114] The steps described above for expanding the edge contour of an element icon based on its edge contour information to obtain expanded edge contour information include: obtaining, from the edge contour information, a first initial coordinate of a first edge contour endpoint located in a first direction and a second initial coordinate of a second edge contour endpoint located in a second direction; shifting the first initial coordinate in the first direction by a first value and shifting the second initial coordinate in the second direction by a second value to obtain a first target coordinate of the first edge contour endpoint and a second target coordinate of the second edge contour endpoint; and determining the expanded edge contour information of the element icon based on the first and second target coordinates. In this method, by moving the edge contour endpoints, the edge contour of the element icon is expanded, further expanding the edge contour of the element icon while ensuring that the edge contour shape remains unchanged, thus improving the accuracy of the element icon's edge contour information.

[0115] The first and second directions mentioned above are used to indicate the rows of pixels in the element icon; the step of determining the edge contour information of the expanded element icon based on the first and second target coordinates includes: dividing the element icon into multiple sub-regions; wherein each sub-region includes a region corresponding to a first preset number of rows; for each sub-region, performing the following operations: obtaining the minimum value of the abscissa of the first target coordinate of the endpoint of the first edge contour in the sub-region, and the maximum value of the abscissa of the second target coordinate of the endpoint of the second edge contour; updating the abscissa of the first initial coordinate of the endpoint of the first edge contour in the sub-region to the minimum value, and updating the abscissa of the second initial coordinate of the endpoint of the second edge contour in the sub-region to the maximum value, thereby obtaining the edge contour information of the expanded element icon. In this method, by dividing the element icon into multiple sub-regions and expanding the moved edge contour endpoints in each sub-region, the smoothness of the edge contour can be improved while ensuring the basic contour of the element icon.

[0116] The aforementioned edge contour information includes the edge contour endpoints of the element icons and their coordinates. The step of cropping the first interactive image based on the element icon's edge contour information to obtain a second interactive image containing the element icons includes: setting a specified attribute of the display style of the first interactive image according to the coordinates of the edge contour endpoints to obtain a cropping script for the first interactive image; and cropping the element icons in the first interactive image using the cropping script to obtain a second interactive image containing the element icons. This restricts the clickable hotspot to the image outline area, effectively reducing the overlap area of ​​the clickable hotspot when rectangular elements overlap, improving click accuracy, and enhancing the user experience.

[0117] Furthermore, Figure 9 The electronic device shown also includes a bus 102 and a communication interface 103, with the processor 100, the communication interface 103 and the memory 101 connected via the bus 102.

[0118] The memory 101 may include high-speed random access memory (RAM) or non-volatile memory, such as at least one disk storage device. Communication between this system network element and at least one other network element is achieved through at least one communication interface 103 (which can be wired or wireless), such as the Internet, wide area network, local area network, or metropolitan area network. The bus 102 may be an ISA bus, PCI bus, or EISA bus, etc. The bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 9 The symbol is represented by a single double-headed arrow, but this does not mean that there is only one bus or one type of bus.

[0119] Processor 100 may be an integrated circuit chip with signal processing capabilities. In implementation, each step of the above method can be completed by the integrated logic circuitry in the hardware of processor 100 or by instructions in software form. Processor 100 may be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it may also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. It can implement or execute the methods, steps, and logic block diagrams disclosed in the embodiments of this invention. The general-purpose processor may be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this invention can be directly manifested as execution by a hardware decoding processor, or execution by a combination of hardware and software modules in the decoding processor. The software module can reside in a mature storage medium in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, or registers. This storage medium is located in memory 101. The processor 100 reads the information in memory 101 and, in conjunction with its hardware, completes the steps of the interactive image processing method described in the foregoing embodiments.

[0120] This embodiment also provides a computer-readable storage medium storing computer-executable instructions. When the computer-executable instructions are invoked and executed by a processor, the computer-executable instructions cause the processor to implement the above-described method for processing interactive images, specifically including the following method steps:

[0121] In the above method, by extracting the edge contours of the element icons in the first interactive image, cropping the element icons in the first interactive image, and removing the excess parts, a second interactive image containing the element icons is obtained. This avoids the problem of interactive images displayed on a specified page occluding each other. Based on the edge contours of the second interactive image, it can provide the interactive area for preset interactive events, thus improving the user experience.

[0122] The steps described above for performing edge detection on the element icons in the first interactive image to obtain the edge contour information of the element icons include: performing edge detection on the element icons in the first interactive image to obtain the edge detection results of the element icons; drawing the edge detection results onto a preset canvas object to obtain an intermediate interactive image containing the element icons; and determining the edge contour information of the element icons based on the intermediate interactive image. In this method, drawing the edge detection results onto a canvas object to obtain an intermediate interactive image allows for the determination of the edge contour information of the element icons using the functions of the canvas object, resulting in richer contour information and improved accuracy of the edge contour information.

[0123] The steps described above for determining the edge contour information of an element icon based on an intermediate interactive image include: obtaining pixel data for each pixel in the intermediate interactive image according to a target interface provided by a preset canvas object; wherein the pixel data is used to indicate the color of the pixel; and determining the edge contour information of the element icon based on the pixel data. In this method, the pixel data for each pixel can be obtained through the target interface provided by the preset canvas object, and the edge contour information can be determined using the pixel data, further improving the accuracy of the edge contour information.

[0124] The steps described above for determining the edge contour information of an element icon based on pixel data include: obtaining the first pixel point in each row of pixels of the intermediate interactive image whose pixel data is the first pixel data; wherein the first pixel data is used to indicate that the pixel point is the edge detection result of the element icon; obtaining the target pixel points located at both ends from the first pixel points in each row, and determining the target pixel points as the edge contour endpoints of the element icon; and determining the coordinates of the edge contour endpoints as the edge contour information of the element icon.

[0125] Following the step of determining the coordinates of the edge contour endpoints as the edge contour information of the element icon, the method further includes: if there are two target edge contour endpoints located at the first edge position of the middle interactive image among the edge contour endpoints of the element icon; obtaining the edge contour endpoints of each row or column between the two target edge contour endpoints; and updating the edge contour endpoints closer to the first edge position to the edge point of the corresponding first edge position for each row or column. In this method, by updating the edge contour endpoints of each row in the contour line segment to the edge point of the first edge position, the edge contour of the element icon can first be closed along the edge, and it can also ensure that the contour line completely contains the element icon, further improving the accuracy of the edge contour information.

[0126] The steps described above for performing edge detection on element icons in the first interactive image to obtain edge detection results for the element icons include: converting the first interactive image into a grayscale image; using an edge detection algorithm to identify pixels in the grayscale image whose grayscale value changes greater than a first preset threshold as edge points; and determining the edge points as the edge detection results for the element icons. In this method, by converting the first interactive image into a grayscale image and then performing edge detection on the grayscale image using an edge detection algorithm to obtain edge detection results, the accuracy of edge detection is improved.

[0127] After performing edge detection on the element icons in the first interactive image to obtain their edge contour information, the method further includes: expanding the edge contour of the element icons based on their edge contour information to obtain expanded edge contour information. This method avoids losing details in the image by expanding the edge contour of the element icons, resulting in more detailed edge contours and improving the accuracy of the edge contour information.

[0128] The steps described above for expanding the edge contour of an element icon based on its edge contour information to obtain expanded edge contour information include: obtaining, from the edge contour information, a first initial coordinate of a first edge contour endpoint located in a first direction and a second initial coordinate of a second edge contour endpoint located in a second direction; shifting the first initial coordinate in the first direction by a first value and shifting the second initial coordinate in the second direction by a second value to obtain a first target coordinate of the first edge contour endpoint and a second target coordinate of the second edge contour endpoint; and determining the expanded edge contour information of the element icon based on the first and second target coordinates. In this method, by moving the edge contour endpoints, the edge contour of the element icon is expanded, further expanding the edge contour of the element icon while ensuring that the edge contour shape remains unchanged, thus improving the accuracy of the element icon's edge contour information.

[0129] The first and second directions mentioned above are used to indicate the rows of pixels in the element icon; the step of determining the edge contour information of the expanded element icon based on the first and second target coordinates includes: dividing the element icon into multiple sub-regions; wherein each sub-region includes a region corresponding to a first preset number of rows; for each sub-region, performing the following operations: obtaining the minimum value of the abscissa of the first target coordinate of the endpoint of the first edge contour in the sub-region, and the maximum value of the abscissa of the second target coordinate of the endpoint of the second edge contour; updating the abscissa of the first initial coordinate of the endpoint of the first edge contour in the sub-region to the minimum value, and updating the abscissa of the second initial coordinate of the endpoint of the second edge contour in the sub-region to the maximum value, thereby obtaining the edge contour information of the expanded element icon. In this method, by dividing the element icon into multiple sub-regions and expanding the moved edge contour endpoints in each sub-region, the smoothness of the edge contour can be improved while ensuring the basic contour of the element icon.

[0130] The aforementioned edge contour information includes the edge contour endpoints of the element icons and their coordinates. The step of cropping the first interactive image based on the element icon's edge contour information to obtain a second interactive image containing the element icons includes: setting a specified attribute of the display style of the first interactive image according to the coordinates of the edge contour endpoints to obtain a cropping script for the first interactive image; and cropping the element icons in the first interactive image using the cropping script to obtain a second interactive image containing the element icons. This restricts the clickable hotspot to the image outline area, effectively reducing the overlap area of ​​the clickable hotspot when rectangular elements overlap, improving click accuracy, and enhancing the user experience.

[0131] The computer program products of the interactive image processing method, apparatus, electronic device and system provided in the embodiments of the present invention include a computer-readable storage medium storing program code. The instructions included in the program code can be used to execute the methods described in the preceding method embodiments. For specific implementation, please refer to the method embodiments, which will not be repeated here.

[0132] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working process of the system and apparatus described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.

[0133] Furthermore, in the description of the embodiments of the present invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," and "linking" should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral connection; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; and they can refer to the internal connection of two components. Those skilled in the art can understand the specific meaning of the above terms in the present invention based on the specific circumstances.

[0134] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this invention, essentially, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0135] In the description of this invention, it should be noted that the terms "center," "upper," "lower," "left," "right," "vertical," "horizontal," "inner," and "outer," etc., indicate the orientation or positional relationship based on the orientation or positional relationship shown in the accompanying drawings. They are used only for the convenience of describing the invention and for simplifying the description, and do not indicate or imply that the device or element referred to must have a specific orientation, or be constructed and operated in a specific orientation. Therefore, they should not be construed as limitations on the invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and should not be construed as indicating or implying relative importance.

[0136] Finally, it should be noted that the above embodiments are merely specific implementations of the present invention, used to illustrate the technical solutions of the present invention, and not to limit it. The scope of protection of the present invention is not limited thereto. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments within the technical scope disclosed in the present invention, or make equivalent substitutions for some of the technical features; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be covered within the scope of protection of the present invention. Therefore, the scope of protection of the present invention should be determined by the scope of the claims.

Claims

1. A method of processing interactive pictures, characterized by, The method comprises: acquiring a first interactive picture to be processed; wherein the first interactive picture comprises an element icon; the element icon occupies part of a picture area of the first interactive picture; performing edge detection on the element icon in the first interactive picture to obtain edge contour information of the element icon; performing clipping processing on the first interactive picture based on the edge contour information of the element icon to obtain a second interactive picture comprising the element icon; wherein the second interactive picture is used to provide an interactive area of a preset interactive event based on the edge contour of the second interactive picture when the second interactive picture is displayed on a specified page; The step of performing edge detection on the element icon in the first interactive picture to obtain edge contour information of the element icon comprises: performing edge detection on the element icon in the first interactive picture to obtain an edge detection result of the element icon; drawing the edge detection result into a preset canvas object to obtain an intermediate interactive picture comprising the element icon; determining the edge contour information of the element icon based on the intermediate interactive picture.

2. The method of claim 1, wherein, The step of determining the edge contour information of the element icon based on the intermediate interactive picture comprises: acquiring pixel data of each pixel point in the intermediate interactive picture according to a target interface provided by the preset canvas object; wherein the pixel data is used to indicate the color of the pixel point; determining the edge contour information of the element icon according to the pixel data.

3. The method of claim 2, wherein, The step of determining the edge contour information of the element icon according to the pixel data comprises: from each row of pixel points of the intermediate interactive picture, acquiring a first pixel point with first pixel data in each row of pixel points; wherein the first pixel data is used to indicate that the pixel point is an edge detection result of the element icon; from each row of the first pixel points, acquiring target pixel points located at both ends and determining the target pixel points as edge contour endpoints of the element icon; determining the coordinates of the edge contour endpoints as the edge contour information of the element icon.

4. The method of claim 3, wherein, After the step of determining the coordinates of the edge contour endpoints as the edge contour information of the element icon, the method further comprises: in the edge contour endpoints of the element icon, if there are two target edge contour endpoints located at a first edge position of the intermediate interactive picture; acquiring edge contour endpoints of each row or each column between the two target edge contour endpoints; for the edge contour endpoints of each row or each column, updating an edge contour endpoint close to the first edge position as an edge point of the first edge position corresponding to the row or the column.

5. The method of claim 1, wherein, The step of performing edge detection on the element icon in the first interactive picture to obtain an edge detection result of the element icon comprises: converting the first interactive picture into a grayscale picture; determining, by an edge detection algorithm, a pixel point with a grayscale value change greater than a first preset threshold in the grayscale picture as an edge point; determining the edge point as the edge detection result of the element icon.

6. The method of claim 1, wherein, After the step of performing edge detection on the element icon in the first interactive picture to obtain edge contour information of the element icon, the method further comprises: According to the edge contour information of the element icon, the edge contour of the element icon is extended to obtain the extended edge contour information of the element icon.

7. The method of claim 6, wherein, The step of extending the edge contour of the element icon according to the edge contour information of the element icon to obtain the extended edge contour information of the element icon comprises: From the edge contour information, a first initial coordinate of a first edge contour endpoint in a first direction and a second initial coordinate of a second edge contour endpoint in a second direction are obtained; The first initial coordinate is moved by a first value in the first direction, and the second initial coordinate is moved by a second value in the second direction to obtain a first target coordinate of the first edge contour endpoint and a second target coordinate of the second edge contour endpoint; According to the first target coordinate and the second target coordinate, the extended edge contour information of the element icon is determined.

8. The method of claim 7, wherein, The first direction and the second direction are used to indicate the row of pixel points in the element icon; The step of determining the extended edge contour information of the element icon according to the first target coordinate and the second target coordinate comprises: The element icon is divided into a plurality of sub-regions; wherein each sub-region comprises a region corresponding to a first preset number of rows; for each sub-region, the following operations are performed: The minimum value of the horizontal coordinate of the first target coordinate of the first edge contour endpoint and the maximum value of the horizontal coordinate of the second target coordinate of the second edge contour endpoint in the sub-region are obtained; The horizontal coordinate of the first initial coordinate of the first edge contour endpoint in the sub-region is updated to the minimum value, and the horizontal coordinate of the second initial coordinate of the second edge contour endpoint in the sub-region is updated to the maximum value to obtain the extended edge contour information of the element icon.

9. The method of claim 1, wherein, The edge contour information comprises edge contour endpoints of the element icon and coordinates of the edge contour endpoints; The step of performing clipping processing on the first interactive picture based on the edge contour information of the element icon to obtain a second interactive picture containing the element icon comprises: According to the coordinates of the edge contour endpoints, a specified attribute of a display style of the first interactive picture is set to obtain a clipping script of the first interactive picture; The element icon in the first interactive picture is clipped through the clipping script to obtain a second interactive picture containing the element icon.

10. An apparatus for processing interactive pictures, characterized by The device comprises: An acquisition module is configured to acquire a first interactive picture to be processed; wherein the first interactive picture comprises an element icon; the element icon occupies part of a picture area of the first interactive picture; An edge detection module is configured to perform edge detection on the element icon in the first interactive picture to obtain edge contour information of the element icon; An extension module is configured to extend the edge contour of the element icon according to the edge contour information of the element icon to obtain the extended edge contour information of the element icon. The clipping module is configured to perform clipping processing on the first interactive picture based on the edge contour information of the element icon, to obtain a second interactive picture containing the element icon; and the second interactive picture is configured to provide an interactive area of a preset interactive event based on an edge contour of the second interactive picture when the second interactive picture is displayed on a designated page. The edge detection module is further configured to perform edge detection on an element icon in the first interactive picture to obtain an edge detection result of the element icon. The edge detection result is drawn into a preset canvas object to obtain an intermediate interactive picture containing the element icon. Edge contour information of the element icon is determined based on the intermediate interactive picture.

11. An electronic device, comprising: The computer readable storage medium stores computer executable instructions, and the computer executable instructions, when invoked and executed by a processor, cause the processor to implement the processing method of the interactive picture according to any one of claims 1-9.

12. A computer-readable storage medium, characterized in that, The computer readable storage medium stores computer executable instructions, and the computer executable instructions, when invoked and executed by a processor, cause the processor to implement the processing method of the interactive picture according to any one of claims 1-9.

Images