Vector icon processing method and device, equipment and storage medium

Abstract

The present disclosure provides a vector icon processing method and device in a webpage, equipment and a storage medium, relates to the technical field of image processing, in particular to the technical field of information flow, big data and the like, and can be applied to scenes such as an industrial vision platform. The specific implementation scheme is: in the case that a target icon of a webpage has an interactive function, drawing data of the target icon is acquired; in the case that the drawing data is an SVG icon, a description language of the SVG icon is converted into a description language of a Canvas icon; and the target icon is drawn in the Canvas of the webpage based on the description language of the Canvas icon. In the embodiment of the present disclosure, the Canvas icon does not need to generate an SVG node, and will not mix XML structures in the webpage, so that it is not necessary to create an XML structure or generate a DOM element, and the performance bottleneck caused by multi-layer parsing can be avoided. In addition, by converting the SVG icon into the Canvas icon, the information security of the SVG icon can also be protected.

Description

Technical Field

[0001] This disclosure relates to the field of image processing technology, and in particular to the fields of information flow and big data, and can be applied to scenarios such as industrial vision platforms. Background Technology

[0002] With the widespread adoption of responsive design, SVG (Scalable Vector Graphics) icons are commonly used on web pages. The vector nature of SVG icons makes them unaffected by device screen resolution, performing well across different platforms and media devices, and has long been the preferred choice for rendering vector icons on the web.

[0003] However, for large-scale web products, there are often many page modules. If there are a large number of SVG icons in a module, rendering these SVG icons will be very time-consuming. Summary of the Invention

[0004] This disclosure provides a method, apparatus, device, and storage medium for processing vector icons.

[0005] According to one aspect of this disclosure, a method for processing vector icons is provided, comprising:

[0006] Obtain the drawing data of the target icon;

[0007] When the drawing data is in the form of SVG icons, the description language of the SVG icons is converted to the description language of the Canvas icons.

[0008] Based on the description language of Canvas icons, draw the target icon in the Canvas tag of the webpage.

[0009] According to another aspect of this disclosure, a vector icon processing apparatus is provided, comprising:

[0010] The drawing data acquisition module is used to acquire the drawing data of the target icon;

[0011] The conversion module is used to convert the description language of SVG icons into the description language of Canvas icons when the drawing data is in the form of SVG icons.

[0012] The first drawing module is used to draw the target icon in the Canvas tag of the webpage based on the description language of Canvas icons.

[0013] According to another aspect of this disclosure, an electronic device is provided, comprising:

[0014] At least one processor; and

[0015] The memory is communicatively connected to the at least one processor; wherein,

[0016] The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the methods of any embodiment of the present disclosure.

[0017] According to another aspect of this disclosure, a non-transitory computer-readable storage medium is provided storing computer instructions, wherein the computer instructions are used to cause the computer to perform a method according to any embodiment of this disclosure.

[0018] According to another aspect of this disclosure, a computer program product is provided, including a computer program that, when executed by a processor, implements a method according to any embodiment of this disclosure.

[0019] In this embodiment, SVG icons are converted to Canvas icons, and vector SVG icons are displayed based on Canvas icons. Compared to SVG icons, Canvas icons can reduce page size and improve rendering speed. They also prevent SVG icons from being scraped through source code, thus improving the information security of SVG icons.

[0020] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0021] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0022] Figure 1A This is a flowchart illustrating a method for processing vector icons according to an embodiment of the present disclosure;

[0023] Figure 1B This is a schematic diagram illustrating the description language of escaping an XML object into a Canvas icon according to an embodiment of this disclosure;

[0024] Figure 2 This is a coordinate diagram of a Canvas tag according to another embodiment of the present disclosure;

[0025] Figure 3 This is a flowchart illustrating a method for processing vector icons according to another embodiment of the present disclosure;

[0026] Figure 4 This is a schematic diagram of a method for drawing a Rect icon according to another embodiment of the present disclosure;

[0027] Figure 5This is a schematic diagram illustrating the use of a Canvas icon object based on a factory pattern according to another embodiment of this disclosure;

[0028] Figure 6 This is a schematic diagram illustrating the use of a Canvas icon object in a component-based pattern according to another embodiment of this disclosure;

[0029] Figure 7 This is a flowchart illustrating the rendering of vector icons in the absence of interactive requirements according to another embodiment of the present disclosure.

[0030] Figure 8 This is a flowchart illustrating the determination of the position information of a sub-icon in a vector icon within a Canvas, according to another embodiment of this disclosure;

[0031] Figure 9 This is a schematic diagram illustrating the conversion of an SVG icon into a Canvas icon and its storage in the Canvas's storage space according to another embodiment of this disclosure;

[0032] Figure 10 This is another schematic flowchart of a vector icon processing method provided according to another embodiment of the present disclosure;

[0033] Figure 11 This is a schematic diagram of the structure of a vector icon processing apparatus according to another embodiment of the present disclosure;

[0034] Figure 12 This is a block diagram of an electronic device used to implement the vector icon processing method of the embodiments of this disclosure. Detailed Implementation

[0035] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0036] SVG is an XML (Extensible Markup Language)-based language used to describe two-dimensional vector graphics, vector points, and raster graphics. It's a completely new vector graphics standard. Similar to using HTML (HyperText Markup Language) tags and styles to define DIVs (layers), SVG uses XML to define graphics. Each layer of SVG is essentially a DOM (Document Object Model) element. DOM elements are also rendered as vector graphics in the browser. The margins of each DOM element need to be processed individually; the browser needs to convert them all to pixels before outputting them to the screen, resulting in a massive amount of computation.

[0037] Currently, the use of vector icons on web pages commonly employs icon-fonts technology and the Snap.svg.js utility library. While icon-fonts and Snap.svg.js address the challenges of using vector icons on the web, they also present some problems and shortcomings.

[0038] The icon-fonts technology uses font tools to convert all SVG icons into a single font file. However, character encoding conflicts may occur, leading to incorrect icon display. Furthermore, icons rendered with icon-fonts have a limited color palette, only displaying solid colors, which severely restricts icon design. Therefore, icons rendered with icon-fonts cannot have their node styles manipulated, nor can animations be set for nodes, resulting in inflexible operation.

[0039] The Snap.svg.js library draws and manipulates SVG nodes through a wrapped JavaScript API (Application Programming Interface). While it addresses issues inherent in icon-fonts, using Snap.svg.js requires additional JavaScript files, increasing code size and slowing down project packaging. Furthermore, its reliance on CDN (Content Delivery Network) for icon data increases client-side communication requests, prolonging initial page load time. This method still generates SVG nodes within the page, incorporating SVG XML structures into the HTML, increasing page size and reducing readability. Moreover, generating numerous SVG nodes requires creating a large number of XML structures and DOM elements. The browser must calculate the rendering result for each element based on the DOM context and BOM (Byte Order Mark) dimensions, resulting in multiple layers of parsing and creating a performance bottleneck.

[0040] In view of this, this disclosure proposes a method for processing vector icons. This method converts SVG icons into Canvas icons for rendering. For example... Figure 1A As shown, it includes the following:

[0041] S101, Obtain the drawing data of the target icon.

[0042] S102, when the drawing data is an SVG icon, convert the description language of the SVG icon to the description language of the Canvas icon.

[0043] SVG icons use XML to describe 2D graphics and drawing programs. Generally, the SVG icon code can be converted to a string, spaces removed, and then the `canvg("CanvasId","svgHTML")` method in `canvg.js` can be used to convert the string to the description language of the Canvas icon. Here, the parameter "CanvasId" is the Canvas container of the page (or can be dynamically generated), and "svgHTML" is the string representing the SVG icon. This allows for the conversion from the XML description language of SVG to the description language of the Canvas icon.

[0044] JavaScript can control the Canvas tag to display the corresponding icons. Therefore, SVG icons can be converted from XML to JavaScript to describe the style of the target icon. This style includes, for example, the line shape and fill style of the target icon.

[0045] S103 is a description language based on Canvas icons, used to draw target icons in the Canvas tag of a webpage.

[0046] Canvas icons allow for flexible control over target icons. For example, you can set the values ​​of properties such as lineWidth, fillStyle, and strokeStyle to modify the border width, fill style, and border style of the target icon.

[0047] In summary, in this embodiment, SVG icons are converted to Canvas icons using the Canvas tag for rendering. Compared to icon-fonts technology, Canvas does not require converting the target icon to a font, thus avoiding character encoding conflicts and ensuring normal icon display. Furthermore, Canvas offers flexible control over icon display styles, allowing for the display of not only solid-color icons but also icons with richer colors and the addition of animation features, making Canvas icons more versatile. Compared to the Snap.svg.js library, Canvas icons use JavaScript, eliminating the need for additional JavaScript files like SVG. Therefore, converting SVG icons to Canvas icons reduces code size and improves project packaging speed. Additionally, Canvas icons store the drawing data in memory, eliminating the need to access CDN paths via communication requests to obtain icon data, thus improving first-screen loading time. Canvas icons do not generate SVG nodes and do not incorporate XML structures into the webpage, thus avoiding the performance bottlenecks caused by multi-layered parsing. Furthermore, the source code of SVG icons is exposed on the page, which poses a challenge to information security. However, by converting SVG icons to Canvas icons, the important data of the Canvas icon is kept in the Canvas icon's storage space, and the content displayed externally is not readable, nor can the icon data be directly obtained. Therefore, converting SVG icons to Canvas icons can protect the information security of SVG icons.

[0048] Understandably, when there are a large number of SVG icons, Canvas technology can be used to greatly improve the page's display performance and enhance the user experience.

[0049] In some embodiments, step S101 can be implemented as acquiring the drawing data of the target icon when the target icon has interactive functionality, so as to convert the SVG icon into a Canvas icon based on the drawing data. Thus, when interactive functionality is required, flexible operations based on the Canvas can be used to support the interactive functionality of the icon.

[0050] The interactive target icons are not only displayed in the user interface but also constitute an indispensable part of the user interaction. Based on these interactive features, the target icons can respond to user actions and provide feedback. For example, when the focus is on the target icon, pre-configured effects such as zooming or animation can be displayed. Another example is that clicking the target icon can navigate to a different page. Of course, specific interactive functions can be configured according to business needs, and this disclosure does not limit this.

[0051] This disclosure, based on Canvas, not only provides a solution for SVG icons with interactive requirements, but also addresses a series of problems arising from the current processing of large numbers of vector icons on web pages by providing a complete solution for generating, rendering, and manipulating vector icons based on Canvas. Combining the previously described solutions for existing SVG icons, it provides effective vector icon rendering solutions for three scenarios, including:

[0052] Scenario (1): In the absence of SVG icons, develop Canvas icons based on the API in Canvas;

[0053] Scenario (2), such as Figure 1A As shown, given an existing SVG icon, it can be converted into a Canvas icon, and the Canvas icon style can be manipulated, and complex animations can be added to the icon;

[0054] In scenario (3), without interactive requirements, it supports quickly converting a large number of existing SVG icons into Canvas icons and displaying them in the browser.

[0055] The following section will provide further explanation of the specific implementation in different scenarios.

[0056] 1) Language conversion in scenarios with SVG icons

[0057] In some implementations, converting the description language of SVG icons to the description language of Canvas icons can be done as follows:

[0058] Step A1: Obtain the XML object from the SVG icon.

[0059] Step A2: Convert the XML object into an AST (Abstract Syntax Tree) object.

[0060] Step A3: Generate a description language for the Canvas icon based on the AST object.

[0061] For ease of understanding, combined with Figure 1B Please provide an explanation. For example... Figure 1B The diagram illustrates the process of converting an XML object into a Canvas icon description language in an embodiment of this disclosure. Specifically, when an SVG icon already exists and has style transformation capabilities (including user interaction or animation effects based on user actions), the conversion process requires transforming each vector graphic in the SVG icon into a vector graphic drawn using the Canvas drawing API, ultimately synthesizing the corresponding Canvas icon.

[0062] First, the SVG file needs to be obtained and parsed to extract its XML object. Then, lexical analysis is performed on the XML object to convert it into an AST object. The AST object is then traversed, and its structure is modified according to the requirements of the Canvas icon's description language. Finally, the modified AST structure is used to generate a corresponding JavaScript string. This JavaScript string is then executed to draw and generate the Canvas icon. During rendering, the generated icon can be added to the page for rendering.

[0063] In this embodiment of the disclosure, in a scenario where SVG icons already exist and have interactive functions, the Extensible Markup Language (Extreme Markup Language) object of the SVG icon is converted into an Abstract Syntax Tree (ABS) object, and then a description language for the Canvas icon is generated based on the ABS ABS object. This realizes the conversion from the description language of the SVG icon to the description language of the Canvas icon, providing data support for displaying SVG icons based on Canvas icons.

[0064] 2) Solutions for no SVG icons

[0065] In this embodiment of the disclosure, when there is no SVG icon, the user can configure the drawing requirements. For example, there may be an original vector graphic drawn using vector graphics drawing software, such as InDesign. With the original vector graphic available, the drawing requirements can be obtained by parsing the original vector graphic.

[0066] Therefore, even without an SVG icon, the target icon can be drawn in the Canvas tag of the webpage based on the drawing requirements, provided that the drawing data is for the target icon.

[0067] For example, the drawing path and display style required by the Canvas tag can be generated according to the drawing requirements; then, the target icon is drawn in the Canvas tag based on the drawing path and display style.

[0068] When drawing the target icon, the display style can include not only static visual effects but also dynamic visual effects. Therefore, animation effects can be added according to interactive requirements, which may include the following steps:

[0069] Step B1 determines the target icon's position information on the page, including its X-axis and Y-axis coordinates. In the Canvas tag, the origin (0, 0) is located at the top-left corner of the Canvas area. For example... Figure 2 As shown, the top left corner of the Canvas label is the reference point for the position of the target icon in the Canvas canvas.

[0070] Step B2: Set the start and end coordinates of the target icon. In practice, use the `moveTo` and `lineTo` methods of the Canvas tag context object to set the start and end coordinates, respectively. Then, use the `stroke` method to draw the target icon, such as a five-pointed star, on the Canvas tag's drawing area.

[0071] Step B3 involves modifying the border width, fill style, and border style of the target icon by setting the values ​​of its lineWidth, fillStyle, and strokeStyle properties.

[0072] Step B4 involves using the Canvas tag vector transformation API to add customized animation effects to the target icon based on the drawing requirements. For example, APIs such as rotate, scale, translate, and transform can be used to add effects such as rotation, scaling, translation, and transformation.

[0073] Therefore, in this embodiment, a corresponding Canvas icon can be generated and rendered based on drawing requirements even when an SVG icon is unavailable. This allows for flexible drawing of target icons to meet different drawing needs, facilitating the rendering of vector icons.

[0074] Furthermore, in some embodiments, the drawing requirement can be based not only on the drawing data parsed from the original vector graphic, but also on a pre-drawn set of controllable icons. The drawing requirement specifies which icon object in the icon set should be used to draw the target icon. This method is described in detail in the Canvas icon set section.

[0075] 3) Provide a collection of Canvas icons to improve drawing efficiency.

[0076] likeFigure 3 As shown, it includes the following:

[0077] S301, determine the icon object that matches the drawing requirements from the Canvas icon set; the icon object includes multiple elements with customizable display styles.

[0078] In practice, the icon set can be implemented using the factory pattern or components.

[0079] When using the factory pattern, you can first create a `CanvasIcon` class to integrate the Canvas icons used in the project. Each icon is initialized using a static method, exposing the initialized instance of the icon, thus allowing users to easily extend the functionality of the icons, such as adding animations or changing colors. An example of this usage is as follows... Figure 4 As shown. You can first define a collection of icon classes for the Canvas, which includes various icon drawing methods. Figure 4 The document demonstrates the drawing methods for the Rect icon. It defines the rectangle drawing path (beginPath), fill style (fillStyle), border width (strokeWidth), and border style (strokeStyle).

[0080] also, Figure 4 The document also demonstrates how to use `Rect`, which allows you to draw `Rect` using the predefined methods. Furthermore, icon objects in the target collection can expose user-defined extended functionalities, such as animation effects and reassigning drawing styles to change icon styles. This allows users to flexibly use the factory pattern to call existing icon objects and make appropriate modifications as needed.

[0081] In addition to the factory pattern, this embodiment also supports implementing icon collections using a component library. For example, when developing projects using React or Vue frameworks, a Canvas icon component library can be encapsulated. The corresponding Canvas icons can be imported and exported using ES6 import and export methods. One possible usage example is as follows... Figure 5 As shown: You can define and export a Canvas icon component library. When using it, as... Figure 5 As shown, you can use the import function to export the required Canvas icon from the Canvas icon component library and then draw it.

[0082] Similarly, like the factory pattern, the Canvas icon component library can expose some instances, allowing users to modify the icon display effect according to their needs.

[0083] S302, determine the identifier of the element to be adjusted and the target display style of the element to be adjusted from the drawing requirements.

[0084] In practice, each icon object in the icon set can be broken down into multiple elements, for example... Figure 6 As shown in part (a) of the diagram, the panda icon can be broken down into independent and controllable eye elements, nose elements, and face elements.

[0085] The separated, controllable elements allow users to customize their appearance. For example, a red decoration can be added to the nose element. Figure 6 As shown in section (b) of the image, a round nose decoration can be added to the panda's nose. Blush can also be added to the panda using independently controlled facial elements.

[0086] S303, within the Canvas tag, renders the element to be adjusted from among multiple elements according to the target display style, and renders the elements other than the element to be adjusted from among multiple elements according to the default style of the icon object.

[0087] like Figure 6 As shown in section (b), assuming the nose and face elements are the elements to be adjusted, the other elements such as the eyes, ears, and the heart next to them have no change in their default styles relative to the panda icon.

[0088] It should be understood that when an icon object includes multiple elements, one element can be flexibly customized, or multiple elements can be flexibly customized. New display effects (such as adding a nose decoration) can be added by developing corresponding methods when there is a drawing requirement, and the drawing methods can be saved for later use. Alternatively, the corresponding methods can be called from the method library.

[0089] Therefore, in this embodiment of the disclosure, the target icon can be rendered quickly and flexibly through the Canvas icon set and adjustable elements. Furthermore, the identifiers of each element in the Canvas icon set are private identifiers, making it impossible to obtain the original drawing data of the Canvas icon from the page. This protects the user's Canvas icon and improves the information security of the Canvas icon.

[0090] 4) Implementing rapid drawing based on Canvas icons in scenarios without interactive functions

[0091] In this scenario, it can be implemented as follows: Figure 7 The method shown includes:

[0092] S71: Obtain the image of the target icon when the target icon does not require interactive functionality.

[0093] When the target icon is an existing icon from an icon library website, a large number of icons need to be rendered quickly for user browsing. If many icons are SVG icons, and other users are not allowed to directly copy the SVG's XML source code information, all existing SVG icons from the icon library website can be converted into image objects, thus obtaining the image of the target icon. A thumbnail of the image can be displayed on the webpage, while the original image data is stored in the Canvas tag's storage space. This storage space cannot be accessed through XML source code information, thus protecting the original image.

[0094] S72, a web-based Canvas tag, draws the image of the target icon.

[0095] This allows rendering the target icon image onto a webpage's Canvas. For example, calling the Canvas drawing API `drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)` draws the target icon image object onto the Canvas tag according to the calculated coordinates, dimensions, and other information. The meanings of the parameters are as follows:

[0096] image: image is the image source for drawing on the canvas. Elements drawn onto the canvas can be a series of elements with images, such as CanvasElement, imageElement, svgImageElement, videoElement, etc.

[0097] sx: Draws the x-coordinate position of the image source to be cropped;

[0098] sy: Draws the y-coordinate position of the image source to be cropped;

[0099] sWidth: Draws the width of the cropped image source;

[0100] sHeight: Draws the height of the cropped image source;

[0101] dx: The x-coordinate of the top-left corner of the target source drawn on the Canvas;

[0102] dy: The y-coordinate of the top-left corner of the target source drawn on the Canvas;

[0103] dWidth: The width of the target source drawn on the Canvas, which will be automatically scaled based on the width of the image source.

[0104] dWidth: The height of the target source drawn on the Canvas. It will be automatically scaled based on the height of the image source.

[0105] In this embodiment, by converting the target icon into a static image and rendering the static image onto the webpage's Canvas, a large number of icons can be rendered quickly using the Canvas. Furthermore, displaying the image via Canvas prevents the target icon from being exposed in the page source code, thereby protecting the target icon and improving its information security.

[0106] In some implementations, converting SVG icons into images can be done as follows: Figure 7 As shown, it includes:

[0107] S711, when the target icon includes multiple sub-icons, obtain the SVG icon of the multiple sub-icons.

[0108] In this context, "target icon" refers to the collective term for the numerous icons that need to be rendered on a webpage. Therefore, any SVG icon on a webpage is considered a sub-icon.

[0109] S712 serializes SVG icons with multiple sub-icons into binary objects.

[0110] Among them, binary objects, such as blob objects, can facilitate the generation of images of multiple sub-icons in S713 based on the data in the binary object.

[0111] In this embodiment, by converting SVG icons into binary objects, a data foundation is provided for generating target icons in image format. This allows for convenient and flexible conversion of SVG icons into image format and rendering of images based on Canvas. Consequently, the rendering method of SVG icons is transformed into image rendering based on Canvas, overcoming the shortcomings of SVG icon rendering. Furthermore, since Canvas image rendering is faster, it also improves the rendering speed of a large number of icons.

[0112] In this embodiment of the disclosure, the image rendered and converted based on the Canvas tag in a webpage can be implemented as follows: Figure 7 As shown, it includes the following steps:

[0113] S721, when the target icon includes multiple sub-icons, store the images of the multiple sub-icons in the storage space of the Canvas tag of the webpage.

[0114] For example, if you need to display a large number of icons representing different animals, you can store images of these animals in the Canvas's storage space for later use. For instance, you can convert SVG icons for pandas, elephants, and giraffes into images and store them in the Canvas tag's storage space for later use.

[0115] In order to facilitate flexible control over the display of each image at a specified location on the webpage, in this embodiment of the disclosure, it is not only necessary to store the image in the storage space of the Canvas tag, but also to determine the position information of multiple sub-icons in the storage space of the Canvas tag in S722.

[0116] Therefore, regardless of how many images are stored in the Canvas tag's storage space, a correspondence between each SVG icon and each image in the Canvas tag's storage space can be established. During display, the display position of different icons on the webpage can be flexibly controlled according to requirements.

[0117] S723, when rendering multiple child icons in a webpage, reads the image of the icon to be rendered from the storage space of the Canvas tag based on the position information of the icon to be rendered.

[0118] That is, when it is necessary to render an icon, such as a panda, the panda's image data can be located and read from the storage space of the Canvas tag, and then in S724, the image of the icon to be rendered is rendered at the display position of the icon to be rendered on the webpage.

[0119] For example, if you need to display the panda icon in the top left corner of a webpage, you can read the image from the Canvas tag's storage space and render it in the top left corner. Similarly, if you need to display the panda icon in the center of the webpage, you can read the image from the Canvas tag's storage space and render it in the center. This allows for flexible icon display.

[0120] In summary, by recording the location information of each image within the Canvas tag's storage space, the required image can be easily and accurately retrieved and displayed in the appropriate position. This allows for flexible control over the icon's display position.

[0121] In other embodiments, to conserve storage resources, in the case of a large number of images, these images can be drawn based on a single Canvas tag, thereby avoiding the resource waste caused by creating multiple Canvases in the webpage. For example... Figure 8 As shown, determining the position information of multiple sub-icons in the storage space of the Canvas tag can be implemented as follows:

[0122] S801, retrieves an SVG icon with multiple sub-icons.

[0123] S802, obtains the size information of multiple sub-icons from the SVG icon of multiple sub-icons.

[0124] For example, by reading the dimensions of each SVG icon, including its length and width, it can be determined that when all SVG icons are displayed on the same Canvas tag, each SVG icon can fully display the required canvas size. Therefore, in S803, storage space for a Canvas tag capable of accommodating multiple sub-icons can be created based on the size information of these sub-icons.

[0125] S804 stores multiple sub-icons into the storage space of the Canvas tag based on the size information of the multiple sub-icons.

[0126] During implementation, the display order of each SVG icon on the canvas can be defined according to requirements, and the images of each SVG icon can be stored in the storage space of the Canvas tag in sequence based on the display order.

[0127] S805 records the position information of multiple sub-icons in the storage space of the Canvas tag.

[0128] For example, a correspondence can be established between the identifiers and location information of SVG icons, and the location information of each SVG icon can be clearly recorded through this correspondence.

[0129] In this embodiment, multiple sub-icons can be stored using the same Canvas tag. This avoids the resource consumption of creating multiple Canvas tags, saving resources while still meeting the drawing requirements for icon images based on Canvas tags.

[0130] In summary, the process of converting SVG icons into icons and storing them in the Canvas tag's storage space is as follows: Figure 9As shown. First, the SVG API, AVG.getBoundingClientRect, is used to obtain the size of each SVG icon. Multiple SVG icons are iterated through sequentially to obtain the number of SVG icons, and the horizontal and vertical coordinates of each SVG icon on the Canvas are calculated. Then, an XML serialization instance is created, and the XML Serializer.serializeToString method is used to obtain the XML serialized subtree of multiple SVG icons. Finally, a blob (binary large object) is used to obtain multiple SVG icons in binary format, i.e., binary objects. Finally, the binary object is converted into a base64 (64-bit) image, ultimately generating the image objects for each of the multiple SVG icons. Then, the image objects are stored in the storage space of the Canvas tag according to the calculated horizontal and vertical coordinates, and the position information of each SVG icon in the Canvas tag's storage space is recorded. In this embodiment, only the horizontal and vertical coordinates stored on the Canvas tag are recorded. During drawing, the Canvas drawing API drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) is called to draw the Image object onto the Canvas tag according to the calculated coordinates, size, and other information.

[0131] In some embodiments, in order to flexibly control the display of images of different icons in their respective positions, rendering the image of the icon to be rendered at the display position of the icon to be rendered on the webpage in this embodiment of the disclosure can be implemented as follows:

[0132] Step C1: Create a layer object at the display location of the icon to be rendered on the webpage.

[0133] Since the icons to be rendered on the webpage reside within layer objects, and any portion of the icon extending beyond the layer object is clipped, a Canvas tag can be used as a background image within the layer object. The portion extending beyond the layer object is not displayed. Therefore, if there are multiple icons to be rendered, only one Canvas tag is needed to display them. Furthermore, the position of each icon within the Canvas tag can be adjusted based on the layer object.

[0134] Step C2: Render the image of the icon to be rendered in the layer object.

[0135] In this embodiment of the disclosure, the rendering of the image of the icon to be rendered is realized by creating a layer object. Only the drawing of the icon to be rendered in a Canvas tag needs to be implemented, instead of redrawing the icon to be rendered every time a different icon is obtained, which improves the drawing efficiency of the icon to be rendered.

[0136] In summary, this disclosure provides solutions for displaying target images flexibly and efficiently, addressing different application requirements of the target images. To facilitate a systematic understanding of the example icon processing method in the network element provided in this disclosure, combined with... Figure 10 This will be explained as shown below.

[0137] like Figure 10 As shown, for web-based projects, the project needs to be initialized first. If the project requires vector icons, it checks if SVG icons already exist. If no SVG icons exist, it uses the HTML5 Canvas tag drawing API to draw the Canvas icon, ultimately generating and rendering the Canvas icon.

[0138] If an SVG icon exists, determine whether to add animation effects or modify its style. If not, initialize the Canvas tag according to business requirements, calculate the SVG coordinates, dimensions, and other information using the SVG icon's XML object, then use a blob to generate an image object for the SVG icon; finally, draw this image object onto the Canvas tag to generate and render the Canvas icon. If animation effects or style modifications are needed, first parse the SVG's XML structure, then use AST lexical analysis to modify the XML structure and generate JavaScript code; then execute this JavaScript code to draw a Canvas icon instance; next, obtain the vector graphics instances in the icon that need style modifications and animations, and finally use APIs such as transform in the Canvas tag to implement the graphic style modification and animation effects.

[0139] Based on the same technical concept, this disclosure also provides a vector icon processing device, such as... Figure 11 As shown, it includes:

[0140] The drawing data acquisition module is used to acquire the drawing data of the target icon;

[0141] The conversion module is used to convert the description language of SVG icons into the description language of Canvas icons when the drawing data is in the form of SVG icons.

[0142] The first drawing module is used to draw the target icon in the Canvas tag of the webpage based on the description language of Canvas icons.

[0143] In some embodiments, the drawing data acquisition module is specifically used to: acquire the drawing data of the target icon when the target icon has interactive functionality.

[0144] In some embodiments, the vector icon processing apparatus further includes:

[0145] The second drawing module is used to draw the target icon in the Canvas tag of the webpage based on the drawing requirements, when the drawing data is the target icon.

[0146] In some embodiments, the vector icon processing device in a webpage further includes:

[0147] The third drawing module is used to obtain the image of the target icon when the target icon does not require interactive functionality; it then draws the image of the target icon based on the Canvas tag of the webpage.

[0148] In some embodiments, the third drawing module performs the action of obtaining an image of the target icon, specifically including:

[0149] If the target icon includes multiple sub-icons, obtain the SVG icon of the multiple sub-icons;

[0150] Serialize an SVG icon with multiple sub-icons into a binary object;

[0151] Generate images of multiple sub-icons based on binary objects containing multiple sub-icons.

[0152] In some embodiments, the third drawing module executes a webpage-based Canvas tag to draw an image of the target icon, specifically including:

[0153] If the target icon includes multiple sub-icons, store the images of the multiple sub-icons in the storage space of the Canvas tag of the webpage;

[0154] Determine the position information of multiple child icons in the storage space of the Canvas tag;

[0155] When rendering multiple child icons on a webpage, the image of the icon to be rendered is read from the storage space of the Canvas tag based on the position information of the icon to be rendered.

[0156] Render the image of the icon to be rendered at the display location of the icon on the webpage.

[0157] In some embodiments, the third drawing module performs the task of determining the position information of multiple sub-icons in the storage space of the Canvas tag, specifically including:

[0158] Get the SVG icon with multiple sub-icons;

[0159] Get the size information of multiple sub-icons from an SVG icon with multiple sub-icons;

[0160] Create storage space for a Canvas tag that can accommodate multiple child icons based on the size information of the child icons;

[0161] Based on the size information of multiple sub-icons, store the multiple sub-icons into the storage space of the Canvas tag;

[0162] Record the position information of multiple sub-icons in the storage space of the Canvas tag.

[0163] In some embodiments, the third drawing module renders an image of the icon to be rendered at the display position of the icon on the webpage, specifically including:

[0164] Create a layer object at the location where the icon to be rendered will be displayed on the webpage;

[0165] Render the image of the icon to be rendered in the layer object.

[0166] In some embodiments, the conversion module performs a conversion of the description language of the SVG icon into the description language of the Canvas icon, specifically including:

[0167] Obtain the Extensible Markup Language object from the SVG icon;

[0168] Convert an Extensible Markup Language object into an Abstract Syntax Tree object;

[0169] A description language for generating Canvas icons based on abstract syntax tree objects.

[0170] In some embodiments, the second drawing module performs drawing of the target icon in the Canvas tag of the webpage based on drawing requirements, specifically including:

[0171] Identify the icon object that matches the drawing requirements from the Canvas icon collection; the icon object includes multiple elements with customizable display styles;

[0172] Determine the identifiers of the elements to be adjusted and their target display styles from the drawing requirements;

[0173] Within the Canvas tag, the element to be adjusted among multiple elements is rendered according to the target display style, while the elements other than the element to be adjusted among multiple elements are rendered according to the default style of the icon object.

[0174] The specific functions and examples of each module and submodule of the apparatus in this disclosure can be found in the relevant descriptions of the corresponding steps in the above method embodiments, and will not be repeated here.

[0175] The acquisition, storage, and application of user personal information involved in the technical solution disclosed herein comply with the provisions of relevant laws and regulations and do not violate public order and good morals.

[0176] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0177] Figure 12 A schematic block diagram of an example electronic device 1200 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital assistants, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0178] like Figure 12 As shown, device 1200 includes a computing unit 1201, which can perform various appropriate actions and processes according to a computer program stored in read-only memory (ROM) 1202 or a computer program loaded from storage unit 1208 into random access memory (RAM) 1203. The RAM 1203 may also store various programs and data required for the operation of device 1200. The computing unit 1201, ROM 1202, and RAM 1203 are interconnected via bus 1204. Input / output (I / O) interface 1205 is also connected to bus 1204.

[0179] Multiple components in device 1200 are connected to I / O interface 1205, including: input unit 1206, such as keyboard, mouse, etc.; output unit 1207, such as various types of monitors, speakers, etc.; storage unit 1208, such as disk, optical disk, etc.; and communication unit 1209, such as network card, modem, wireless transceiver, etc. Communication unit 1209 allows device 1200 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0180] The computing unit 1201 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 1201 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 1201 performs the various methods and processes described above, such as the vector icon processing method. For example, in some embodiments, the vector icon processing method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 1208. In some embodiments, part or all of the computer program may be loaded and / or installed on device 1200 via ROM 1202 and / or communication unit 1209. When the computer program is loaded into RAM 1203 and executed by the computing unit 1201, one or more steps of the vector icon processing method described above may be performed. Alternatively, in other embodiments, the computing unit 1201 may be configured to perform vector icon processing methods by any other suitable means (e.g., by means of firmware).

[0181] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0182] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

[0183] In the context of this disclosure, a machine-readable medium can be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can be, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0184] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0185] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0186] Computer systems can include clients and servers. Clients and servers are generally located far apart and typically interact via communication networks. Client-server relationships are created by computer programs running on the respective computers and having a client-server relationship with each other. Servers can be cloud servers, servers in distributed systems, or servers incorporating blockchain technology.

[0187] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution disclosed in this disclosure can be achieved, and this is not limited herein.

[0188] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for processing vector icons, comprising: Obtain the drawing data of the target icon; In the case where the drawing data is a scalable vector graphics SVG icon, the description language of the SVG icon is converted into the description language of the canvas icon; Based on the description language of the Canvas icon, the target icon is drawn in the Canvas tag of the webpage; Also includes: If the target icon does not require interactive functionality, obtain an image of the target icon; Drawing an image of the target icon based on the Canvas tag of the webpage includes: if the target icon includes multiple sub-icons, storing the images of the multiple sub-icons in the storage space of the Canvas tag of the webpage; Determine the position information of the multiple sub-icons in the storage space of the Canvas tag; When rendering the multiple sub-icons of the webpage, the image of the icon to be rendered is read from the storage space of the Canvas tag based on the position information of the icon to be rendered; The image of the icon to be rendered is rendered at the display position of the icon to be rendered on the webpage.

2. The method according to claim 1, wherein, Obtain the drawing data for the target icon, including: If the target icon has interactive functionality, obtain the drawing data of the target icon.

3. The method according to claim 1, further comprising: If the drawing data is the drawing requirement of the target icon, the target icon is drawn in the Canvas tag of the webpage based on the drawing requirement.

4. The method according to claim 1, wherein, Obtaining the image of the target icon includes: If the target icon includes multiple sub-icons, obtain the SVG icons of the multiple sub-icons; Serialize the SVG icons of the multiple sub-icons into binary objects; Based on the binary objects of the multiple sub-icons, generate images of the multiple sub-icons.

5. The method according to claim 4, wherein, Determining the position information of the multiple sub-icons in the storage space of the Canvas tag includes: Obtain the SVG icons of the multiple sub-icons; Obtain the size information of the multiple sub-icons from the SVG icons of the multiple sub-icons; Based on the size information of the multiple sub-icons, a storage space for a Canvas tag capable of accommodating the multiple sub-icons is created; Based on the size information of the multiple sub-icons, the multiple sub-icons are stored in the storage space of the Canvas tag; Record the position information of the multiple sub-icons in the storage space of the Canvas tag.

6. The method according to claim 4, wherein, Rendering an image of the icon to be rendered at the display location of the icon to be rendered on the webpage includes: Create a layer object at the display location of the icon to be rendered on the webpage; The image of the icon to be rendered is rendered in the layer object.

7. The method according to any one of claims 1-6, wherein, Converting the description language of the SVG icon to the description language of the Canvas icon includes: Obtain the Extensible Markup Language object from the SVG icon; Convert the Extensible Markup Language object into an Abstract Syntax Tree object; A description language for generating the Canvas icon based on the abstract syntax tree object.

8. The method according to claim 3, wherein, Based on the aforementioned drawing requirements, the target icon is drawn in the Canvas tag of the webpage, including: Determine an icon object from the Canvas icon set that matches the drawing requirements; the icon object includes multiple elements with customizable display styles; Determine the identifier of the element to be adjusted and the target display style of the element to be adjusted from the drawing requirements; Within the Canvas tag, the element to be adjusted is rendered according to the target display style, while the elements other than the element to be adjusted are rendered according to the default style of the icon object.

9. A vector icon processing device, comprising: The drawing data acquisition module is used to acquire the drawing data of the target icon; A conversion module is used to convert the description language of the SVG icon into the description language of the Canvas icon when the drawing data is a scalable vector graphics SVG icon; The first drawing module is used to draw the target icon in the Canvas tag of the webpage based on the description language of the Canvas icon; Also includes: The third drawing module is used to acquire an image of the target icon when the target icon does not require interactive functionality; and to draw the image of the target icon based on the Canvas tag of the webpage; specifically including: If the target icon includes multiple sub-icons, the images of the multiple sub-icons are stored in the storage space of the Canvas tag of the webpage; Determine the position information of the multiple sub-icons in the storage space of the Canvas tag; When rendering the multiple sub-icons of the webpage, the image of the icon to be rendered is read from the storage space of the Canvas tag based on the position information of the icon to be rendered; The image of the icon to be rendered is rendered at the display position of the icon to be rendered on the webpage.

10. The apparatus according to claim 9, wherein, The drawing data acquisition module is specifically used to: acquire the drawing data of the target icon when the target icon has interactive functions.

11. The apparatus according to claim 9, further comprising: The second drawing module is used to draw the target icon in the Canvas tag of the webpage based on the drawing requirements when the drawing data is the drawing requirements of the target icon.

12. The apparatus according to claim 9, wherein, The third drawing module performs the process of obtaining the image of the target icon, specifically including: If the target icon includes multiple sub-icons, obtain the SVG icons of the multiple sub-icons; Serialize the SVG icons of the multiple sub-icons into binary objects; Based on the binary objects of the multiple sub-icons, generate images of the multiple sub-icons.

13. The apparatus according to claim 12, wherein, The third drawing module determines the position information of the multiple sub-icons in the storage space of the Canvas tag, specifically including: Obtain the SVG icons of the multiple sub-icons; Obtain the size information of the multiple sub-icons from the SVG icons of the multiple sub-icons; Based on the size information of the multiple sub-icons, a storage space for a Canvas tag capable of accommodating the multiple sub-icons is created; Based on the size information of the multiple sub-icons, the multiple sub-icons are stored in the storage space of the Canvas tag; Record the position information of the multiple sub-icons in the storage space of the Canvas tag.

14. The apparatus according to claim 12, wherein, The third rendering module renders the image of the icon to be rendered at the display position of the icon to be rendered on the webpage, specifically including: Create a layer object at the display location of the icon to be rendered on the webpage; The image of the icon to be rendered is rendered in the layer object.

15. The apparatus according to any one of claims 9-14, wherein, The conversion module performs the conversion of the SVG icon's description language into the Canvas icon's description language, specifically including: Obtain the Extensible Markup Language object from the SVG icon; Convert the Extensible Markup Language object into an Abstract Syntax Tree object; A description language for generating the Canvas icon based on the abstract syntax tree object.

16. The apparatus according to claim 11, wherein, The second drawing module, based on the drawing requirements, draws the target icon in the Canvas tag of the webpage, specifically including: Determine an icon object from the Canvas icon set that matches the drawing requirements; the icon object includes multiple elements with customizable display styles; Determine the identifier of the element to be adjusted and the target display style of the element to be adjusted from the drawing requirements; In the Canvas tag, the element to be adjusted among the plurality of elements is rendered according to the target display style, and the elements other than the element to be adjusted among the plurality of elements are rendered according to the default style of the icon object.

17. An electronic device comprising: At least one processor; as well as A memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-8.

18. A non-transitory computer-readable storage medium storing computer instructions, wherein, The computer instructions are used to cause the computer to perform the method according to any one of claims 1-8.

19. A computer program product comprising a computer program that, when executed by a processor, implements the method according to any one of claims 1-8.

Images