Envelope fitting method based on image edge extraction, electronic equipment and storage medium

Abstract

The invention discloses an envelope fitting method based on image edge extraction, electronic equipment and a storage medium, and aims to solve the problems of limited geometric deformation application scene, tedious mesh deformation operation, inaccurate mask method fitting and the like in the existing envelope fitting technology. The method specifically comprises the following steps: step 1, extracting an edge path and AABB data of a container image; step 2, calculating edge UV coordinates of the whole edge path; step 3, calculating internal UV coordinates of the container image; step 4, constructing vertex data and index data required by rendering; and step 5, rendering in a WebGL environment to realize natural envelope fitting of the target image and the container edge. The method can automatically extract edges, accurately fit irregular graphs, avoid manual control point operation, is suitable for scenes such as front-end image editing, and improves the sense of reality of image synthesis and user experience.

Description

Technical Field

[0001] This invention belongs to the field of image processing technology, and specifically refers to an envelope fitting method, electronic device and storage medium based on image edge extraction. Background Technology

[0002] With the continuous advancements in image processing and computer graphics, the image data processing capabilities of personal computers and smart terminals have significantly improved, enabling users to achieve more complex image compositing and rendering effects in multimedia applications, image editing, and other scenarios. Among numerous image processing effects, the envelope effect, as a common advanced image deformation technique, defines and transforms another image through its outer contour, thereby presenting a more vivid and personalized visual effect.

[0003] Existing methods for achieving image overlay effects mainly fall into two categories: one is based on geometric deformation techniques, which apply matrix transformations, freeform deformation (FFD), and mesh deformation to the content image; the other is based on masking methods, which use one image as a mask to restrict the display area of ​​another image, thereby achieving a basic overlay fitting effect. However, these methods all have certain limitations: (1) The matrix transformation method is only applicable to simple scenes with quadrilateral edges and is difficult to handle irregular graphics. (2) Although the mesh deformation method can theoretically achieve edge fitting by adding enough control points and dragging these points, in practice, a large number of control points need to be calculated, which makes the implementation process and operation steps extremely cumbersome and the computational complexity high. (3) Although the mask-based method is relatively simple to implement, it lacks accurate fitting of the container edge, and the encapsulation effect often appears unnatural and unrealistic.

[0004] Therefore, in the front-end canvas environment, how to automatically extract the edges of the container image and make the content image fit the envelope naturally becomes the core key to improving image editing effects and optimizing user experience. Summary of the Invention

[0005] The main objective of this invention is to provide an envelope fitting method, electronic device, and storage medium based on image edge extraction, which solves the problems existing in the prior art. It can automatically extract the edges of container images in the front-end canvas environment and fit the content image naturally with the envelope, thereby improving the image editing effect and optimizing the user experience.

[0006] To achieve the above objectives, one solution of the present invention is: An envelope fitting method based on image edge extraction includes: Step 1: Input the container image and extract its edge path and AABB data; Step 2: First, based on the AABB data from Step 1, set the UV coordinates of the edge points closest to the top left, top right, bottom right, and bottom left corners of the AABB on the edge path as four reference points. Divide the edge path into four edge regions: top, right, bottom, and left, starting from these four reference points. Second, traverse all edge points within each edge region, calculate the Euclidean distance of each edge point relative to the region's starting point, and divide this distance by the total length of the region to obtain the UV coordinates of that edge point. Calculate the UV coordinates along the entire edge path using this method. Step 3: First, render the container image onto the front-end canvas and fill the area formed by the edge path using `ctx.fill()`. Then, iterate through the pixels of the front-end canvas, extracting pixels with non-zero opacity to obtain the original coordinates of all internal pixels of the container image. Second, for each internal pixel of the container image, calculate its Euclidean distance to all edge points on the edge path, and obtain the two vectors formed by the adjacent edge points and the internal pixel. Use the vector dot product formula to calculate the angle between the internal pixel and the adjacent edge points. Substitute the Euclidean distance and the angle into the MVC weight formula to obtain the weight coefficient of the internal pixel relative to all edge points. Combine this weight coefficient with the UV coordinates of the edge points and substitute it into the MVC weight formula to obtain the UV coordinates corresponding to the internal pixel, realizing the mapping from the original coordinates to the UV space. Step 4: Construct the vertex and index data required for rendering; Step 5: Render in the WebGL environment.

[0007] Step 1 uses a traversal algorithm to extract the edge paths of the container image, specifically: First, starting from the top left corner of the container image, the first pixel with non-zero transparency is found by scanning and this pixel is taken as the starting point of the edge path; the coordinates of the starting point are recorded and marked as visited; the transparency of the neighboring pixels of this pixel is extracted and encoded, and then stored in the walking algorithm direction table, which is used as the direction information to determine the walking direction of the edge path; Secondly, the direction information of the current pixel is searched in the direction table of the movement algorithm. Based on the returned direction information, the pixel moves to the next pixel. The process of extracting the transparency of the neighboring pixels, encoding and storing the data in the table, continuing to look up the table, and moving to the next pixel is repeated until the edge path is closed or the starting point is returned. Furthermore, bounding box calculations are performed on the extracted edge paths to obtain AABB data that closely matches the edge paths.

[0008] Preferably, the specific steps of step 1 are as follows: Step 101: Input the container image into the algorithm module as the basic data for edge extraction; Step 102: Starting from the top left corner of the container image, scan line by line to find the first pixel with a non-zero transparency; Step 103: Use the coordinates of this pixel as the starting point of the edge path, record its coordinates and mark it as visited; Step 104: Check candidate pixels sequentially in the neighborhood of the current pixel to prepare for generating neighborhood encoding; Step 105: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left as encoding objects; Step 106: If the transparency of a neighboring pixel is greater than 0, the corresponding position is encoded as 1; otherwise, it is encoded as 0. Step 107: Concatenate the encoding results of the four neighboring fields into a four-bit binary number; Step 108: Convert the generated binary number into a decimal index, which will be used as input for looking up the direction table of the marching algorithm; Step 109: Based on the direction information returned by the lookup table, move to the next pixel; Step 110: Repeat steps 104 to 109 to regenerate the neighborhood code for the new pixel location and determine the direction of movement; Step 111: Continue moving until the path is closed or you return to the starting point to complete the extraction of the complete edge path of the container image; Step 112: Based on the extracted edge paths, calculate their minimum bounding rectangle to obtain AABB data.

[0009] The specific steps of step 2 are as follows: Step 201: Obtain the coordinates of the four corner points of the AABB data output in Step 1; Step 202: Find the edge point closest to the top left corner of AABB in the edge path and set its UV coordinates to UV(0,0); find the edge point closest to the top right corner of AABB in the edge path and set its UV coordinates to (1,0); find the edge point closest to the bottom right corner of AABB in the edge path and set its UV coordinates to (1,1); find the edge point closest to the bottom left corner of AABB in the edge path and set its UV coordinates to (0,1). Step 203: Starting from the four edge points, divide the edge path into four edge regions: top, right, bottom, and left. Step 204: Within each edge region, traverse all points in the order of the edge path and calculate the Euclidean distance from each point to the starting point of the corresponding region. Step 205: Divide the distance from each point to the starting point of the region by the total length of the region to obtain the UV coordinates of that point; Step 206: Repeat steps 204 and 205 to complete the UV coordinate calculation for all points within the four edge regions; Step 207: Integrate the UV coordinates of the four regions and establish the UV mapping relationship of each point on the complete edge path.

[0010] The specific steps of step 3 are as follows: Step 301: Using the edge UV coordinates as a basis, prepare to calculate the UV mapping relationship of each internal pixel of the container image; Step 302: Render the container image onto the front canvas, with the width and height of the front canvas matching those of the container image; Step 303: Use the ctx.fill() method to fill the area formed by the edge path; Step 304: Traverse every pixel on the front canvas, extract the pixels with non-zero opacity, and obtain the original coordinates of all internal pixels; Step 305: For each internal pixel Calculate its Euclidean distance to all edge points on the edge path. ; Step 306: Obtain the two vectors formed by the adjacent edge point and the internal pixel point; Step 307: Calculate internal pixels Angle between adjacent edge points The calculation formula is as follows: ; ; in, This represents the vector formed by the coordinates of the current internal pixel and the coordinates of one of its adjacent edge points. This represents a vector formed by the coordinates of the current internal pixel and the coordinates of another adjacent edge pixel; Representing vectors The One coordinate; Representing vectors The One coordinate; Step 308: Euclidean distance and included angle Substituting into the following formula, we obtain the internal pixel points. Weight coefficients relative to all edge points : ; Step 309: UV coordinates based on edge points and weighting coefficients Calculate the UV coordinates of each internal pixel. The calculation formula is as follows: ; ; in, This means that the current weight is divided by the sum of the weights of all edge points, and the current weight is normalized once. Indicates the first The weight coefficients of each edge point; Step 310: Repeat steps 305 to 309 to complete the UV mapping of all internal pixels.

[0011] The specific steps of step 4 are as follows: After obtaining the original coordinates and corresponding UV coordinates of all internal pixels, the original coordinates of the internal pixels are used as vertex data. At the same time, all internal pixels are traversed, and triangle index data is generated by traversing pixels one by one. The target image is used as texture input, and the target image envelope is fitted to the inside edge of the container image through the mapping relationship between vertex data and index data.

[0012] Preferably, the specific steps of step 5 are as follows: Vertex data, index data, and texture data of the target image are fed into the WebGL rendering pipeline and accelerated by the front-end GPU. Finally, the rendering result of the target image after being enveloped and fitted according to the edge of the container image is output in the front-end canvas.

[0013] The second solution of the present invention is: An electronic device includes a processor, a memory, and an application program; the application program is stored in the memory and configured to be executed by the processor using the image edge extraction-based envelope fitting method.

[0014] The third solution of the present invention is: A computer-readable storage medium storing a computer program; when executed in the computer, the computer program causes the computer to perform the envelope fitting method based on image edge extraction.

[0015] After adopting the above technical solution, the present invention has the following technical effects: (I) By automatically extracting the edges of the container image, the cover fitting of the content image is realized, avoiding the tedious operation of manually setting and adjusting a large number of control points in the traditional FFD method, which greatly reduces the threshold for use; (II) It can accurately fit irregular edges, so that the content image and the container edge can be naturally integrated, which enhances the realism and expressiveness of the image synthesis; (III) This technical solution is applicable to various application scenarios such as web front-end design and online image editing, and can meet the needs of different terminal devices for efficient and realistic image processing effects. Attached Figure Description

[0016] Figure 1 Effects of specific embodiments of the present invention Figure 1 .

[0017] Figure 2 Effects of specific embodiments of the present invention Figure 2 . Detailed Implementation

[0018] To further explain the technical solution of the present invention, the present invention will be described in detail below through specific embodiments.

[0019] This invention discloses an envelope fitting method based on image edge extraction, comprising: Step 1: Obtain edge path and AABB data Input a container image and extract its edge paths and AABB (Axis-Aligned Bounding Box) data.

[0020] In step 1, the marching algorithm is used to extract the edge paths of the container image, specifically: First, starting from the top left corner of the container image, the first pixel with a non-zero transparency is scanned and designated as the starting point of the edge path. The coordinates of the starting point are recorded and marked as visited to prevent repeated tracking. The transparency of the neighboring pixels (adjacent pixels in the top, bottom, left, and right directions) is extracted and encoded, then stored in the movement algorithm direction table as directional information to determine the movement direction of the edge path. For example, taking the current pixel as a reference point, its four neighboring pixels are selected as top, right, bottom, and left. If the transparency of a neighboring pixel is greater than zero, the corresponding position is encoded as 1; otherwise, it is encoded as 0, resulting in a four-bit binary number, such as "1010" (this binary encoding can also be converted to a decimal index).

[0021] Secondly, the direction information of the current pixel is looked up in the direction table of the movement algorithm. Based on the returned direction information, the pixel moves to the next pixel. This process of extracting the transparency of neighboring pixels, encoding and storing the data in the table, looking up the data again, and moving to the next pixel is repeated until the edge path is closed or the pixel returns to the starting point. In this way, the pixel can move step by step along the edge of the container image until the path is closed or the pixel returns to the starting point, thus completely extracting the edge path of the container image.

[0022] Furthermore, bounding box calculations are performed on the extracted edge paths to obtain AABB data that closely matches the edge paths, which is used for subsequent normalization calculations of UV coordinates.

[0023] Furthermore, the specific steps of step 1 above are as follows: Step 101: Input the container image into the algorithm module as the basic data for edge extraction; Step 102: Starting from the top left corner of the container image, scan line by line to find the first pixel with a non-zero transparency; Step 103: Use the coordinates of this pixel as the starting point of the edge path, record its coordinates and mark it as visited; Step 104: In the neighborhood of the current pixel, check the candidate pixels at the top, top left, and left in sequence to prepare for generating the neighborhood code; Step 105: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left as encoding objects; Step 106: If the transparency of a neighboring pixel is greater than 0, the corresponding position is encoded as 1; otherwise, it is encoded as 0. Step 107: Concatenate the encoding results of the four neighboring fields into a four-bit binary number, such as "1010"; Step 108: Convert the generated binary number into a decimal index, which will be used as input for looking up the direction table of the marching algorithm; Step 109: Based on the direction information returned by the lookup table, move to the next pixel; Step 110: Repeat steps 104 to 109 to regenerate the neighborhood code for the new pixel location and determine the direction of movement; Step 111: Continue moving until the path is closed or you return to the starting point to complete the extraction of the complete edge path of the container image; Step 112: Based on the extracted edge paths, calculate their minimum bounding rectangle to obtain AABB data.

[0024] Step 2: Calculate the edge UV coordinates on the edge path. In step 2, based on the AABB data from step 1, the UV coordinates of the edge points closest to the top left, top right, bottom right, and bottom left corners of the AABB on the edge path are set to (0,0), (1,0), (1,1), and (0,1), respectively, thus determining the four reference points for edge UV mapping; with the four reference points as the starting point, the edge path is divided into four edge regions: top, right, bottom, and left.

[0025] Secondly, traverse all edge points within each edge region, calculate the Euclidean distance of the edge point relative to the starting point of the region, and divide this distance by the total length of the region (the total length is obtained by accumulating the Euclidean distances of adjacent points within the region) to obtain the UV coordinates of the edge point; in this way, the UV coordinates of the entire edge path can be obtained.

[0026] Furthermore, the specific steps of step 2 above are as follows: Step 201: Obtain the coordinates of the four corner points of the AABB data output in Step 1, and use them as the reference base for UV mapping; Step 202: Find the edge point closest to the top left corner of AABB in the edge path and set its UV coordinates to UV(0,0); find the edge point closest to the top right corner of AABB in the edge path and set its UV coordinates to (1,0); find the edge point closest to the bottom right corner of AABB in the edge path and set its UV coordinates to (1,1); find the edge point closest to the bottom left corner of AABB in the edge path and set its UV coordinates to (0,1). Step 203: Starting from the four edge points mentioned above, divide the edge path into four edge regions: top, right, bottom, and left. Step 204: Within each edge region, traverse all points in the order of the edge path and calculate the Euclidean distance from each point to the starting point of the corresponding region. Step 205: Divide the distance from each point to the starting point of the region by the total length of the region to obtain the UV coordinates of that point; Step 206: Repeat steps 204 and 205 to complete the UV coordinate calculation for all points within the four edge regions; Step 207: Integrate the UV coordinates of the four regions and establish the UV mapping relationship of each point on the complete edge path, providing a basis for subsequent calculation of the UV coordinates of pixels inside the container image.

[0027] Step 3: Calculate the internal UV coordinates of the container image. In step 3, the container image is first rendered onto the front canvas, and the area formed by the edge path is filled using ctx.fill(). Then, the pixels of the front canvas are traversed, and the pixels with non-zero opacity are extracted to obtain the original coordinates of all internal pixels of the container image.

[0028] Secondly, for each internal pixel in the container image, the Euclidean distance between it and all edge points on the edge path is calculated, and the two vectors formed by the adjacent edge points and the internal pixel are obtained. The angle between the internal pixel and the adjacent edge points is calculated using the vector dot product formula. The Euclidean distance and the angle are substituted into the MVC (Mean Value Coordinates) weight formula to obtain the weight coefficient of the internal pixel relative to all edge points. The weight coefficient is combined with the UV coordinates of the edge points and substituted into the MVC weight formula to obtain the UV coordinates corresponding to the internal pixel, thus realizing the mapping from the original coordinates to the UV space.

[0029] Furthermore, the specific steps of step 3 above are as follows: Step 301: Using the edge UV coordinates as a basis, prepare to calculate the UV mapping relationship of each internal pixel of the container image; Step 302: Render the container image onto the front canvas, with the width and height of the front canvas matching those of the container image; Step 303: Use the ctx.fill() method to fill the area formed by the edge path; Step 304: Traverse every pixel on the front canvas, extract the pixels with non-zero opacity, and obtain the original coordinates of all internal pixels; Step 305: For each internal pixel Calculate its Euclidean distance to all edge points on the edge path. ; Step 306: Obtain the two vectors formed by the adjacent edge point and the internal pixel point, and use them to calculate the included angle; Step 307: Calculate internal pixels Angle between adjacent edge points The calculation formula is as follows: ; ; in, This represents the vector formed by the coordinates of the current internal pixel and the coordinates of one of its adjacent edge points. This represents a vector formed by the coordinates of the current internal pixel and the coordinates of another adjacent edge pixel; Representing vectors The One coordinate; Representing vectors The One coordinate; Step 308: Euclidean distance and included angle Substituting into the following formula, we obtain the internal pixel points. Weight coefficients relative to all edge points : ; Step 309: UV coordinates based on edge points and weighting coefficients Calculate the UV coordinates of each internal pixel. The calculation formula is as follows: ; ; in, This means that the current weight is divided by the sum of the weights of all edge points, and the current weight is normalized once. Indicates the first The weight coefficients of each edge point; Step 310: Repeat steps 305 to 309 to complete the UV mapping of all internal pixels and realize the complete mapping relationship from the original coordinates to the UV space.

[0030] Step 4: Construct the vertex and index data required for rendering. After obtaining the original coordinates and corresponding UV coordinates of all internal pixels, the original coordinates of the internal pixels are used as vertex data (including position coordinates and UV coordinates). At the same time, all internal pixels are traversed, and triangle index data is generated by a pixel-by-pixel traversal method so as to correctly generate the mesh of the image region in the rendering pipeline. The target image is used as texture input, and the target image envelope is fitted to the inside edge of the container image through the mapping relationship between vertex data and index data.

[0031] Step 5: Render in the WebGL environment; Vertex data, index data, and texture data of the target image are fed into the WebGL rendering pipeline and accelerated by the front-end GPU. Finally, the rendering result of the target image after being enveloped and fitted according to the edge of the container image is output in the front-end canvas to achieve a natural envelope effect of the target image.

[0032] Through the above solution, in practical applications, it is possible to obtain... Figure 1 , Figure 2 The effects shown are as follows. Specifically, compared with the prior art, the present invention has the following beneficial effects: (I) By automatically extracting the edges of the container image, the cover fitting of the content image is realized, avoiding the tedious operation of manually setting and adjusting a large number of control points in the traditional FFD method, which greatly reduces the threshold for use; (II) It can accurately fit irregular edges, so that the content image and the container edge can be naturally integrated, which enhances the realism and expressiveness of the image synthesis; (III) This technical solution is applicable to various application scenarios such as web front-end design and online image editing, and can meet the needs of different terminal devices for efficient and realistic image processing effects.

[0033] The present invention also discloses an electronic device, including a processor, a memory, and an application program; the application program is stored in the memory and configured to be executed by the processor using the envelope fitting method described above.

[0034] This invention also discloses a computer-readable storage medium storing a computer program; when the computer program is executed in a computer, it causes the computer to perform the aforementioned envelope fitting method. The storage medium can be any medium capable of storing program code, such as a USB flash drive, portable hard drive, read-only memory (ROM), random access memory (RAM), magnetic disk, or optical disk.

[0035] The above embodiments and figures are not intended to limit the product form and style of the present invention. Any appropriate changes or modifications made by those skilled in the art should be considered as not departing from the patent scope of the present invention.

Claims

1. A method for fitting envelopes based on image edge extraction, characterized in that, include: Step 1: Input the container image and extract its edge path and AABB data; Step 2: First, based on the AABB data from Step 1, set the UV coordinates of the edge points closest to the top left, top right, bottom right, and bottom left corners of the AABB on the edge path as four reference points. Divide the edge path into four edge regions: top, right, bottom, and left, starting from these four reference points. Second, traverse all edge points within each edge region, calculate the Euclidean distance of each edge point relative to the region's starting point, and divide this distance by the total length of the region to obtain the UV coordinates of that edge point. Calculate the UV coordinates along the entire edge path using this method. Step 3: First, render the container image onto the front canvas, and fill the area formed by the edge path using ctx.fill(); Then, the pixels of the front canvas are traversed, and pixels with non-zero opacity are extracted to obtain the original coordinates of all internal pixels of the container image. Next, for each internal pixel of the container image, the Euclidean distance between it and all edge points on the edge path is calculated, and the two vectors formed by the adjacent edge points and the internal pixel are obtained. The angle between the internal pixel and the adjacent edge points is calculated using the vector dot product formula. The Euclidean distance and the angle are substituted into the MVC weight formula to obtain the weight coefficient of the internal pixel relative to all edge points. The weight coefficient is combined with the UV coordinates of the edge points and substituted into the MVC weight formula to obtain the UV coordinates corresponding to the internal pixel, realizing the mapping from the original coordinates to the UV space. Step 4: Construct the vertex and index data required for rendering; Step 5: Render in the WebGL environment.

2. The envelope fitting method based on image edge extraction according to claim 1, characterized in that, Step 1 uses a traversal algorithm to extract the edge paths of the container image, specifically: First, starting from the top left corner of the container image, the first pixel with non-zero transparency is found by scanning and this pixel is taken as the starting point of the edge path; the coordinates of the starting point are recorded and marked as visited; the transparency of the neighboring pixels of this pixel is extracted and encoded, and then stored in the walking algorithm direction table, which is used as the direction information to determine the walking direction of the edge path; Secondly, the direction information of the current pixel is searched in the direction table of the movement algorithm. Based on the returned direction information, the pixel moves to the next pixel. The process of extracting the transparency of the neighboring pixels, encoding and storing the data in the table, continuing to look up the table, and moving to the next pixel is repeated until the edge path is closed or the starting point is returned. Furthermore, bounding box calculations are performed on the extracted edge paths to obtain AABB data that closely matches the edge paths.

3. The envelope fitting method based on image edge extraction according to claim 2, characterized in that, The specific steps of step 1 are as follows: Step 101: Input the container image into the algorithm module as the basic data for edge extraction; Step 102: Starting from the top left corner of the container image, scan line by line to find the first pixel with a non-zero transparency; Step 103: Use the coordinates of this pixel as the starting point of the edge path, record its coordinates and mark it as visited; Step 104: Check candidate pixels sequentially in the neighborhood of the current pixel to prepare for generating neighborhood encoding; Step 105: Using the current pixel as a reference point, select its four neighboring pixels above, right, bottom, and left as encoding objects; Step 106: If the transparency of a neighboring pixel is greater than 0, the corresponding position is encoded as 1; otherwise, it is encoded as 0. Step 107: Concatenate the encoding results of the four neighboring fields into a four-bit binary number; Step 108: Convert the generated binary number into a decimal index, which will be used as input for looking up the direction table of the marching algorithm; Step 109: Based on the direction information returned by the lookup table, move to the next pixel; Step 110: Repeat steps 104 to 109 to regenerate the neighborhood code for the new pixel location and determine the direction of movement; Step 111: Continue moving until the path is closed or you return to the starting point to complete the extraction of the complete edge path of the container image; Step 112: Based on the extracted edge paths, calculate their minimum bounding rectangle to obtain AABB data.

4. The envelope fitting method based on image edge extraction according to claim 1, characterized in that, The specific steps of step 2 are as follows: Step 201: Obtain the coordinates of the four corner points of the AABB data output in Step 1; Step 202: Find the edge point closest to the top left corner of AABB in the edge path and set its UV coordinates to UV(0,0); find the edge point closest to the top right corner of AABB in the edge path and set its UV coordinates to (1,0); find the edge point closest to the bottom right corner of AABB in the edge path and set its UV coordinates to (1,1); find the edge point closest to the bottom left corner of AABB in the edge path and set its UV coordinates to (0,1). Step 203: Starting from the four edge points, divide the edge path into four edge regions: top, right, bottom, and left. Step 204: Within each edge region, traverse all points in the order of the edge path and calculate the Euclidean distance from each point to the starting point of the corresponding region. Step 205: Divide the distance from each point to the starting point of the region by the total length of the region to obtain the UV coordinates of that point; Step 206: Repeat steps 204 and 205 to complete the UV coordinate calculation for all points within the four edge regions; Step 207: Integrate the UV coordinates of the four regions and establish the UV mapping relationship of each point on the complete edge path.

5. The envelope fitting method based on image edge extraction according to claim 1, characterized in that, The specific steps of step 3 are as follows: Step 301: Using the edge UV coordinates as a basis, prepare to calculate the UV mapping relationship of each internal pixel of the container image; Step 302: Render the container image onto the front canvas, with the width and height of the front canvas matching those of the container image; Step 303: Use the ctx.fill() method to fill the area formed by the edge path; Step 304: Traverse every pixel on the front canvas, extract the pixels with non-zero opacity, and obtain the original coordinates of all internal pixels; Step 305: For each internal pixel Calculate its Euclidean distance to all edge points on the edge path. ; Step 306: Obtain the two vectors formed by the adjacent edge point and the internal pixel point; Step 307: Calculate internal pixels Angle between adjacent edge points The calculation formula is as follows: ； ； in, This represents the vector formed by the coordinates of the current internal pixel and the coordinates of one of its adjacent edge points. This represents a vector formed by the coordinates of the current internal pixel and the coordinates of another adjacent edge pixel; Representing vectors The One coordinate; Representing vectors The One coordinate; Step 308: Euclidean distance and included angle Substituting into the following formula, we obtain the internal pixel points. Weight coefficients relative to all edge points : ； Step 309: UV coordinates based on edge points and weighting coefficients Calculate the UV coordinates of each internal pixel. The calculation formula is as follows: ； ； in, This means that the current weight is divided by the sum of the weights of all edge points, and the current weight is normalized once. Indicates the first The weight coefficients of each edge point; Step 310: Repeat steps 305 to 309 to complete the UV mapping of all internal pixels.

6. The envelope fitting method based on image edge extraction according to claim 1, characterized in that, The specific steps of step 4 are as follows: After obtaining the original coordinates and corresponding UV coordinates of all internal pixels, the original coordinates of the internal pixels are used as vertex data. At the same time, all internal pixels are traversed, and triangle index data is generated by traversing pixels one by one. The target image is used as texture input, and the target image envelope is fitted to the inside edge of the container image through the mapping relationship between vertex data and index data.

7. The envelope fitting method based on image edge extraction according to claim 6, characterized in that, The specific steps of step 5 are as follows: Vertex data, index data, and texture data of the target image are fed into the WebGL rendering pipeline and accelerated by the front-end GPU. Finally, the rendering result of the target image after being enveloped and fitted according to the edge of the container image is output in the front-end canvas.

8. An electronic device, characterized in that, It includes a processor, a memory, and an application program; the application program is stored in the memory and configured to be executed by the processor as the envelope fitting method based on image edge extraction according to any one of claims 1 to 7.

9. A computer-readable storage medium, characterized in that, The storage medium stores a computer program; when the computer program is executed in the computer, it causes the computer to perform the envelope fitting method based on image edge extraction according to any one of claims 1 to 7.

Images