Webpage restoring method and device for picture object in presentation and storage medium

Abstract

The application discloses a webpage restoration method and device for picture objects in a presentation and a storage medium, relates to the technical field of picture processing, and comprises the following steps: analyzing a presentation file, extracting structured rendering description data in a page, and the structured rendering description data comprising geometric properties, resource references and visual modification parameters of each element in the presentation file; performing visual restoration on target elements in the presentation file based on the structured rendering description data, generating page elements in a target format; assembling the page elements in the target format according to a hierarchical relationship, and displaying the assembled page elements in the target format on a webpage, so that high-fidelity restoration from the presentation to the webpage is realized, the visual performance of each element can be accurately controlled by extracting underlying structured data, the content of the presentation is kept highly consistent with the original document when displayed on the webpage, and the problems of layout disorder and style loss in the traditional conversion mode are solved.

Description

Technical Field

[0001] This application relates to the field of image processing technology, and in particular to a method, apparatus, and storage medium for restoring web pages from image objects in presentations. Background Technology

[0002] In applications such as online previewing, translation, and content re-editing of PowerPoint (PPTX) documents, it is often necessary to convert the presentation into a web page format that the browser can directly render. The current solution is to first convert the PPTX to PDF or a full-page bitmap, and then embed the bitmap into HTML. However, the text is not editable, and the bitmap becomes blurry after scaling. While the element-structured approach, which parses the source document structure to restore each element to web page tags, maintains the editability and vector clarity of the elements, direct conversion often leads to distorted image cropping, misaligned graphic fills, and loss of geometric path semantics when dealing with complex visual effects. Summary of the Invention

[0003] The main purpose of this application is to provide a method, apparatus and storage medium for restoring image objects in a presentation to web pages, aiming to solve the problems of image cropping distortion and graphic filling disorder when a presentation is converted to a web page format.

[0004] To achieve the above objectives, this application proposes a method for restoring web pages of image objects in a presentation, the method comprising: Parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references, and visual embellishment parameters of each element in the presentation file. Based on the structured rendering description data, the target elements in the presentation file are visually restored to generate page elements in the target format; Assemble the page elements of the target format according to their hierarchical relationship, and then display the assembled page elements of the target format on the web page.

[0005] In one embodiment, the step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is an image element and contains a cropping rectangle, the cropping parameters defined in the cropping rectangle are obtained based on the visual modification parameters. Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

[0006] In one embodiment, the step of constructing a two-layer rendering structure comprising an outer container and an inner image element, adjusting the inner image element based on the size magnification factor and the position offset, and using the two-layer rendering structure as a page element of the target format includes: Construct a two-layer rendering structure that includes an outer container and inner image elements; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as a page element in the target format.

[0007] In one embodiment, the step of determining the corresponding size magnification and position offset based on the cutting parameters includes: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

[0008] In one embodiment, the method further includes: The visible width ratio and visible height ratio are obtained based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

[0009] In one embodiment, the step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is a graphic element, the original path data and target rendering size of the graphic are extracted from the structured rendering description data, the bounding box of the original path data is calculated, and the scaling ratio is calculated based on the target rendering size. The coordinate points, control points, and arc parameters in the original path data are transformed to pixel coordinate space based on the scaling ratio to generate transformed path data, and vector graphic labels containing the transformed path data are constructed. The fill type of the graphic element is obtained from the structured rendering description data, and a corresponding fill definition is generated based on the fill type; Assign the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element in the target format containing the vector graphic tag.

[0010] In one embodiment, the step of generating a corresponding padding definition based on the padding type includes: When the fill type is solid color fill, extract the color value and transparency parameter, and generate a solid color fill definition based on the color value and transparency parameter; When the fill type is gradient fill, extract the gradient attribute, create a gradient element in the vector graphics definition tag, and generate a gradient fill definition; When the fill type is pattern fill, extract the pattern attributes, create a pattern element in the vector graphics definition tag, and generate a pattern fill definition. When the fill type is image fill, the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition are parsed, and a dual coordinate transformation calculation is performed to generate the image fill definition.

[0011] In one embodiment, when the fill type is image fill, the step of parsing the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition, performing a dual coordinate transformation calculation, and generating the image fill definition includes: When the fill type is image fill, parse the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition; Calculate the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameter and the cropping parameter; Create a pattern element in the vector graphics definition tag, and place the image inside the pattern element based on the full size and the placement starting point; Assign the reference address of the pattern element to the fill attribute of the graphic path to generate the image fill definition.

[0012] In one embodiment, the step of calculating the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameter and the cropping parameter includes: Based on the indentation parameters, calculate the indentation position and indentation size of the target filling area within the graphic; Based on the indentation size and the cropping parameters, the full size of the uncropped image is calculated. Based on the indentation position, the indentation size, the full size, and the cropping parameters, calculate the starting point for placing the image in the target filling area.

[0013] In one embodiment, the step of calculating the indentation position and indentation size of the target fill region within the graphic based on the indentation parameter includes: Analyze the indentation percentages for the four directions (up, down, left, and right) defined in the indentation parameters; Obtain the target width and target height of the graphic from the geometric properties; The horizontal starting point of the fill area is calculated based on the left indentation percentage in the indentation percentage and the target width of the graphic. The vertical starting point of the fill area is calculated based on the upper indentation percentage in the indentation percentage and the target height of the graphic. The width of the filled area is calculated based on the left indentation percentage, the right indentation percentage, and the target width of the graphic. The height of the filled area is calculated based on the upper indentation percentage, the lower indentation percentage, and the target height of the graphic. The indentation position of the target fill area within the graphic is obtained based on the horizontal starting point and the vertical starting point of the fill area, and the indentation dimension of the target fill area within the graphic is obtained based on the width and height of the fill area.

[0014] In one embodiment, the step of reversing the full size of the uncropped image based on the indentation size and the cropping parameters includes: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; The width and height of the filling area are obtained based on the indentation dimensions. The full width of the uncropped image is calculated based on the left cropping percentage, the right cropping percentage, and the width of the fill area. The full height of the uncropped image is calculated based on the upper crop percentage, the lower crop percentage, and the height of the fill area. The full dimensions of the uncropped image are obtained based on the full width and the full height.

[0015] In one embodiment, the step of assigning the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element containing the target format of the vector graphic tag includes: Construct a vector graphics root node, create a resource definition tag inside the vector graphics root node, and add the fill definition to the resource definition tag; A graphics group node is constructed inside the root node of the vector graphics, and the vector graphics tag is attached to the graphics group node. The vector graphics tag calls the corresponding definition in the resource definition tag through a reference address. Based on the vector graphics root node, the resource definition tag, and the graphics grouping node, page elements in the target format are generated.

[0016] In one embodiment, the step of assembling page elements of the target format according to hierarchical relationships and displaying the assembled page elements of the target format on a webpage includes: Obtain the hierarchical attributes corresponding to the hierarchical relationship of each page element in the target format; Based on the hierarchical attributes, the page elements of each target format are sorted in ascending order to determine the rendering order of each page element in the target rendering webpage. According to the rendering order, each page element of the target format is added to the document object model node corresponding to the target rendered webpage in turn, so that each page element of the target format is displayed on the webpage.

[0017] Furthermore, to achieve the above objectives, this application also proposes a webpage restoration device for image objects in a presentation, the webpage restoration device for image objects in a presentation comprising: The parsing module is used to parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references and visual embellishment parameters of each element in the presentation file. The restoration module is used to visually restore the target elements in the presentation file based on the structured rendering description data, and generate page elements in the target format; The assembly module is used to assemble page elements of the target format according to their hierarchical relationship and display the assembled page elements of the target format on the web page.

[0018] In one embodiment, the restoration module is further configured to, when the target element in the presentation file is an image element and contains a cropping rectangle, obtain the cropping parameters defined in the cropping rectangle based on the visual modification parameters; Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

[0019] In one embodiment, the restoration module is further configured to construct a two-layer rendering structure comprising an outer container and inner image elements; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as a page element in the target format.

[0020] In one embodiment, the restoration module is further configured to parse the cropping percentages in the four directions (up, down, left, and right) defined in the cropping parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

[0021] In one embodiment, the restoration module is further configured to obtain a visible width ratio and a visible height ratio based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

[0022] Furthermore, to achieve the above objectives, this application also proposes a webpage restoration device for image objects in a presentation, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the webpage restoration method for image objects in a presentation as described above.

[0023] In addition, to achieve the above objectives, this application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, it implements the steps of the webpage restoration method for image objects in a presentation as described above.

[0024] In addition, to achieve the above objectives, this application also provides a computer program product, which includes a computer program that, when executed by a processor, implements the steps of the webpage restoration method for image objects in a presentation as described above.

[0025] This application proposes one or more technical solutions that obtain structured rendering description data containing geometry, resources, and visual embellishments by parsing presentation files, and then generate target format page elements for assembly and display. This method achieves high-fidelity reproduction of presentations to web pages. By extracting underlying structured data rather than simple screenshots or format conversions, it can precisely control the visual appearance of each element, ensuring that the layout, style, and hierarchy of the presentation remain highly consistent with the original document when displayed on the web page, thus solving the problems of layout errors and style loss that are prone to occur in traditional conversion methods. Attached Figure Description

[0026] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0027] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, for those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0028] Figure 1 This is a flowchart illustrating an embodiment of the method for restoring image objects from a webpage in the presentation of this application. Figure 2 This is a flowchart illustrating the second embodiment of the method for restoring image objects in the presentation of this application. Figure 3 This is a flowchart illustrating the third embodiment of the method for restoring image objects in the presentation of this application. Figure 4 This is a schematic diagram of the system architecture in the webpage restoration method for image objects in the presentation of this application. Figure 5 A simplified flowchart illustrating an embodiment of a method for restoring image objects from a presentation document of this application. Figure 6 This is a schematic diagram of the module structure of the webpage restoration device for image objects in the presentation document of this application embodiment; Figure 7 This is a schematic diagram of the device structure of the hardware operating environment involved in the webpage restoration method for image objects in the presentation document in this application embodiment.

[0029] The purpose, features, and advantages of this application will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0030] It should be understood that the specific embodiments described herein are merely illustrative of the technical solutions of this application and are not intended to limit this application.

[0031] To better understand the technical solution of this application, a detailed description will be provided below in conjunction with the accompanying drawings and specific implementation methods.

[0032] It should be noted that the executing entity in this embodiment can be a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, or mobile phone, or an electronic device capable of performing the above functions, a webpage restoration system for image objects in a presentation, etc. The following description uses a webpage restoration system for image objects in a presentation as an example to illustrate this embodiment and the following embodiments. All actions involving the acquisition of signals, information, or data in this application are performed in accordance with the relevant data protection regulations of the locality and with authorization from the owner of the corresponding device.

[0033] Based on this, embodiments of this application provide a method for restoring web pages from image objects in a presentation, referring to... Figure 1 , Figure 1 This is a flowchart illustrating the first embodiment of the webpage restoration method for image objects in the presentation of this application.

[0034] In this embodiment, the method for restoring webpages of image objects in the presentation includes steps S10 to S30: Step S10: Parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references, and visual embellishment parameters of each element in the presentation file.

[0035] It should be noted that presentation files can be office documents in various formats such as PPTX, ODP, and KEYNOTE; this application does not impose any restrictions on this. The parsing process is not a simple text reading, but rather a deep traversal of the document's internal compressed structure, XML tree, or binary stream, converting the source document's unique drawing model into a general intermediate-level data representation.

[0036] For example, by reading the slides, relational files, media resources, and DrawingML (Drawing Markup Language) information in the PPTX package, structured rendering description data containing attributes such as element geometry, resource references, visual embellishment parameters, hierarchy, and transparency can be generated, that is, each slide element can be converted into structured JSON.

[0037] Structured rendering description data acts as a bridge connecting the source document and the target webpage, and its core function is decoupling. For example, geometric attributes can include the absolute position (x, y) of an element in the page coordinate system, its width and height, rotation angle, and scaling ratio; resource references can include the Uniform Resource Locator (URL) of image files, the name of embedded fonts, or external link addresses; visual embellishment parameters can include the cropping rectangle (srcRect), the fill rectangle (fillRect), the gradient stop point, transparency, shadows, and border styles, etc.

[0038] Step S20: Visually reconstruct the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format.

[0039] Visual restoration is a semantic reconstruction process based on parameter mapping, rather than a simple format conversion. The target format typically refers to HTML, CSS, SVG, or Canvas instruction sets that browsers can recognize and render. In this step, the system assigns elements to the corresponding restoration processing module based on their type identifier (e.g., image, graphic, text, table, etc.). For example, for image elements, the rendering transformation matrix needs to be calculated based on the cropping information in the visual modification parameters; for vector graphics, the source path data needs to be mapped to the path instructions of the target vector tag; for text elements, the font, font size, line spacing, and paragraph alignment need to be restored. It should be understood that although this embodiment uses a webpage format as an example, in other implementations, the target format can also be PDF, vector graphics, or other cross-platform document formats, as long as it can carry the visual semantics expressed by the structured rendering description data.

[0040] Step S30: Assemble the page elements of the target format according to their hierarchical relationship, and display the assembled page elements of the target format on the web page.

[0041] The elements in the presentation have a strict visual stacking order, i.e., a hierarchical relationship. During the assembly process, the system reads the hierarchical attributes (such as z-index or object order index) from the structured rendering description data, sorts each page element, and inserts them into the corresponding containers of the web page document object model in order from the bottom layer to the top layer. This step ensures that foreground elements can correctly occlude background elements, reproducing the visual hierarchy of the source document. When displayed on the webpage, the generated page elements maintain independent structural characteristics. This means that users can not only view the document content, but also select, edit, search, or interact with individual elements. Furthermore, vector graphics and text remain clear and sharp at any scaling ratio, completely overcoming the shortcomings of traditional full-page image-based solutions, such as unselectable text, blurred scaling, and large file sizes.

[0042] In one feasible implementation, step S30 may include steps A11 to A13: Step A11: Obtain the hierarchical attributes corresponding to the hierarchical relationship of each page element in the target format; It should be noted that the hierarchy attribute specifically refers to the z-index value that marks the stacking order of elements or the element arrangement index recorded in the source document. Each page element in the target format carries its own hierarchy attribute parameter, which is used to clarify the front and back occlusion relationship between elements.

[0043] Step A12: Based on the hierarchical attributes, sort the page elements of each target format in ascending order to determine the rendering order of each page element in the target rendering webpage. In practice, after arranging the elements according to their hierarchical attribute values ​​from smallest to largest, elements with smaller values ​​are rendered first and placed at the bottom of the visual stack, while elements with larger values ​​are rendered later and placed at the top of the visual stack, which corresponds perfectly to the hierarchical relationship in the source presentation.

[0044] Step A13: According to the rendering order, add each page element of the target format to the document object model node corresponding to the target rendered webpage in sequence, so that each page element of the target format can be displayed on the webpage.

[0045] Understandably, page elements of different target formats can be inserted into the document object model in order of rendering. After inserting the page elements into the document object model in order, the webpage can complete the element drawing in the rendering order, and finally reproduce the same visual effect and hierarchical structure as the original presentation on the webpage.

[0046] In one feasible implementation, for presentations with missing fields or older versions, default values ​​such as zero cropping, zero indentation, and complete opacity can be used; non-numeric or out-of-bounds values ​​are normalized. Different element types generate different formats. HTML / CSS / SVG are generated separately according to element type, and then assembled into pages according to the slide hierarchy. Page backgrounds and adaptive scaling logic are overlaid to output editable, vector, and scalable HTML pages for display on web pages.

[0047] This embodiment provides a method for web page restoration of image objects in a presentation. It obtains structured rendering description data containing geometry, resources, and visual embellishments by parsing the presentation file, and then generates target-format page elements for assembly and display. This method achieves high-fidelity restoration from presentation to web page. By extracting the underlying structured data rather than simple screenshots or format conversions, it can precisely control the visual appearance of each element, ensuring that the layout, style, and hierarchy of the presentation remain highly consistent with the original document when displayed on the web page. This solves the problems of layout errors and style loss that easily occur with traditional conversion methods.

[0048] Based on the first embodiment of this application, in the second embodiment of this application, the content that is the same as or similar to that in the first embodiment described above can be referred to the above description, and will not be repeated hereafter. Based on this, please refer to... Figure 2 Step S20 includes steps S201 to S203: Step S201: If the target element in the presentation file is an image element and contains a cropping rectangle, obtain the cropping parameters defined in the cropping rectangle based on the visual modification parameters.

[0049] In the graphic model of a presentation, image cropping is usually not achieved by physically cutting pixels. Instead, it defines the percentage or absolute value to be cropped from the original image in four directions (top, bottom, left, and right) by recording a cropping rectangle (srcRec). Image cropping uses a two-layer structure: an outer cropping frame + an inner enlarged and negatively offset image. The outer div uses the position and size of the image frame in the slide, setting position:absolute and overflow:hidden; the inner img is enlarged and offset in reverse according to srcRect, so that only the cropped visible area is displayed within the outer frame. The image cropping rectangle srcRect={t,b,l,r}: t, b, l, r represent the percentage to be cropped from the top, bottom, left, and right of the original image, respectively, and the values ​​are generally between 0 and 100.

[0050] The original image data remains intact, with only specific areas hidden during display. However, mainstream web page rendering engines do not natively support this viewport cropping instruction based on the source document's specific syntax. Directly stretching the original image to the target size will cause the cropped area to be redisplayed; pre-cropping the image on the server side will destroy its original resolution and prevent further editing. Therefore, this embodiment proposes a cross-model mapping scheme based on a two-layer rendering structure.

[0051] During the process of obtaining cropping parameters, the system extracts visual modification parameters associated with the current image element from the structured rendering description data. When a cropping rectangle identifier is detected in these parameters, the four-way cropping values ​​defined within them are parsed. These values ​​may be percentages relative to the original image's width and height, or they may be absolute coordinate values. To adapt to rendering calculations on web pages, these parameters typically need to be normalized to a uniform scaling factor or pixel offset. For example, if the source document record is cropped by 20% on the left and 10% on the right, the horizontal visible area ratio is 70%. This parsing process ensures that subsequent calculations can be based on standardized data, eliminating semantic differences between different document formats.

[0052] Step S202: Based on the cutting parameters, determine the corresponding size magnification factor and position offset.

[0053] It's important to note that the physical meaning of the scaling factor is: to make the cropped visible area visually fill the target display frame, the original image needs to be scaled inversely in the corresponding dimension. For example, if the horizontal visible area ratio is 70%, then the horizontal scaling factor should be 1 divided by 0.7, which is approximately 1.428 times. The physical meaning of the position offset is: since the scaling operation is based on a certain point in the image (usually the top left corner or center), the content originally located within the visible area will be shifted after scaling. Therefore, a negative offset is needed to realign the target visible area into the visible window of the outer container. These two parameters constitute the core mapping relationship from the source document cropping semantics to the webpage rendering transformation matrix.

[0054] In one feasible implementation, step S202 may include steps B11 to B14: Step B11: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; In presentation files, image cropping is typically recorded as a percentage relative to the original image's width and height, representing the proportion removed in each of the four directions: top, bottom, left, and right. The system first needs to parse these cropping percentages in these four directions, using them as the baseline input for all subsequent geometric calculations. It should be understood that these cropping percentages are normalized dimensionless values; for example, a 20% cropping percentage on the left means that 20% of the original image's total width is cropped from its left edge to the right.

[0055] Step B12: Calculate the visible area ratio of the inner layer image elements based on the cropping percentages in the four directions; After obtaining the four-way cropping percentage, the system calculates the visible area ratio of the inner image elements. The visible area ratio refers to the proportion of the remaining effective display area to the corresponding dimension of the original image after the cropping operation. The specific calculation formula is as follows: visibleWidth=100-lr visibleHeight=100-tb In the above formula, visibleWidth is the visible width ratio, visibleHeight is the visible height ratio, and t, b, l, and r represent the cropping percentages from the top, bottom, left, and right directions of the original image, respectively. The visible area ratio of the inner image element can be obtained based on the visible width ratio and the visible height ratio.

[0056] In practice, all percentage parameters are numericalized, range-checked, and default-value-normalized before calculation.

[0057] In one feasible implementation, if the visible area ratio is abnormal, it indicates that the cropping parameters are illegal or that a positive visible area cannot be formed. Therefore, after step B12, the method further includes: obtaining the visible width ratio and the visible height ratio based on the visible area ratio; if the visible width ratio or the visible height ratio is less than or equal to a preset value, recording diagnostic information and executing a fallback strategy, wherein the fallback strategy includes at least: reverting to non-cropped display, using a default image display, using a solid color placeholder, or skipping the current element.

[0058] In actual document conversion projects, the data quality of source presentation files is often difficult to guarantee as ideal. Due to user errors, defects in third-party tools, version compatibility issues, or data corruption during file transfer, the clipping parameters in the structured rendering description data may contain illegal values. For example, the sum of the left and right clipping percentages may be greater than or equal to 100%, or the calculated visible width ratio (VisibleWidth) may be a very small negative number or zero due to loss of floating-point precision. Therefore, an anomaly detection and defense mechanism is introduced before or during the core transformation calculation. In determining the triggering conditions, the system compares the calculated visible width ratio (VisibleWidth) and visible height ratio (VisibleHeight) with a preset threshold. This preset threshold is set to 0. When the visible ratio of any dimension is lower than this preset value, the system determines that the clipping parameters of the current element are in an abnormal state, immediately blocks the subsequent normal transformation process, and enters the anomaly handling branch.

[0059] Upon entering the exception handling branch, the first step is to record diagnostic information. This information should be sufficiently traceable and typically includes, but is not limited to: the unique identifier (ID) of the current anomalous element, its hierarchical index on the page, the original cropping parameter value, the calculated anomaly ratio, and the specific timestamp of the anomaly trigger. This diagnostic information can be written to server logs, the front-end console, or a dedicated telemetry data stream. After completing the diagnostic recording, the system will select one of several fallback measures based on preset configuration strategies or the severity of the anomaly to ensure that the overall page rendering process is not interrupted by an error in a single element. The first fallback strategy is to revert to non-cropping display. When a slight anomaly is detected in the cropping parameters (e.g., the sum slightly exceeds 100% but the deviation is within an acceptable range), the system can choose to ignore the cropping rectangle parameter and directly display the original image resource in full or scaled proportionally according to the size of the target container, avoiding content loss. The second fallback strategy is to use the default image for display. When cropping parameters are severely invalid and the associated image resource itself suffers from invalid references or decoding failures, the system can load a pre-defined generic placeholder image to replace the current element. This default image typically includes semantic icons and text prompts such as "Image cannot be displayed" or "Resource loading failed." The third fallback strategy is to use a solid color placeholder. For certain decorative, background, or non-core image elements, when their cropping parameters are abnormal, the system can extract the theme color, border color, or fill color defined in the source document for that element and generate a solid color rectangle with the same size as the target container as a placeholder. The fourth fallback strategy is to skip the current element. When the exception is determined to be unrecoverable and the element is marked as non-critical content (such as purely decorative watermarks, redundant background textures, etc.), the system can choose not to generate the corresponding node in the document object model at all to ensure that the conversion process is not interrupted.

[0060] Step B13: Calculate the magnification factor based on the visible area ratio; Based on the calculated visible area ratio, the system further derives the size magnification factor. Since the size of the outer container corresponds to the cropped visible area, while the inner image elements carry the complete original image, there is a necessary inverse relationship between the two. The calculation formula is as follows: scaleX=100 / visibleWidth scaleY=100 / visibleHeight `scaleX` and `scaleY` represent the scaling factors in the horizontal and vertical directions, respectively. Continuing with the example above, when the horizontal visible area accounts for 50%, the horizontal scaling factor is 2x. This means the inner image needs to be stretched to 200% of the original image width so that the visible area, which only occupies 50% of the original image, is physically equivalent to the width of the outer container in pixels. This proportional dynamic scaling mechanism ensures that regardless of how the source document defines cropping, the final display effect adaptively fills the target layout space.

[0061] Step B14: Calculate the position offset based on the cropping percentage and the visible area ratio.

[0062] In practical implementation, after determining the magnification factor, the system also needs to calculate the positional offset to correct visual misalignment caused by scaling. Since scaling operations are typically performed based on the top-left corner or center point of the inner image element, the magnified image will cause the target content, originally located within the viewport, to shift. To accurately align the target's visible area within the viewport of the outer container, a negative positional offset needs to be applied. The positional offset is calculated by considering both the cropping percentage and the visible area ratio, using the following formula: offsetX = l / visibleWidth offsetY = t / visibleHeight `offsetX` and `offsetY` represent the horizontal and vertical position offsets, respectively (usually negative values ​​or indicating leftward / upward displacement). The actual width proportion occupied by the cropped portion `l` in the rendering coordinate system after being magnified by `ScaleX` is `l / VisibleWidth`. By shifting the inner image to the left by this distance, the space occupied by the magnified cropped portion on the left can be precisely offset, thus aligning the left edge of the visible area with the left edge of the outer container.

[0063] Suppose the cropping parameters for an image element are: top = 10%, bottom = 40%, left = 20%, right = 0%. First, calculate the visible area ratio: horizontal VisibleWidth = 1 - 0.2 - 0 = 0.8, vertical VisibleHeight = 1 - 0.1 - 0.4 = 0.5. Next, calculate the scaling factor: ScaleX = 1 / 0.8 = 1.25, ScaleY = 1 / 0.5 = 2.0. Finally, calculate the position offset: OffsetX = 0.2 / 0.8 = 0.25 (i.e., offset 25% of the original image width to the left), OffsetY = 0.1 / 0.5 = 0.2 (i.e., offset 20% of the original image height upwards). Through this series of calculations, the system can independently apply different scaling and translation transformations in the horizontal and vertical directions, supporting cropping and restoration of arbitrary rectangular ratios, completely overcoming the image distortion or white space problems caused by forced proportional scaling in traditional solutions.

[0064] Step S203: Construct a two-layer rendering structure containing an outer container and an inner image element, and adjust the inner image element based on the size magnification factor and the position offset, and use the two-layer rendering structure as the page element of the target format.

[0065] When constructing a two-layer rendering structure, the outer container is configured to define the final visible boundary. In its implementation, the outer container can be a block-level element in HTML such as `div` or `section`, or other container tags that can be set to a fixed width and height and have overflow / hiding capabilities. Its core function is to act as a viewport, limiting the user's view to the content within the container's boundaries. The inner image element is placed inside the outer container to hold the original image resource. The inner image element can be an `img` tag, a CSS background image, an SVG image element, or a Canvas drawing object, etc.

[0066] The size and position of inner image elements are no longer determined by their natural properties, but are strictly controlled by the previously calculated size magnification factor and position offset. Through this layered architecture, the system logically and perfectly simulates the cropping behavior of the source document: the outer container corresponds to the cropped display box of the source document, and the transformation state of the inner image corresponds to the state of the original image that is masked in the source document.

[0067] Then, the parameters of the image on the webpage can be adjusted according to the size magnification and position offset. In one feasible implementation, step S203 may include steps B21-B24: Step B21: Construct a two-layer rendering structure containing an outer container and inner image elements; Step B22: Configure the outer container to hide overflow content to form a boundary occlusion; The core function of the outer container is to provide a strict visual viewport, and its configuration of hiding overflowing content is the physical basis for achieving lossless pruning. In a web rendering environment, this is usually achieved by setting the container's overflow property to hidden, so that any content that exceeds the container's geometric boundaries is not drawn by the rendering engine.

[0068] It should be understood that although this embodiment uses the overflow hiding attribute of a web page DOM element as an example, this boundary occlusion mechanism can also be implemented in other ways in other rendering architectures. For example, in the Canvas drawing context, the drawing area can be limited by defining a clip path. This occlusion mechanism, based on the native characteristics of the rendering engine, is different from the physical cutting or pixel erasure of the image file itself, thus preserving the integrity of the original image data.

[0069] Step B23: Adjust the size and position of the inner layer image elements according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; In the adjustment of inner image elements, the synergy between the scaling factor and the position offset is crucial. The inner image element carries the complete original image resource, and its initial state typically differs in size from the outer container. The system first scales the inner image according to the scaling factor. This scaling is not to fit the container size, but rather to mathematically offset the cropping ratio defined in the source document. For example, if the source document defines a 20% crop on the left and a 30% crop on the right, the horizontal visible width is 50%, corresponding to a scaling factor of 2. At this point, the inner image is enlarged to 200% of the original image width, making the visible area, which originally occupied only 50% of the original image, physically equal to the width of the outer container in pixels. Subsequently, the system applies a position offset to translate the inner image. Since scaling is usually based on the top-left corner or center of the image, the enlarged visible area will shift. Therefore, a negative offset is needed to precisely align it within the visible window of the outer container. This ensures that the visible area after cropping can completely cover the outer container, without any white edges caused by calculation errors or content misalignment.

[0070] The specific adjustments are as follows: img.width = scaleX × 100% img.height = scaleY × 100% img.left = -(offsetX × 100)% img.top = -(offsetY × 100)% Here, img.width and img.height represent the actual rendered width and height of the image on the webpage, while img.left and img.top represent the position offset of the inner image element relative to the top left corner of the outer container.

[0071] Step B24: Use the two-layer rendering structure as a page element in the target format.

[0072] Finally, the left and top areas that should have been cropped in the original image are moved out of the outer viewport, while the remaining visible area is enlarged to the size of the image frame. Because the horizontal and vertical dimensions are calculated separately, non-uniform cropping scenarios can be supported, thus outputting the two-layer rendering structure as the corresponding image element in the target format webpage, completing the accurate conversion from the source presentation cropping parameters to the webpage rendering structure.

[0073] Through the above configuration and adjustment mechanism, pixel-level precise cropping and restoration are achieved, bringing significant technical advantages. First, since the entire process only involves geometric transformations at the rendering level, without any form of resampling, interpolation, or compression of the original image data, the image quality loss caused by secondary rasterization is completely avoided.

[0074] The specific output structure is represented as follows: The outer div can also uniformly hold rotation, transparency, and z-index; the inner img retains the original image resources, so there is no need to rasterize the cropped result again.

[0075] In this example, a two-layer rendering structure of an outer container and an inner image element is constructed for image elements containing cropped rectangles, and adjustments are made using size scaling and position offset. Its advantage lies in perfectly simulating arbitrary cropping effects in presentations using standard web page features. By hiding overflow in the outer container and using the displacement and scaling of the inner element, no destructive editing of the original image is required, saving image processing overhead and ensuring display clarity on screens with different resolutions.

[0076] Based on the first embodiment of this application, in the third embodiment of this application, the content that is the same as or similar to that in the first embodiment described above can be referred to the above description, and will not be repeated hereafter. Based on this, please refer to... Figure 3 Step S20 includes steps S201' to S204': Step S201': If the target element in the presentation file is a graphic element, extract the original path data and target rendering size of the graphic from the structured rendering description data, calculate the bounding box of the original path data, and calculate the scaling ratio based on the target rendering size.

[0077] It should be noted that the outline of the graphics is uniformly represented using SVG paths, and the fill content is defined in the defs and referenced through the fill attribute of the path. Since the fill is completed inside the path, solid colors, gradients, patterns, and images are automatically constrained within the outlines of rectangles, circles, arrows, hearts, or custom polygons.

[0078] Graphical elements in a source document are typically defined by a series of vector drawing instructions. These instructions constitute the raw path data, describing the geometric outline of the graphic. Unlike bitmaps, vector paths are based on a mathematical coordinate system and do not have a fixed pixel size. To display correctly on a webpage, they must be mapped to a specific pixel coordinate space.

[0079] The bounding box is the smallest outer rectangle that can completely contain the original path data. It is calculated by traversing all coordinate points, control points, and curve extrema points in the path, and it represents the inherent geometric range of the graph in the source coordinate system.

[0080] The target rendering size is the actual width and height that the graphic should display on the target page, obtained from the geometric properties of the structured rendering description data.

[0081] The scaling ratio is the ratio of the target rendering size to the bounding box size. This ratio establishes a linear mapping from the source document's abstract coordinate system to the target webpage's physical pixel coordinate system. For example, if the source graphic's bounding box width is 100 units and the target rendering width is 200 pixels, then the horizontal scaling ratio is 2.0. This dynamic scaling calculation based on the bounding box ensures that the source graphic can adaptively fit into the target layout space regardless of its original defined size.

[0082] The path bounding box is represented as {minX, minY, maxX, maxY}, and the scaling ratio is represented as groupScaleX and groupScaleY.

[0083] Step S202': Transform the coordinate points, control points, and arc parameters in the original path data to pixel coordinate space based on the scaling ratio to generate the transformed path data, and construct vector graphic labels containing the transformed path data.

[0084] The common practice is to encapsulate the original path data within a container tag and then apply a scaling transformation to the entire container. However, this outer scaling method has significant drawbacks when dealing with complex paths: when the scaling ratio is inconsistent in the horizontal and vertical directions (i.e., non-uniform scaling), the arc commands within the container may be incorrectly interpreted by the rendering engine as elliptical arcs or even degenerate into polylines, resulting in sharp corners or distorted curves; at the same time, the stroke width will also undergo unexpected changes in thickness as the container scales, disrupting visual consistency.

[0085] To address this issue, this embodiment employs a direct path coordinate transformation strategy. Before generating the target format tags, the path is reconstructed directly in pixel coordinate space based on all geometric parameters, scaling ratios, and translation offsets. Path coordinates can be transformed on the server-side or browser-side; the output can be static HTML or a manipulable DOM / SVG model in an editor. For straight line segments, only the start and end coordinates need to be transformed; for Bézier curves, the anchor points and their associated control points need to be transformed simultaneously to maintain the mathematical accuracy of the curve shape; for arc commands, the radius, rotation angle, and endpoint coordinates need to be recalculated based on the scaling ratio. If necessary, arcs under non-uniform scaling are converted into multi-segment Bézier curve fitting, thus fundamentally avoiding ambiguous interpretations of the outer transformation matrix by the rendering engine.

[0086] This allows the coordinates, control points, and arc-related parameters of each command to be directly scaled and translated to the pixel coordinate space, avoiding arc degradation or inconsistent stroke behavior caused by relying on the overall scale of the outer layer g.

[0087] By directly reconstructing the underlying parameters, it is ensured that the graphic outline maintains perfect geometric semantics and smoothness at any scaling ratio.

[0088] Step S203': Obtain the fill type of the graphic element from the structured rendering description data, and generate the corresponding fill definition according to the fill type.

[0089] The graphic fill types in presentations are diverse, including not only solid colors but also complex types such as linear gradients, radial gradients, texture patterns, and even image fills. In the target webpage rendering model, these fill effects often cannot be simply expressed as inline attributes of graphic tags but require independent definition structures to contain them.

[0090] For example, gradient fill requires defining the color stop point, gradient direction, and transformation matrix; pattern fill requires defining the size, content, and tiling method of the unit tiles.

[0091] This embodiment decouples the extraction of fill information from the generation of graphic geometry. It first identifies the fill type and then constructs a fill definition object that conforms to the target rendering specifications. In addition, for certain special fill types (such as image fill), additional coordinate transformations or resource processing logic can be performed at this stage without interfering with the generation process of the graphic path itself.

[0092] In one feasible implementation, the step of "generating the corresponding fill definition according to the fill type" in step S203' may include steps C11 to C14: Step C11: If the fill type is solid color fill, extract the color value and transparency parameter, and generate a solid color fill definition based on the color value and transparency parameter; When generating padding definitions, the system first needs to perform precise routing based on the padding type identifier in the structured rendering description data. This routing mechanism ensures that each padding type can enter its own dedicated processing pipeline, avoiding semantic loss or parameter misinterpretation caused by generalized processing.

[0093] For solid color fills, color values ​​and transparency parameters can be extracted from structured rendering description data. Color values ​​typically exist in RGB, HSL, or theme color index formats, and need to be uniformly converted to a standard color value format supported by the target rendering environment (such as hexadecimal RGB or RGBA). In the source document, transparency may exist independently of color values, or it may be used as a graphic-level attribute to override the color channels themselves. Therefore, when generating a solid color fill definition, the color values ​​and transparency parameters must be correctly combined to ensure that the final fill definition accurately expresses the color and transparency set in the source document. For example, if the source document specifies a blue fill and the overall graphic transparency is 50%, the generated solid color fill definition should include a blended, semi-transparent blue value, rather than simply recording pure blue.

[0094] Step C12: If the fill type is gradient fill, extract the gradient attribute, create a gradient element in the vector graphics definition tag, and generate a gradient fill definition; For gradient fills, gradient attributes need to be extracted. These attributes include, but are not limited to, gradient type (linear or radial), gradient vector (such as angle, start point, end point, and focal point position), color stop point sequence, and their corresponding offsets and opacities. When creating gradient elements in the vector graphics definition tag, the gradient parameters in the source document, which may be based on absolute coordinates or normalized scales, need to be mapped to the coordinate system required by the target rendering model. For example, for linear gradients, the direction of the gradient vector needs to be calculated based on the rotation angle; for radial gradients, the proportional relationship between the center point and the radius needs to be determined. Simultaneously, the offset of the color stop points usually needs to be normalized to the range of 0 to 1 to ensure a smooth and accurate gradient transition.

[0095] Step C13: If the fill type is pattern fill, extract the pattern attributes, create a pattern element in the vector graphics definition tag, and generate a pattern fill definition; For pattern fills, extract pattern attributes, including unit size, background color, foreground primitive type (such as dots, stripes, grids, diagonal lines, etc.) and their geometric parameters. When creating pattern elements in the vector graphics definition tag, strictly follow the "background first, foreground later" stacking order: first draw a rectangle covering the entire unit size as the background color base, then overlay the foreground primitives on top of it. This order is crucial because if the foreground primitives are drawn before the background, they may be completely obscured by the background or cause abnormal visual effects due to incorrect blending modes. Furthermore, the aspect ratio of the pattern unit must be consistent with the source document to prevent stretching distortion during tiling. The generated pattern fill definition also exists as an independent resource, applied to the target graphic path through a referencing mechanism, achieving a vectorized expression of complex texture effects.

[0096] Step C14: When the fill type is image fill, parse the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition, perform dual coordinate transformation calculation, and generate the image fill definition.

[0097] Unlike the three fill types mentioned above that only require single-layer parameter processing, image fill is constrained by two sets of parameters: the "fill rectangle (fillRect)" and the "cropping rectangle (srcRect)." The fill rectangle defines the effective display area of ​​the image within the graphic outline and its indentation relative to the graphic boundary, while the cropping rectangle defines the area within which the image is cropped. Simply superimposing these two sets of parameters or ignoring either one will inevitably lead to misaligned fill positions, disproportionate dimensions, or missing content. Therefore, in this embodiment, when the fill type is identified as image fill, the system does not directly generate a fill definition. Instead, it first parses the indentation parameters of the fill rectangle definition and the cropping parameters of the cropping rectangle definition, and triggers a dual coordinate transformation calculation. After completing this dual coordinate transformation calculation, an accurate image fill definition is generated based on the calculation results.

[0098] As shown in Table 1 below, Table 1 is a table showing the parameters and output methods for different filling types.

[0099] Table 1

[0100] In one feasible implementation, step C14 may include steps C141 to C144: Step C141: When the fill type is image fill, parse the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition; If the fill type is image fill, two sets of key parameters are precisely extracted from the structured rendering description data: one set is the indentation parameter defined by the fill rectangle (fillRect), which typically includes the indentation percentages in the four directions (top, bottom, left, and right) relative to the graphic boundary, used to define the effective area within the graphic where the fill content is actually allowed to be displayed; the other set is the clipping parameter defined by the clipping rectangle (srcRect), which also includes the four-way clipping percentages, used to describe the range within which the image resource itself is clipped. The parsing process includes not only reading the numerical values ​​but also normalizing the parameter format, such as converting percentages to decimals between 0 and 1, and padding for default values. The default value for fillRect is zero, ensuring that subsequent calculations have a standardized input basis.

[0101] Step C142: Calculate the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameters and the cropping parameters; First, the geometric boundaries of the target fill area within the graphic coordinate system are determined based on the indentation parameters, i.e., the starting coordinates and width and height dimensions of the fill area relative to the origin of the graphic are calculated. This intermediate result represents the actual window size left for the image on the canvas.

[0102] Subsequently, based on the size of the fill area and the cropping parameters, a reverse derivation is performed to determine the theoretical full size that the original image should have in its uncropped state so that the cropped image exactly fills the fill area, as well as the offset of this theoretical full image relative to the starting point of the fill area (i.e., the placement starting point). It should be understood that the full size does not refer to the physical pixel resolution of the image file, but rather a mathematical virtual size used to construct the rendering transformation matrix; the placement starting point is the negative or positive offset value calculated to compensate for the visual displacement caused by cropping.

[0103] In one possible implementation, step C142 may include: Based on the indentation parameters, calculate the indentation position and indentation size of the target filling area within the graphic; It should be noted that the indentation parameter defines the inner margin of the fill content relative to the geometric boundary of the graphic. It needs to be converted from a relative scale to an absolute pixel coordinate value in order to define the precise geometric range of the target fill area.

[0104] Indentation position refers to the starting coordinates of the top-left corner of the target fill area in the local coordinate system of the graphic, which determines the anchor point of the fill content inside the graphic. Indentation size refers to the actual width and height of the target fill area, representing the effective display area remaining after deducting the four-way indentation.

[0105] In specific implementation, the steps for calculating the indentation position and indentation size of the target fill area within the graphic based on the indentation parameters may include: Analyze the indentation percentages for the four directions (up, down, left, and right) defined in the indentation parameters; Obtain the target width and target height of the graphic from the geometric properties; The horizontal starting point of the fill area is calculated based on the left indentation percentage in the indentation percentage and the target width of the graphic. The vertical starting point of the fill area is calculated based on the upper indentation percentage in the indentation percentage and the target height of the graphic. The width of the filled area is calculated based on the left indentation percentage, the right indentation percentage, and the target width of the graphic. The height of the filled area is calculated based on the upper indentation percentage, the lower indentation percentage, and the target height of the graphic. The indentation position of the target fill area within the graphic is obtained based on the horizontal starting point and the vertical starting point of the fill area, and the indentation dimension of the target fill area within the graphic is obtained based on the width and height of the fill area.

[0106] In the graphic model of a presentation, the fill rectangle (fillRect) is typically defined as a percentage relative to the bounding box of the graphic, indicating how far the fill content should be from the edge of the graphic. To accurately position the graphic in the target rendering space, the system first needs to extract the target rendering size of the current graphic from the geometric attributes of the structured rendering description data, namely the target width (shapeW) and target height (shapeH). These two parameters represent the actual physical pixel range occupied by the graphic on the webpage. Simultaneously, the system parses the indentation percentages defined in the indentation parameters for the four directions: top (t), bottom (b), left (l), and right (r). These percentage values ​​are typically between 0 and 100, but need to be normalized to a decimal form of 0 to 1 before calculation.

[0107] When calculating the starting coordinates of the fill region, a unidirectional accumulation strategy is used. The horizontal starting point of the fill region (FillOffsetX) is determined solely by the left indentation percentage, calculated using the following formula: fillOffsetX = shapeW × fillRect.l / 100 In the above formula, fillRect.l is the left indentation percentage in the indentation percentage, and shapeW is the target width of the graphic.

[0108] The vertical starting point of the fill area (FillOffsetY) is determined solely by the percentage of the top indentation, calculated using the following formula: fillOffsetY = shapeH × fillRect.t / 100 Where fillRect.t is the top indentation percentage, and shapeH is the target height of the graphic.

[0109] When calculating the size of the fill area, a two-way deduction strategy is used. The fill area width (FillW) needs to deduct the indentation on both the left and right sides, and the fill area height (FillH) needs to deduct the indentation on both the top and bottom sides. The calculation formula is as follows: fillW = shapeW × (1 - fillRect.l / 100 - fillRect.r / 100) fillH = shapeH × (1 - fillRect.t / 100 - fillRect.b / 100) Here, fillRect.r is the right indentation percentage, and fillRect.b is the bottom indentation percentage.

[0110] If l+fillRect.r≥1 or fillRect.t+fillRect.b≥1 occurs in the actual data, it indicates that the source document defines an illegal fill region. In this case, the exception fallback strategy described in the previous embodiment should be triggered, such as clamping the fill region size to 0 or falling back to the default fill behavior to prevent rendering errors caused by negative sizes.

[0111] To illustrate the calculation process more clearly, let's take a specific scenario as an example: Assume a graphic element has a target rendering size of 400 pixels wide and 300 pixels high, and its fill rectangle's indentation parameters are: left 10%, right 20%, top 15%, bottom 5%. First, normalize the parameters: fillRect.l=0.1, fillRect.r=0.2, fillRect.t=0.15, fillRect.b=0.05. Next, calculate the indentation position: horizontal starting point FillOffsetX = 400 × 0.1 = 40 pixels, vertical starting point FillOffsetY = 300 × 0.15 = 45 pixels. Then, calculate the indentation size: fill width FillW = 400 × (1 - 0.1 - 0.2) = 400 × 0.7 = 280 pixels, fill height FillH = 300 × (1 - 0.15 - 0.05) = 300 × 0.8 = 240 pixels. The final target filling area is a rectangular window located at (40, 45) with a size of 280×240 pixels. This window is the "canvas" that the image filling content must precisely fit in subsequent steps.

[0112] Based on the indentation size and the cropping parameters, the full size of the uncropped image is calculated. In the source document model, the cropping parameter describes the percentage removed from the original image. However, in web page rendering, to correctly display the cropped content within a limited target filling area, it's essential to know the "theoretical size of the original image in its uncropped state." This is because rendering engines typically adapt the image to the container by scaling the entire image, rather than directly cutting pixels. Therefore, the system uses the obtained indentation size (i.e., the width and height of the target filling area) as a known quantity, combined with the visible area ratio defined in the cropping parameters, to inversely deduce the complete image size through division.

[0113] In one feasible implementation, the step of "deriving the full size of the uncropped image based on the indentation size and the cropping parameters" may include: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; The width and height of the filling area are obtained based on the indentation dimensions. The full width of the uncropped image is calculated based on the left cropping percentage, the right cropping percentage, and the width of the fill area. The full height of the uncropped image is calculated based on the upper crop percentage, the lower crop percentage, and the height of the fill area. The full dimensions of the uncropped image are obtained based on the full width and the full height.

[0114] It should be noted that, firstly, the cropping percentages in the four directions—up (t), down (b), left (l), and right (r)—defined by the cropping parameters are parsed from the structured rendering description data and normalized to a decimal form between 0 and 1. Based on this, the full width (FullW) and full height (FullH) of the uncropped image can be calculated using the following formulas: scaleW = 1 - srcRect.l / 100 - srcRect.r / 100 scaleH = 1 - srcRect.t / 100 - srcRect.b / 100 fullW = fillW / scaleW fullH = fillH / scaleH Wherein, srcRect.l, srcRect.r, srcRect.t, and srcRect.b represent the cropping percentages in the left, right, top, and bottom directions, respectively; fillW and fillH represent the width and height of the fill region, respectively; and fullW and fullH represent the full width and full height of the image before cropping, respectively.

[0115] For example, if the width of the fill area is 280 pixels, and the image is cropped by 20% on the left and 10% on the right (i.e., the horizontal visible ratio is 70%), then the deduced full width should be 280 / 0.7 = 400 pixels. This means that only when the original image is rendered as 400 pixels wide will the remaining portion after removing 20% ​​from the left and 10% from the right be exactly equal to 280 pixels, thus perfectly matching the width requirement of the target fill area.

[0116] Suppose a graphic element has a fill area size of 200×100 pixels, and the source document defines cropping parameters as 50% on the left, 0% on the right, 0% on the top, and 0% on the bottom. If an incorrect direct assignment method is used, the image will be rendered as 200×100 pixels. However, because the 50% cropping on the left is not considered, the rendering engine will display the left half of the original image (assuming the original image's aspect ratio is 2:1), or stretch the left half of the original image to a width of 200 pixels, causing distortion. Using the reverse calculation algorithm in this embodiment, the system calculates the horizontal visible ratio to be 50%, and then deduces that the full width should be 200 / 0.5 = 400 pixels. Subsequently, the system shifts this 400-pixel-wide full image to the left, so that the visible content originally located in the 50% to 100% range falls exactly within the 200-pixel-wide fill area. This processing method not only ensures the correctness of the visual content but also maintains the original aspect ratio and clarity of the image.

[0117] Based on the indentation position, the indentation size, the full size, and the cropping parameters, calculate the starting point for placing the image in the target filling area.

[0118] After determining the theoretical full size of the image, it's also necessary to determine its placement position in the rendering coordinate system, i.e., the placement starting point. Because the image has been enlarged to fit the fill area, and the source document defines a cropping direction, the top-left corner of the full image cannot be directly aligned with the top-left corner of the fill area; otherwise, the cropped area would be incorrectly displayed within the visible range. Calculating the placement starting point is essentially a negative offset compensation process. Its purpose is to move the cropped left and top areas of the full image out of the visible boundary of the fill area, ensuring that the remaining visible area falls precisely within the fill area. The calculation formula is as follows: imageX = fillOffsetX - fullW × srcRect.l / 100 imageY = fillOffsetY - fullH × srcRect.t / 100 Where ImageX and ImageY represent the x and y coordinates of the starting point of the image placement in the target fill region, respectively; FillOffsetX and FillOffsetY represent the x and y coordinates of the indentation position of the target fill region within the graphic, respectively; FullWidth and FullHeight represent the full width and full height of the uncropped image obtained by reverse calculation, respectively; srcRect.l and srcRect.t represent the left and top crop percentages defined in the cropping parameters, respectively.

[0119] Ultimately, the placement starting point is determined by adding this negative offset to the starting coordinates of the fill area. Through this precise coordinate calculation, the system achieves perfect coupling between the cropping effect and the fill position, ensuring that regardless of the complex indentation and cropping combinations defined in the source document, the image fill effect rendered on the webpage maintains pixel-level consistency with the original document.

[0120] Step C143: Create a pattern element in the vector graphics definition tag, and place the image inside the pattern element based on the full size and the placement starting point; Understandably, the pattern element here acts as a container encapsulating complex transformation logic. The system creates an independent pattern node within the resource definition area of ​​the vector graphics definition tag, setting the previously calculated full size as the viewport size or tile size of this pattern node, while simultaneously converting the placement starting point into the coordinate offset attribute of the image resource within the pattern. In this way, all transformation operations related to the image resource, such as cropping, scaling, and translation, are encapsulated within a self-contained rendering unit. When this pattern element is referenced by external graphics, the rendering engine automatically applies its internally predefined transformation rules without requiring the external caller to be aware of the underlying computational details. Furthermore, image fills containing other visual attributes such as transparency and blending modes can also be configured within the pattern element at this stage, further enhancing the independence and integrity of the rendering unit.

[0121] Step C144: Assign the reference address of the pattern element to the fill attribute of the graphic path to generate the image fill definition.

[0122] After constructing and configuring the pattern element, the system obtains its unique identifier within the current document context as a reference address. This reference address is then written into the fill attribute field of the target vector graphic path, establishing a binding relationship between the graphic outline and the image fill effect. When the rendering engine draws the graphic path, it locates the corresponding pattern element based on the reference address and fills the image content encapsulated by the pattern element into the closed area enclosed by the path according to preset transformation rules. Because the fill content is confined within the geometric boundaries of the vector path, the image fill automatically adapts to the shape of the graphic outline, whether it is a regular rectangle, circle, or a complex arrow, star, or irregular polygon, achieving a precise outline cropping effect.

[0123] Through the aforementioned dual coordinate transformation architecture and timing locking mechanism, and by using pattern elements as the encapsulation carrier of transformation logic, the style definition and graphic structure are completely decoupled. This not only improves the modularity and reusability of the code, but also provides convenience for adjusting fill parameters individually in subsequent online editing scenarios. The entire transformation process is based entirely on mathematical derivation and vector rendering characteristics, without introducing any rasterization processing, ensuring the clarity and edge sharpness of the image fill at any scaling ratio, perfectly meeting the needs of high-fidelity web page reproduction in presentations.

[0124] After reversing the srcRect to determine the full dimensions of the uncropped image and its starting point, the cropped area can be made to precisely fill the aforementioned fill area. Then, the coordinates and dimensions of the pattern are determined by the alignType. For example, in tiling mode, the fill area size is used as the tile size; in stretching mode, the graphic size or the target fill area is used as the pattern size. The actual position and size within the pattern use imageX, imageY, imageW = fullW, imageH = fullH, set preserveAspectRatio = none, and restore opacity.

[0125] Step S204': Assign the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element containing the target format of the vector graphic tag.

[0126] After generating an independent fill definition, the system assigns it a unique identifier within the current rendering context as a reference address. Subsequently, when constructing the vector graphics tag, this reference address is written into its fill attribute field, thus establishing the association between the graphic outline and the fill style. When the rendering engine parses the vector graphics tag, it looks up the corresponding fill definition based on the reference address and applies the defined visual effects to the closed area enclosed by the graphic path.

[0127] For example, for linear gradients, create a `linearGradient` in `defs`, set `gradientTransform=rotate(rot,0.5,0.5)` according to `rot`, and write each gradient point as `stop`. For radial gradients, create a `radialGradient` based on a circle or a specified radial type, and write the gradient points, color, and transparency. For pattern fills, create a `pattern`, first using a background rectangle as the base, and then overlay foreground primitives such as dots, striped rectangles, or diagonal paths according to the pattern type.

[0128] This reference-based binding mechanism achieves a complete separation of structure and presentation. Compared to hard-coding fill parameters directly within graphic tags, the reference mechanism not only supports dynamic style switching and global unified management, but also facilitates subsequent online editing functions. For example, users can modify the fill definition and it will affect all graphics referencing that definition in real time, without having to modify element attributes one by one. It should be understood that the specific form of the reference address can be a string ID, a URL fragment, or other index identifier, as long as it can uniquely point to the corresponding fill definition in the target rendering environment.

[0129] In one feasible implementation, step S204' may include steps C21 to C23: Step C21: Construct a vector graphics root node, create a resource definition tag inside the vector graphics root node, and add the fill definition to the resource definition tag; The root node of a vector graphic is the top-level container of the entire graphics rendering context, defining the origin of the coordinate system, the viewport size, and the namespace range. The resource definition tag is a special logical area, its core characteristics being "invisibility" and "reusability." Fill definitions (such as gradient, pattern, or picture fill configurations) defined within this area are not directly drawn onto the canvas by the rendering engine; instead, they reside in memory as referenced resource objects.

[0130] Therefore, declaring all reusable resources in advance when constructing the root node of vector graphics not only satisfies the parsing specifications of the rendering engine but also enables unified resource management, avoiding code redundancy caused by repeatedly defining the same fill style. When multiple graphic elements reuse the same image fill style, only one fill definition needs to be added in the resource definition tag. All graphics can call this resource through reference addresses, significantly compressing the final generated webpage code size and improving page loading and rendering efficiency.

[0131] Step C22: Construct a graphics group node inside the root node of the vector graphics, and attach the vector graphics tag to the graphics group node, wherein the vector graphics tag calls the corresponding definition in the resource definition tag through a reference address; Understandably, graphic grouping nodes can integrate multiple graphic elements with the same transformation attributes, display hierarchy, or interaction logic into a single unit, facilitating unified transformation operations such as translation, scaling, and rotation on a group of related elements. It also makes it easier to select, move, or modify the entire group of elements during subsequent online editing.

[0132] By attaching vector graphic tags containing fill references to graphic group nodes, different graphic elements within the entire presentation page can be organized in an orderly manner according to the hierarchical relationship in the original document. This ensures that the display hierarchy during web page rendering is completely consistent with the original document, while also making the generated SVG code structure clearer and easier for subsequent maintenance and editing.

[0133] Step C23: Generate page elements in the target format based on the vector graphics root node, the resource definition tag, and the graphics grouping node.

[0134] In practice, the system assembles all the aforementioned nodes into a complete document fragment conforming to the target format specification, completing all attributes, namespaces, and closing tags, and finally outputting target page elements that can be directly parsed by the web page rendering engine. The generated page elements can be directly embedded into the DOM tree of the web page document without additional conversion or post-processing, achieving a rendering output that is highly consistent with the visual effect of the original presentation.

[0135] After generating fill definitions for each fill type, the fill definitions can be merged and the SVG output can be represented as follows: <svg width="shapeW" height="shapeH"> <defs><!-- gradient / pattern / image / stroke / shadow definitions-->< / defs> <g> <path d="scaledPathData" fill="url(#fillId)" stroke="..." / > < / g> < / svg> You can cache and reuse the same image resources, gradients, or pattern definitions; you can also generate unique defs identifiers according to page-level namespaces. All defs identifiers should be unique within a single page or the entire document to prevent crosstalk from multiple element references. Fill, stroke gradients, and shadow filters can be merged into the same defs and referenced by the corresponding path or g.

[0136] like Figure 4 As shown, Figure 4 This is a schematic diagram of the system's module structure, including a document parsing module, an image cropping and restoration module, a graphic fill restoration module, a page assembly module, and an HTML page output module. The document parsing module reads PPTX files and outputs structured element data. The image cropping and restoration module generates cropping boxes and magnified offset images based on `srcRect`. The graphic fill restoration module restores graphic paths and constructs solid color, gradient, pattern, or image fills. The page assembly module assembles a single-page DOM / SVG based on coordinates, hierarchy, rotation, and opacity. The HTML page output module outputs page resources, styles, and adaptive scaling scripts.

[0137] For example, if the target element is an image filled with an arrow shape, the arrow shape is 200×100 pixels, fillRect={l:10,t:10,r:0,b:0}, srcRect={l:20,r:20,t:0,b:0}, then fillOffsetX=20; fillOffsetY=10; fillW=180; fillH=90; scaleW=0.6; scaleH=1; fullW=180 / 0.6=300; fullH=90; imageX=20-300×0.2=-40; imageY=10, the output structure is as follows: <pattern id="pattern-arrow" patternunits="userSpaceOnUse" width="200" height="100"> < / pattern> <path d="scaledArrowPath" fill="url(#pattern-arrow)" / > After the above transformations, the image is cropped, enlarged, and offset within the filled area, and automatically cropped to the arrow outline by the arrow path, without overflowing outside the outline.

[0138] This embodiment extracts the original path data of graphic elements and transforms it to pixel coordinate space based on the scaling ratio, while also processing the fill definition. This achieves lossless scaling and accurate restoration of vector graphics. Unlike bitmaps, this method uses mathematical transformation of path coordinates to ensure that the edges of the graphics remain sharp and clear when the webpage is zoomed in or out; at the same time, separating the fill attribute from the path processing enables compatibility with complex fill effects and improves the rendering quality of complex graphics.

[0139] For example, to help understand the implementation process of the webpage restoration method for image objects in the presentation obtained by combining this embodiment with the above embodiment one, please refer to... Figure 5 , Figure 5 This document provides a simplified flowchart of a method for restoring image objects from a presentation to a webpage. Specifically: A PPTX file is input; the Open XML of the PPTX file is parsed to generate structured JSON data; then, corresponding modules are assigned according to element type for processing. If it is an image, image cropping and restoration are performed; if it is a graphic, graphic filling and restoration are performed; if it is text or other elements, normal restoration is performed. Then, HTML is assembled according to hierarchy; finally, background overlay and adaptive scaling are performed, outputting an editable, vector, and scalable page, thus completing the image restoration from the PPTX file.

[0140] It should be noted that the above examples are only for understanding this application and do not constitute a limitation on the webpage restoration method of image objects in the presentation of this application. Any simple transformations based on this technical concept are within the protection scope of this application.

[0141] This application also provides a webpage restoration device for image objects in a presentation; please refer to... Figure 6The webpage restoration device for image objects in the presentation includes: The parsing module 10 is used to parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references, and visual embellishment parameters of each element in the presentation file.

[0142] The restoration module 20 is used to visually restore the target elements in the presentation file based on the structured rendering description data, and generate page elements in the target format.

[0143] Assembly module 30 is used to assemble page elements of the target format according to their hierarchical relationship and display the assembled page elements of the target format on the web page.

[0144] The webpage restoration device for image objects in presentations provided in this application employs the webpage restoration method for image objects in presentations described in the above embodiments, which can solve the problems of image cropping distortion and graphic filling disorder when a presentation is converted to a webpage format. Compared with the prior art, the beneficial effects of the webpage restoration device for image objects in presentations provided in this application are the same as those of the webpage restoration method for image objects in presentations provided in the above embodiments, and other technical features in the webpage restoration device for image objects in presentations are the same as those disclosed in the methods of the above embodiments, and will not be repeated here.

[0145] In one embodiment, the restoration module 20 is further configured to, when the target element in the presentation file is an image element and contains a cropping rectangle, obtain the cropping parameters defined in the cropping rectangle based on the visual modification parameters; Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

[0146] In one embodiment, the restoration module 20 is further configured to construct a two-layer rendering structure comprising an outer container and inner image elements; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as a page element in the target format.

[0147] In one embodiment, the restoration module 20 is further configured to parse the cropping percentages in the four directions (up, down, left, and right) defined in the cropping parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

[0148] In one embodiment, the restoration module 20 is further configured to obtain the visible width ratio and the visible height ratio based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

[0149] In one embodiment, the restoration module 20 is further configured to, when the target element in the presentation file is a graphic element, extract the original path data and target rendering size of the graphic from the structured rendering description data, calculate the bounding box of the original path data, and calculate the scaling ratio based on the target rendering size; The coordinate points, control points, and arc parameters in the original path data are transformed to pixel coordinate space based on the scaling ratio to generate transformed path data, and vector graphic labels containing the transformed path data are constructed. The fill type of the graphic element is obtained from the structured rendering description data, and a corresponding fill definition is generated based on the fill type; Assign the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element in the target format containing the vector graphic tag.

[0150] In one embodiment, the restoration module 20 is further configured to extract color values ​​and transparency parameters when the fill type is solid color fill, and generate a solid color fill definition based on the color values ​​and transparency parameters; When the fill type is gradient fill, extract the gradient attribute, create a gradient element in the vector graphics definition tag, and generate a gradient fill definition; When the fill type is pattern fill, extract the pattern attributes, create a pattern element in the vector graphics definition tag, and generate a pattern fill definition. When the fill type is image fill, the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition are parsed, and a dual coordinate transformation calculation is performed to generate the image fill definition.

[0151] In one embodiment, the restoration module 20 is further configured to parse the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition when the fill type is image fill; Calculate the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameter and the cropping parameter; Create a pattern element in the vector graphics definition tag, and place the image inside the pattern element based on the full size and the placement starting point; Assign the reference address of the pattern element to the fill attribute of the graphic path to generate the image fill definition.

[0152] In one embodiment, the restoration module 20 is further configured to calculate the indentation position and indentation size of the target filling area within the graphic based on the indentation parameters; Based on the indentation size and the cropping parameters, the full size of the uncropped image is calculated. Based on the indentation position, the indentation size, the full size, and the cropping parameters, calculate the starting point for placing the image in the target filling area.

[0153] In one embodiment, the restoration module 20 is further configured to parse the indentation percentages in the four directions (up, down, left, and right) defined in the indentation parameters; Obtain the target width and target height of the graphic from the geometric properties; The horizontal starting point of the fill area is calculated based on the left indentation percentage in the indentation percentage and the target width of the graphic. The vertical starting point of the fill area is calculated based on the upper indentation percentage in the indentation percentage and the target height of the graphic. The width of the filled area is calculated based on the left indentation percentage, the right indentation percentage, and the target width of the graphic. The height of the filled area is calculated based on the upper indentation percentage, the lower indentation percentage, and the target height of the graphic. The indentation position of the target fill area within the graphic is obtained based on the horizontal starting point and the vertical starting point of the fill area, and the indentation dimension of the target fill area within the graphic is obtained based on the width and height of the fill area.

[0154] In one embodiment, the restoration module 20 is further configured to parse the cropping percentages in the four directions (up, down, left, and right) defined in the cropping parameters; The width and height of the filling area are obtained based on the indentation dimensions. The full width of the uncropped image is calculated based on the left cropping percentage, the right cropping percentage, and the width of the fill area. The full height of the uncropped image is calculated based on the upper crop percentage, the lower crop percentage, and the height of the fill area. The full dimensions of the uncropped image are obtained based on the full width and the full height.

[0155] In one embodiment, the restoration module 20 is further configured to construct a vector graphics root node, create a resource definition tag inside the vector graphics root node, and add the fill definition to the resource definition tag; A graphics group node is constructed inside the root node of the vector graphics, and the vector graphics tag is attached to the graphics group node. The vector graphics tag calls the corresponding definition in the resource definition tag through a reference address. Based on the vector graphics root node, the resource definition tag, and the graphics grouping node, page elements in the target format are generated.

[0156] In one embodiment, the assembly module 30 is further configured to obtain the hierarchical attributes corresponding to the hierarchical relationship of each page element of the target format; Based on the hierarchical attributes, the page elements of each target format are sorted in ascending order to determine the rendering order of each page element in the target rendering webpage. According to the rendering order, each page element of the target format is added to the document object model node corresponding to the target rendered webpage in turn, so that each page element of the target format is displayed on the webpage.

[0157] This application provides a webpage restoration device for image objects in a presentation. The webpage restoration device for image objects in a presentation includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the webpage restoration method for image objects in a presentation as described in Embodiment 1 above.

[0158] The following is for reference. Figure 7This document illustrates a structural diagram of a webpage restoration device suitable for implementing image objects in presentations according to embodiments of this application. The webpage restoration device for image objects in presentations according to embodiments of this application may include, but is not limited to, mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), tablets, PMPs (Portable Media Players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. Figure 7 The webpage rendering device for the image objects shown in the presentation is merely an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0159] like Figure 7 As shown, the web page rendering device for image objects in a presentation may include a processing unit 1001 (e.g., a central processing unit, a graphics processing unit, etc.), which can perform various appropriate actions and processes according to a program stored in ROM (Read Only Memory) 1002 or a program loaded from storage device 1003 into RAM (Random Access Memory) 1004. RAM 1004 also stores various programs and data required for the operation of the web page rendering device for image objects in the presentation. The processing unit 1001, ROM 1002, and RAM 1004 are interconnected via bus 1005. Input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to I / O interface 1006: input devices 1007 including, for example, touchscreens, touchpads, keyboards, mice, image sensors, microphones, accelerometers, gyroscopes, etc.; output devices 1008 including, for example, LCDs (Liquid Crystal Displays), speakers, vibrators, etc.; storage devices 1003 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1009. Communication device 1009 allows the web page rendering device for image objects in a presentation to communicate wirelessly or wiredly with other devices to exchange data. Although web page rendering devices for image objects in a presentation with various systems are shown in the figures, it should be understood that it is not required to implement or possess all the systems shown. More or fewer systems can be implemented or possessed alternatively.

[0160] Specifically, according to the embodiments disclosed in this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from storage device 1003, or installed from ROM 1002. When the computer program is executed by processing device 1001, it performs the functions defined in the methods of the embodiments disclosed in this application.

[0161] The webpage restoration device for image objects in presentations provided in this application, employing the webpage restoration method for image objects in presentations described in the above embodiments, can solve the problems of image cropping distortion and graphic filling disorder when converting presentations to webpage format. Compared with the prior art, the beneficial effects of the webpage restoration device for image objects in presentations provided in this application are the same as those of the webpage restoration method for image objects in presentations provided in the above embodiments, and other technical features of the webpage restoration device for image objects in presentations are the same as those disclosed in the previous embodiment method, and will not be repeated here.

[0162] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any suitable manner in one or more embodiments or examples.

[0163] The above description is merely a specific embodiment of this application, but the scope of protection of this application is not limited thereto. Any variations or substitutions that can be easily conceived by those skilled in the art within the scope of the technology disclosed in this application should be included within the scope of protection of this application. Therefore, the scope of protection of this application should be determined by the scope of the claims.

[0164] This application provides a computer-readable storage medium having computer-readable program instructions (i.e., a computer program) stored thereon, the computer-readable program instructions being used to execute the webpage restoration method for image objects in the presentation document described in the above embodiments.

[0165] The computer-readable storage medium provided in this application may be, for example, a USB flash drive, but is not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to: electrical connections having one or more wires, portable computer disks, hard disks, RAM (Random Access Memory), ROM (Read Only Memory), EPROM (Erasable Programmable Read Only Memory or Flash Memory), optical fibers, CD-ROM (CD-Read Only Memory), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (Radio Frequency), etc., or any suitable combination thereof.

[0166] The aforementioned computer-readable storage medium may be included in a web page rendering device for image objects in a presentation; or it may exist independently and not be included in a web page rendering device for image objects in a presentation.

[0167] The aforementioned computer-readable storage medium carries one or more programs that, when executed by a web page rendering device for image objects in a presentation, cause the web page rendering device for image objects in the presentation to: parse the presentation file, extract structured rendering description data from the page, the structured rendering description data including geometric attributes, resource references, and visual modification parameters of each element in the presentation file; visually render the target elements in the presentation file based on the structured rendering description data, generating page elements in the target format; assemble the page elements in the target format according to hierarchical relationships, and display the assembled page elements in the target format on a web page.

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

[0169] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0170] The modules described in the embodiments of this application can be implemented in software or hardware. The names of the modules do not necessarily limit the functionality of the unit itself.

[0171] The readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the webpage restoration method for image objects in the presentation document described above. This solves the problems of image cropping distortion and graphic fill errors when a presentation document is converted to a webpage format. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the webpage restoration method for image objects in the presentation document provided in the above embodiments, and will not be repeated here.

[0172] This application also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of the webpage restoration method for image objects in a presentation as described above.

[0173] The computer program product provided in this application can solve the problems of image cropping distortion and graphic filling disorder when converting presentations to web page format. Compared with the prior art, the beneficial effects of the computer program product provided in this application are the same as the beneficial effects of the web page restoration method for image objects in presentations provided in the above embodiments, and will not be repeated here.

[0174] The above description is only a part of the embodiments of this application and does not limit the patent scope of this application. All equivalent structural transformations made under the technical concept of this application and using the contents of the specification and drawings of this application, or direct / indirect applications in other related technical fields, are included in the patent protection scope of this application.

[0175] This application discloses A1. A method for restoring image objects in a presentation to a webpage, the method comprising: Parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references, and visual embellishment parameters of each element in the presentation file. Based on the structured rendering description data, the target elements in the presentation file are visually restored to generate page elements in the target format; Assemble the page elements of the target format according to their hierarchical relationship, and then display the assembled page elements of the target format on the web page.

[0176] A2. As described in A1, the step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is an image element and contains a cropping rectangle, the cropping parameters defined in the cropping rectangle are obtained based on the visual modification parameters. Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

[0177] A3. As described in A2, the step of constructing a two-layer rendering structure comprising an outer container and an inner image element, adjusting the inner image element based on the size magnification factor and the position offset, and using the two-layer rendering structure as a page element of the target format includes: Construct a two-layer rendering structure that includes an outer container and inner image elements; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as a page element in the target format.

[0178] A4. As described in A2, the step of determining the corresponding size magnification and position offset based on the cutting parameters includes: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

[0179] A5. The method as described in A4, further comprising: The visible width ratio and visible height ratio are obtained based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

[0180] A6. As described in A1, the step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is a graphic element, the original path data and target rendering size of the graphic are extracted from the structured rendering description data, the bounding box of the original path data is calculated, and the scaling ratio is calculated based on the target rendering size. The coordinate points, control points, and arc parameters in the original path data are transformed to pixel coordinate space based on the scaling ratio to generate transformed path data, and vector graphic labels containing the transformed path data are constructed. The fill type of the graphic element is obtained from the structured rendering description data, and a corresponding fill definition is generated based on the fill type; Assign the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element in the target format containing the vector graphic tag.

[0181] A7. As described in A6, the steps for generating the corresponding fill definition based on the fill type include: When the fill type is solid color fill, extract the color value and transparency parameter, and generate a solid color fill definition based on the color value and transparency parameter; When the fill type is gradient fill, extract the gradient attribute, create a gradient element in the vector graphics definition tag, and generate a gradient fill definition; When the fill type is pattern fill, extract the pattern attributes, create a pattern element in the vector graphics definition tag, and generate a pattern fill definition. When the fill type is image fill, the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition are parsed, and a dual coordinate transformation calculation is performed to generate the image fill definition.

[0182] A8. As described in A7, the step of parsing the indentation parameters of the fill rectangle definition and the cropping parameters of the cropping rectangle definition, performing dual coordinate transformation calculations, and generating the image fill definition when the fill type is image fill includes: When the fill type is image fill, parse the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition; Calculate the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameter and the cropping parameter; Create a pattern element in the vector graphics definition tag, and place the image inside the pattern element based on the full size and the placement starting point; Assign the reference address of the pattern element to the fill attribute of the graphic path to generate the image fill definition.

[0183] A9. As described in A8, the step of calculating the full size of the uncropped image and the starting point for placing the image in the target filling area based on the indentation parameter and the cropping parameter includes: Based on the indentation parameters, calculate the indentation position and indentation size of the target filling area within the graphic; Based on the indentation size and the cropping parameters, the full size of the uncropped image is calculated. Based on the indentation position, the indentation size, the full size, and the cropping parameters, calculate the starting point for placing the image in the target filling area.

[0184] A10. As described in A9, the step of calculating the indentation position and indentation size of the target fill region within the graphic based on the indentation parameter includes: Analyze the indentation percentages for the four directions (up, down, left, and right) defined in the indentation parameters; Obtain the target width and target height of the graphic from the geometric properties; The horizontal starting point of the fill area is calculated based on the left indentation percentage in the indentation percentage and the target width of the graphic. The vertical starting point of the fill area is calculated based on the upper indentation percentage in the indentation percentage and the target height of the graphic. The width of the filled area is calculated based on the left indentation percentage, the right indentation percentage, and the target width of the graphic. The height of the filled area is calculated based on the upper indentation percentage, the lower indentation percentage, and the target height of the graphic. The indentation position of the target fill area within the graphic is obtained based on the horizontal starting point and the vertical starting point of the fill area, and the indentation dimension of the target fill area within the graphic is obtained based on the width and height of the fill area.

[0185] A11. The method as described in A9, wherein the step of inverting the full size of the uncropped image based on the indentation size and the cropping parameters includes: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; The width and height of the filling area are obtained based on the indentation dimensions. The full width of the uncropped image is calculated based on the left cropping percentage, the right cropping percentage, and the width of the fill area. The full height of the uncropped image is calculated based on the upper crop percentage, the lower crop percentage, and the height of the fill area. The full dimensions of the uncropped image are obtained based on the full width and the full height.

[0186] A12. As described in A6, the step of assigning the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element containing the target format of the vector graphic tag includes: Construct a vector graphics root node, create a resource definition tag inside the vector graphics root node, and add the fill definition to the resource definition tag; A graphics group node is constructed inside the root node of the vector graphics, and the vector graphics tag is attached to the graphics group node. The vector graphics tag calls the corresponding definition in the resource definition tag through a reference address. Based on the vector graphics root node, the resource definition tag, and the graphics grouping node, page elements in the target format are generated.

[0187] A13. The method as described in any one of A1 to A12, wherein the step of assembling the page elements of the target format according to a hierarchical relationship and displaying the assembled page elements of the target format on a webpage includes: Obtain the hierarchical attributes corresponding to the hierarchical relationship of each page element in the target format; Based on the hierarchical attributes, the page elements of each target format are sorted in ascending order to determine the rendering order of each page element in the target rendering webpage. According to the rendering order, each page element of the target format is added to the document object model node corresponding to the target rendered webpage in turn, so that each page element of the target format is displayed on the webpage.

[0188] This application also discloses B14. A webpage restoration device for image objects in a presentation, the device comprising: The parsing module is used to parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references and visual embellishment parameters of each element in the presentation file. The restoration module is used to visually restore the target elements in the presentation file based on the structured rendering description data, and generate page elements in the target format; The assembly module is used to assemble page elements of the target format according to their hierarchical relationship and display the assembled page elements of the target format on the web page.

[0189] B15. The apparatus as described in B14, wherein the restoration module is further configured to, when the target element in the presentation file is an image element and contains a cropping rectangle, obtain the cropping parameters defined in the cropping rectangle based on the visual modification parameters; Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

[0190] B16. The apparatus as described in B15, wherein the restoration module is further configured to construct a two-layer rendering structure comprising an outer container and an inner image element; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as a page element in the target format.

[0191] B17. The apparatus as described in B15, wherein the restoration module is further configured to parse the cutting percentages in the four directions of top, bottom, left, and right defined in the cutting parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

[0192] B18. The apparatus as described in B17, wherein the restoration module is further configured to obtain a visible width ratio and a visible height ratio based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

[0193] This application also discloses C19. A webpage restoration device for image objects in a presentation, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the webpage restoration method for image objects in a presentation as described above.

[0194] This application also discloses D20. A storage medium, which is a computer-readable storage medium, on which a computer program is stored, which, when executed by a processor, implements the steps of the webpage restoration method for image objects in a presentation as described above.

Claims

1. A method for restoring image objects from a presentation to a webpage, characterized in that, The method includes: Parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references, and visual embellishment parameters of each element in the presentation file. Based on the structured rendering description data, the target elements in the presentation file are visually restored to generate page elements in the target format; Assemble the page elements of the target format according to their hierarchical relationship, and then display the assembled page elements of the target format on the web page.

2. The method as described in claim 1, characterized in that, The step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is an image element and contains a cropping rectangle, the cropping parameters defined in the cropping rectangle are obtained based on the visual modification parameters. Based on the cutting parameters, determine the corresponding size magnification and position offset; A two-layer rendering structure containing an outer container and an inner image element is constructed, and the inner image element is adjusted based on the size magnification factor and the position offset. The two-layer rendering structure is then used as a page element in the target format.

3. The method as described in claim 2, characterized in that, The steps of constructing a two-layer rendering structure comprising an outer container and an inner image element, adjusting the inner image element based on the size magnification and the position offset, and using the two-layer rendering structure as a page element in the target format include: Construct a two-layer rendering structure that includes an outer container and inner image elements; Configure the outer container to hide overflowing content to create boundary occlusion; The size and position of the inner layer image elements are adjusted according to the size magnification factor and the position offset, so that the cropped visible area fills the outer layer container; The two-layer rendering structure is used as the page element in the target format.

4. The method as described in claim 2, characterized in that, The steps of determining the corresponding size magnification and position offset based on the cutting parameters include: Analyze the cropping percentages in the four directions (top, bottom, left, and right) defined in the cropping parameters; Based on the cropping percentages in the four directions, the visible area ratio of the inner layer image elements is calculated; Calculate the size magnification factor based on the proportion of the visible area; The position offset is calculated based on the cropping percentage and the visible area ratio.

5. The method as described in claim 4, characterized in that, The method further includes: The visible width ratio and visible height ratio are obtained based on the visible area ratio; If the visible width ratio or the visible height ratio is less than or equal to a preset value, diagnostic information is recorded and a fallback strategy is executed. The fallback strategy includes at least: reverting to uncropped display, using a default image, using a solid color placeholder, or skipping the current element.

6. The method as described in claim 1, characterized in that, The step of visually reconstructing the target elements in the presentation file based on the structured rendering description data to generate page elements in the target format includes: When the target element in the presentation file is a graphic element, the original path data and target rendering size of the graphic are extracted from the structured rendering description data, the bounding box of the original path data is calculated, and the scaling ratio is calculated based on the target rendering size. The coordinate points, control points, and arc parameters in the original path data are transformed to pixel coordinate space based on the scaling ratio to generate transformed path data, and vector graphic labels containing the transformed path data are constructed. The fill type of the graphic element is obtained from the structured rendering description data, and a corresponding fill definition is generated based on the fill type; Assign the reference address of the fill definition to the fill attribute of the vector graphic tag to generate a page element in the target format containing the vector graphic tag.

7. The method as described in claim 6, characterized in that, The steps for generating the corresponding fill definition based on the fill type include: When the fill type is solid color fill, extract the color value and transparency parameter, and generate a solid color fill definition based on the color value and transparency parameter; When the fill type is gradient fill, extract the gradient attribute, create a gradient element in the vector graphics definition tag, and generate a gradient fill definition; When the fill type is pattern fill, extract the pattern attributes, create a pattern element in the vector graphics definition tag, and generate a pattern fill definition. When the fill type is image fill, the indentation parameters of the fill rectangle definition and the clipping parameters of the clipping rectangle definition are parsed, and a dual coordinate transformation calculation is performed to generate the image fill definition.

8. A webpage restoration device for image objects in a presentation, characterized in that, The device includes: The parsing module is used to parse the presentation file and extract the structured rendering description data from the page. The structured rendering description data includes the geometric attributes, resource references and visual embellishment parameters of each element in the presentation file. The restoration module is used to visually restore the target elements in the presentation file based on the structured rendering description data, and generate page elements in the target format; The assembly module is used to assemble page elements of the target format according to their hierarchical relationship and display the assembled page elements of the target format on the web page.

9. A webpage rendering device for image objects in a presentation, characterized in that, The device includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the webpage restoration method for image objects in a presentation as claimed in any one of claims 1 to 7.

10. A storage medium, characterized in that, The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, it implements the steps of the webpage restoration method for image objects in a presentation as described in any one of claims 1 to 7.

Images