Method of converting graphics format and related device

Abstract

The present disclosure provides a method for converting a graphic format and related devices. The method comprises: obtaining a graphic file having a first format, obtaining description information of a graphic from the graphic file; calculating a width and a height of the graphic based on the description information, creating a canvas having the width and the height; drawing the graphic on the canvas according to the description information; and converting the canvas with the graphic drawn thereon into a graphic file having a second format.

Description

TECHNICAL FIELD

[0001] The present disclosure relates to the technical field of computer, and particularly relates to a method for converting a graphic format and related equipment. BACKGROUND

[0002] With the development of computer technology, in the field of graphic processing, there is a graphic directly described by a program language. However, the graphic described by the program language may be incomplete due to data loss caused by a transmission process. SUMMARY

[0003] The present disclosure provides a method for converting a graphic format and related equipment to solve or partially solve the above problems.

[0004] In a first aspect, the present disclosure provides a method for converting a graphic format, comprising:

[0005] obtaining a graphic file having a first format, and obtaining description information of a graphic from the graphic file;

[0006] calculating a width and a height of the graphic based on the description information, and creating a canvas having the width and the height;

[0007] drawing the graphic on the canvas according to the description information; and

[0008] converting the canvas on which the graphic is drawn into a graphic file having a second format.

[0009] In a second aspect, the present disclosure provides an apparatus for converting a graphic format, comprising:

[0010] a calculating module configured to obtain a graphic file having a first format, and obtain description information of a graphic from the graphic file; and calculate a width and a height of the graphic based on the description information;

[0011] a drawing module configured to create a canvas having the width and the height; and draw the graphic on the canvas according to the description information; and

[0012] a converting module configured to convert the canvas on which the graphic is drawn into a graphic file having a second format.

[0013] In a third aspect, the present disclosure provides a computer device, comprising one or more processors, a memory, and one or more programs, wherein the one or more programs are stored in the memory and executed by the one or more processors, and the programs comprise instructions for executing the method according to the first aspect.

[0014] In a fourth aspect, the present disclosure provides a non-transitory computer-readable storage medium containing a computer program that, when executed by one or more processors, causes the processors to perform the method of the first aspect.

[0015] In a fifth aspect, the present disclosure provides a computer program product comprising computer program instructions that, when run on a computer, cause the computer to perform the method of the first aspect.

[0016] The method for converting a graphic format and the related device provided by the present disclosure obtain an actually drawn graphic according to description information of the graphic, and then convert the graphic format, so that the converted graphic will not have the problem of incomplete graphic display or blank edges caused by translation or incorrect setting of a starting drawing point in a graphic description text. BRIEF DESCRIPTION OF DRAWINGS

[0017] In order to more clearly illustrate the technical solutions in the present disclosure or the related art, the following will briefly introduce the drawings needed to be used in the embodiments or the related art description. Obviously, the drawings in the following description are only embodiments of the present disclosure, and for those skilled in the art, other drawings can also be obtained without creative labor based on these drawings.

[0018] Figure 1 A hardware structure schematic diagram of an exemplary computer device provided by the embodiments of the present disclosure is shown.

[0019] Figure 2A A schematic diagram of an exemplary target object according to the embodiments of the present disclosure is shown.

[0020] Figure 2B A schematic diagram of an exemplary graphic file according to the embodiments of the present disclosure is shown.

[0021] Figure 2C A schematic diagram of another exemplary graphic file according to the embodiments of the present disclosure is shown.

[0022] Figure 3A A schematic diagram of an exemplary image according to the embodiments of the present disclosure is shown.

[0023] Figure 3B A schematic diagram of another exemplary image according to the embodiments of the present disclosure is shown.

[0024] Figure 4 A schematic diagram of still another exemplary image according to the embodiments of the present disclosure is shown.

[0025] Figure 5 A flowchart schematic diagram of an exemplary method provided by the embodiments of the present disclosure is shown.

[0026] Figure 6 A schematic diagram of an example apparatus provided by embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0027] For the purposes of the present disclosure, technical solutions and advantages, the following will be further described in detail with specific embodiments and with reference to the accompanying drawings.

[0028] It should be noted that, unless otherwise defined, technical terms or scientific terms used in the embodiments of the present disclosure should be understood as their common meanings to those skilled in the art to which the present disclosure pertains. The terms "first", "second", and similar terms used in the embodiments of the present disclosure do not denote any order, quantity, or importance, but are only used to distinguish different components. The terms "include", "contain", and similar terms mean that the elements or objects before the terms encompass the elements or objects listed after the terms and their equivalents, and do not exclude other elements or objects. The terms "connect" or "connected" and similar terms do not mean only physical or mechanical connections, but can include electrical connections, whether direct or indirect. The terms "upper", "lower", "left", "right", and the like are only used to indicate relative positional relationships, and when the absolute positions of the described objects are changed, the relative positional relationships can also be changed accordingly.

[0029] Scalable Vector Graphics (SVG) is a vector image format and an open standard vector graphics language, which can be used to design high-resolution Web graphics pages and is usually applied in web pages as a Document Object Model (DOM) node.

[0030] Generally, SVG is a vector image format described by XML, and the browser renders the DOM node of the drawing according to the rules of XML description. The drawing process is affected by attributes such as viewBox and translate, so that the drawn image is displaced, resulting in a difference between the position of the actual displayed SVG graphic and the position defined by the SVG DOM node. In Web development, the position, size, and other styles of the DOM node are generally uniformly defined by Cascading Style Sheets (CSS), and it is usually desired that the graphic style described by SVG also comply with the CSS definition, which requires obtaining the actual graphic information of SVG (including the part of the finally displayed graphic).

[0031] In view of this, the method for converting the graphic format and the related device provided by the embodiments of the present disclosure obtain the actually drawn graphic according to the description information of the graphic, and then convert the graphic format, so that the converted graphic will not have the problem of incomplete graphic display or blank edges caused by translation or incorrect starting drawing point setting in the graphic description text.

[0032] Figure 1 A hardware structure schematic diagram of an exemplary computer device 100 provided by the embodiments of the present disclosure is shown. The computer device 100 can be used to implement the method for converting the graphic format of the embodiments of the present disclosure. As shown in the figure, the computer device 100 can include a processor 102, a memory 104, a network module 106, a peripheral interface 108, and a bus 110. Among them, the processor 102, the memory 104, the network module 106, and the peripheral interface 108 are connected to each other through the bus 110 for internal communication connection in the computer device 100. Figure 1

[0033] The processor 102 can be a central processing unit (CPU), an image processor, a neural network processor (NPU), a microcontroller (MCU), a programmable logic device, a digital signal processor (DSP), an application specific integrated circuit (ASIC), or one or more integrated circuits. The processor 102 can be used to perform functions related to the technologies described in the present disclosure. In some embodiments, the processor 102 can also include multiple processors integrated as a single logic component. For example, as shown in the figure, the processor 102 can include multiple processors 102a, 102b, and 102c. Figure 5

[0034] The memory 104 can be configured to store data (for example, instructions, computer code, etc.). As shown in the figure, the data stored by the memory 104 can include program instructions (for example, program instructions for implementing the method for converting the graphic format of the embodiments of the present disclosure) and data to be processed (for example, the memory can store configuration files of other modules, etc.). The processor 102 can also access the program instructions and data stored by the memory 104, and execute the program instructions to operate on the data to be processed. The memory 104 can include volatile storage devices or non-volatile storage devices. In some embodiments, the memory 104 can include random access memory (RAM), read only memory (ROM), optical discs, magnetic discs, hard discs, solid state hard discs (SSD), flash memory, memory sticks, etc. Figure 1

[0035] ​​​The network interface 106 can be configured to provide communication with other external devices to the computer device 100 via a network. The network can be any wired or wireless network capable of transmitting and receiving data. For example, the network can be a wired network, a local wireless network (e.g., Bluetooth, WiFi, near field communication (NFC), etc.), a cellular network, the Internet, or a combination thereof. It can be appreciated that the type of network is not limited to the specific examples described above.

[0036] The peripheral interface 108 can be configured to connect the computer device 100 with one or more peripheral devices to enable information input and output. For example, the peripheral devices can include input devices such as a keyboard, a mouse, a touchpad, a touch screen, a microphone, various sensors, and output devices such as a display, a speaker, a vibrator, an indicator light, and the like.

[0037] The bus 110 can be configured to transmit information between various components (e.g., the processor 102, the memory 104, the network interface 106, and the peripheral interface 108) of the computer device 100, such as an internal bus (e.g., a processor-memory bus), an external bus (a USB port, a PCI-E bus), and the like.

[0038] It should be noted that although the architecture of the computer device 100 described above only shows the processor 102, the memory 104, the network interface 106, the peripheral interface 108, and the bus 110, in actual implementation, the architecture of the computer device 100 can also include other components necessary for normal operation. In addition, those skilled in the art can understand that the architecture of the computer device 100 described above can also only include components necessary for implementing the embodiments of the present disclosure, and does not necessarily include all the components shown in the figure.

[0039] The computer device 100 can draw a graph based on a graph file and can convert the drawn graph into a graph file in a desired format. Therefore, the computer device 100 can first acquire a graph file that needs to be converted in format. The graph file can have a first format, for example, a JSON format.

[0040] In some embodiments, the graph file acquired by the computer device 100 at the beginning can not be in a format that can be directly processed, for example, the computer device 100 acquires a graph file having a third format at the beginning. In order to be able to process the graph file having the third format, the computer device 100 can convert the graph file having the third format into the graph file having the first format.

[0041] For example, in some scenarios, computer device 100 needs to use WebGL (Web Graphics Library, a 3D graphics protocol) to process graphics files. Initially, computer device 100 obtains graphics files in SVG format (third format). Since WebGL cannot directly process SVG format graphics files, computer device 100 can convert the SVG format graphics file into a format that WebGL can process, such as JSON format (first format).

[0042] In some embodiments, since SVG text is generally described by XML, the SVG format graphic file may include a first tag and a second tag, the second tag being a sub-tag of the first tag. The computer device 100 may further employ the following steps to convert the SVG format graphic file into a JSON format graphic file.

[0043] First, computer device 100 can create a target object, such as a JSON object, to store the conversion results. Figure 2A A schematic diagram of an exemplary target object 300 according to an embodiment of the present disclosure is shown. Figure 2A As shown, when creating the target object 300, since the parsing of the graphic file has not yet begun, the target object 300 can be an empty object (result undefined). The computer device 100 can then use this empty object to create a scope. The scope is used to store the tag information of the SVG format graphic file, such as the tag name, tag attributes and their corresponding attribute values, and the child tag information of the current tag (and the sub-tag information of the sub-tags, etc.). Since the target object 300 corresponds to the entire SVG format graphic file, it can store all the tag information of the entire SVG format graphic file.

[0044] Next, taking the first and second tags in an SVG format graphic file as an example, after the computer device 100 recognizes the first and second tags in the SVG format graphic file, it can create a first scope and a second scope in the target object 300 corresponding to the first tag and the second tag, respectively, based on the hierarchical relationship between the first tag and the second tag. The second scope is a sub-scope of the first scope. Then, the computer device 100 can store the tag name, attribute name, and attribute value corresponding to the first tag and the second tag in the first scope and the second scope, respectively. In this way, the SVG format graphic file can be converted into a JSON format graphic file.

[0045] Figure 2B and Figure 2CThe schematic diagram of the graphic file 200 in SVG format and the graphic file 300 in JSON format are shown respectively. Among them, Figure 2C The schematic diagram of the target object 300 after the conversion is shown, that is, the final graphic file 300 in JSON format.

[0046] As shown in Figure 2B and Figure 2C The computer device 100 can create corresponding scopes in the target object 300 based on the hierarchical relationship between the tags in the graphic file in SVG format. Among them, the tags 202, 204, 206 and 208 of the graphic file 200 correspond to the scopes 304, 306, 308 and 310 of the graphic file 300 respectively. Among them, the tags 204 and 208 are the child tags of the tag 202, the tag 206 is the child tag of the tag 204, the scopes 306 and 310 are the child scopes of the scope 304, and the scope 308 is the child scope of the scope 306.

[0047] Since the SVG text is generally described by XML, and a tag in XML is generally represented by a start tag <> and an end tag as well as the content between the start tag and the end tag, in some embodiments, identifying the tags of the graphic file 200 can determine the range corresponding to the tags by identifying the start tag and the end tag of the tags, and then the corresponding scopes can be created and the tag name, attribute name and attribute value corresponding to the tags can be stored in the corresponding scopes.

[0048] In some embodiments, in order to determine in which scope the content of the corresponding tag should be stored in the process of identifying the tags, the computer device 100 can use a scope stack to maintain the hierarchical relationship of the scopes. Specifically, the information of the first scope and the second scope is stored in the scope stack, and the information of the first scope is stacked before the information of the second scope; then the hierarchical relationship between the first tag and the second tag is determined according to the information stored in the scope stack. In this way, as long as the scope stack is used to maintain the hierarchical relationship in the process of identifying the tags, it can be easily known in which scope the information currently identified should be stored.

[0049] It can be seen that, according to the hierarchical relationship between the tags in the SVG format graphic file, the corresponding scope with the hierarchical relationship is created in the graphic file in the JSON format to store the tag name, attribute name and attribute value of the corresponding tag, so as to complete the conversion from the SVG format to the JSON format. Compared with the DOM Parser which first parses the SVG text into the DOM tree, and then recursively finds the information of each child node of the DOM tree to obtain the corresponding tag name, attribute name and attribute value, the embodiment only traverses the SVG text once in the process of parsing the text 200, greatly improving the parsing efficiency and reducing the resource usage.

[0050] After obtaining the graphic file with the first format, the computer device 100 can obtain the description information of the corresponding graphic from the graphic file, which records the related information of the graphic to be drawn.

[0051] In some embodiments, if the computer device 100 uses WebGL to draw the graphic, the graphic needs to be decomposed into graphic units (for example, points, line segments, triangles, etc.) for drawing. Therefore, the description information of the graphic in the graphic file can include a lot of graphic unit information. The graphic unit information can be the information of a point, a straight line or a triangle. The graphic unit information can include information describing the shape, size, position, color, stroke, drawing order, etc. of the graphic unit.

[0052] Figure 3A A schematic diagram of an example image 400 according to an embodiment of the present disclosure is shown.

[0053] As shown in Figure 3A , the image 400 can be directly drawn based on the graphic file. It can be seen that, if the drawing is directly performed based on the graphic file, in addition to the actual graphic 402 located in the center, a blank area 404 around the graphic 402 can also be formed. If the graphic 402 is also affected by the attributes such as viewBox and translate at this time, a certain displacement of the graphic 402 is caused, and if the offset amount is not accurately set or the data is lost or lost due to multiple transmissions of the graphic file, the graphic 402 can not be completely displayed, for example, as shown in Figure 3B .

[0054] Therefore, in order to avoid the problem of incomplete display caused by incorrect setting of the offset amount, after obtaining the description information of the graphic, the computer device 100 can further process the graphic file, for example, calculate the width and height of the corresponding actual graphic based on the description information.

[0055] In some embodiments, since the description information records the graphic element information, and each graphic element information includes the shape, size, position, and the like of the graphic element, the computer device 100 can obtain the maximum values x max ,y max and the minimum values x min ,y min of the graphic 402 on the x-axis and the y-axis from the description information, as shown in FIG. 15. Figure 3A .

[0056] Then, the computer device 100 can calculate the width W and the height H of the graphic 402 according to the maximum values x max , y max and the minimum values x min , y min of the graphic 402 on the x-axis and the y-axis:

[0057] W = x max - x min ;

[0058] H = y max - y min .

[0059] After obtaining the width and the height of the graphic 402, the computer device 100 can create a canvas with the width W and the height H. Figure 4 FIG. 16 shows a schematic diagram of an example image 500 according to an embodiment of the present disclosure. As shown in FIG. 16, to obtain the final image 500, a canvas 502 with the width W and the height H can be created first. Figure 4

[0060] In some embodiments, the computer device 100 can create a WebGL canvas with the width W and the height H based on the width W and the height H by using WebGL. For example, the WebGL canvas can be created by using a canvas tag.

[0061] Then, the computer device 100 can draw the graphic 504 on the canvas 502 based on the description information of the graphic, as shown in FIG. 16. Figure 4

[0062] In some embodiments, the computer device 100 can sequentially upload each graphic element information in the description information to a shader by using WebGL according to the drawing order information in the description information, so that the shader can draw the graphic 504 on the WebGL canvas 502.

[0063] In some embodiments, since the data format supported by WebGL is [-1, 1] data, the shader can process the size, position, and the like of the graphics 304 into normalized data of [-1, 1] according to the width W and the height H of the canvas 502, and draw in the canvas 502.

[0064] After the graphics 504 are drawn, the computer device 100 can convert the canvas 502 with the drawn graphics 504 into a graphics file having a second format. In some embodiments, the second format can be a bitmap format, such as jpg, png, and the like.

[0065] In some embodiments, the computer device 100 can convert the canvas 502 with the drawn graphics 504 into a graphics file in base64 format using, for example, the toDataURL method.

[0066] In some embodiments, the computer device 100 can render the graphics file in base64 format using an img tag. In this way, the graphics file in base64 format can be more simply rendered using the img tag. At the same time, the rendered graphics can be subject to CSS style control because of the base64 format. In this way, some properties managed by CSS can directly act on the graphics, and the graphics can be less affected by some useless information or information such as the aforementioned offset.

[0067] It can be seen that the embodiments of the present disclosure draw and format-convert the graphics according to the actual width and height of the graphics obtained from the description information, so that the converted graphics file describes the graphics actually required to be drawn, and the extra blank edges in the original graphics file are removed, avoiding incorrect settings of SVG viewBox, translate, and the like, and solving the problem of incomplete display of the corresponding graphics.

[0068] Figure 5 A flowchart of an example method 600 provided by the embodiments of the present disclosure is shown. The method 600 can be implemented by the computer device 100 of Figure 1 , and, as shown in Figure 5 , the method 600 can further include the following steps.

[0069] In step 602, a graphics file having a first format is obtained. In some embodiments, the first format is a JSON format, so that the computer device 100 can utilize WebGL to draw graphics based on the graphics file in the first format.

[0070] In some embodiments, the obtaining the graphic file in the first format comprises: obtaining a graphic file in a third format; and converting the graphic file in the third format into the graphic file in the first format to meet a file format requirement when drawing the graphic.

[0071] In some embodiments, the second format is a base64 format, and the third format is an SVG format.

[0072] In some embodiments, the graphic file in the third format comprises a first tag and a second tag, the second tag being a child tag of the first tag, and the converting the graphic file in the third format into the graphic file in the first format comprises:

[0073] creating a target object for storing a conversion result;

[0074] in response to identifying the first tag and the second tag in the graphic file in the third format, creating, according to a hierarchical relationship between the first tag and the second tag, a first scope and a second scope corresponding to the first tag and the second tag respectively in the target object, the second scope being a child scope of the first scope; and

[0075] storing, in the first scope and the second scope respectively, tag names, attribute names and attribute values corresponding to the first tag and the second tag.

[0076] In some embodiments, in response to identifying the first tag and the second tag in the graphic file in the third format, creating, according to a hierarchical relationship between the first tag and the second tag, a first scope and a second scope corresponding to the first tag and the second tag respectively in the target object comprises:

[0077] storing information of the first scope and the second scope by using a scope stack, wherein the information of the first scope is stacked before the information of the second scope; and

[0078] determining the hierarchical relationship between the first tag and the second tag according to the information stored by the scope stack.

[0079] In step 604, description information of the graphic is obtained from the graphic file.

[0080] In step 606, width and height of the graphic are calculated based on the description information.

[0081] In some embodiments, the width and the height of the graph are calculated based on the description information, including: obtaining maximum values and minimum values of the graph on the x-axis and the y-axis in the description information; and calculating the width and the height of the graph according to the maximum values and the minimum values of the graph on the x-axis and the y-axis.

[0082] In step 608, a canvas (for example, canvas 502) with the width and the height is created based on the width and the height of the graph. Figure 5

[0083] In some embodiments, the canvas with the width and the height is created based on the width and the height of the graph, including: using WebGL to create a WebGL canvas with the width and the height based on the width and the height of the graph.

[0084] In step 610, the graph (for example, graph 504) is drawn on the canvas according to the description information. Figure 5

[0085] In some embodiments, the description information includes drawing order information and a plurality of graph element information; and the graph is drawn on the canvas based on the description information, including: using WebGL to sequentially upload each graph element information in the description information to a shader according to the drawing order information in the description information to draw the graph on the WebGL canvas.

[0086] In some embodiments, the graph element information is information of a point, a line segment, or a triangle.

[0087] In step 612, the canvas with the graph drawn thereon is converted into a graph file with a second format.

[0088] In this way, the graph is drawn and converted according to the actual width and height of the graph obtained from the description information, so that the graph file obtained after the conversion describes the graph actually required to be drawn, and the extra blank edges in the original graph file are removed, avoiding incorrect setting of SVG viewBox, translate, and other attributes, and solving the problem of incomplete display of the corresponding graph.

[0089] In some embodiments, the method 600 further includes: rendering the graph file with the base64 format using an img tag. In this way, the graph file with the base64 format can be more simply rendered using the img tag. Meanwhile, the graph obtained after the rendering can be controlled by CSS styles because it is in the base64 format.

[0090] ​​It should be noted that the method of the embodiments of the present disclosure can be executed by a single device, such as a computer or a server, and the like. The method of the embodiments can also be applied to a distributed scenario, and be completed by multiple devices cooperating with each other. In the case of such a distributed scenario, one of the multiple devices can only execute one or more steps in the method of the embodiments of the present disclosure, and the multiple devices can interact with each other to complete the method.

[0091] It should be noted that some embodiments of the present disclosure are described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in a different order and still achieve desirable results. Additionally, the processes depicted in the figures do not necessarily require the particular order shown, or sequential order to achieve the desired results. In certain implementations, multitasking and parallel processing can be advantageous.

[0092] The embodiments of the present disclosure also provide a device for detecting frame rate. Figure 6 A schematic diagram of an exemplary device 700 provided by the embodiments of the present disclosure is shown. The device 700 can include the following structures.

[0093] The computing module 702 is configured to: acquire a graphic file having a first format, acquire description information of a graphic from the graphic file, and calculate a width and a height of the graphic based on the description information.

[0094] The drawing module 704 is configured to: create a canvas having the width and the height, and draw the graphic on the canvas according to the description information; and

[0095] The conversion module 706 is configured to: convert the canvas on which the graphic is drawn into a graphic file having a second format.

[0096] In some embodiments, the computing module 702 is configured to: acquire a graphic file having a third format, and convert the graphic file having the third format into the graphic file having the first format.

[0097] In some embodiments, the first format is a JSON format, the second format is a base64 format, and the third format is an SVG format.

[0098] In some embodiments, the computing module 702 is configured to: acquire maximum values and minimum values of the graphic on an x-axis and a y-axis in the description information, and calculate the width and the height of the graphic according to the maximum values and the minimum values of the graphic on the x-axis and the y-axis.

[0099] In some embodiments, the drawing module 704 is configured to create a WebGL canvas with the width and the height of the graphics based on the width and the height of the graphics using WebGL.

[0100] In some embodiments, the description information includes drawing order information and a plurality of graphics element information; the drawing module 704 is configured to sequentially upload each graphics element information in the description information to a shader to draw the graphics on the WebGL canvas using WebGL according to the drawing order information in the description information.

[0101] In some embodiments, the graphics element information is information of a point, a line segment or a triangle.

[0102] In some embodiments, the apparatus 700 further includes a rendering module 708 configured to render the graphics file with base64 format using an img tag.

[0103] For the convenience of description, the above apparatus is described in various modules according to functions. Of course, the functions of the modules can be implemented in one or more software and / or hardware when implementing the present disclosure.

[0104] The apparatus of the above embodiments is used to implement the corresponding method 600 in any of the above embodiments, and has the beneficial effects of the corresponding method embodiments, which are not described here again.

[0105] Based on the same inventive concept, the present disclosure also provides a non-transitory computer readable storage medium storing computer instructions for causing the computer to perform the method 600 of any of the above embodiments.

[0106] The computer readable medium of the present embodiment includes permanent and non-permanent, removable and non-removable media, which can be implemented by any method or technology to store information. The information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassette, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information accessible by a computing device.

[0107] The computer instructions stored in the storage medium of the above embodiments are used to make the computer execute the method 600 as described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which are not repeated here.

[0108] Based on the same inventive concept, corresponding to the method 600 of any of the above embodiments, the disclosure also provides a computer program product comprising a computer program. In some embodiments, the computer program is executable by one or more processors to cause the processor to perform the method 600. Corresponding to the execution subject of each step in each embodiment of the method 600, the processor performing the corresponding step can belong to the corresponding execution subject.

[0109] The computer program product of the above embodiments is used to make the processor execute the method 600 as described in any of the above embodiments, and has the beneficial effects of the corresponding method embodiments, which are not repeated here.

[0110] Those skilled in the art should understand that the discussion of any of the above embodiments is only exemplary, and is not intended to imply that the scope (including claims) of the disclosure is limited to these examples; under the idea of the disclosure, the above embodiments or technical features between different embodiments can also be combined, the steps can be implemented in any order, and there are many other changes of different aspects of the embodiments of the disclosure as described above. In order to be brief, they are not provided in detail.

[0111] In addition, in order to simplify the description and discussion, and so as not to make the embodiments of the disclosure difficult to understand, the known power / ground connections of integrated circuit (IC) chips and other components can or can not be shown in the provided drawings. In addition, the devices can be shown in the form of block diagrams in order to avoid making the embodiments of the disclosure difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform to be implemented the embodiments of the disclosure (i.e. these details should be fully within the understanding of those skilled in the art). Where specific details (e.g. circuits) are set forth in order to describe an exemplary embodiment of the disclosure, it will be apparent to those skilled in the art that the embodiments of the disclosure can be implemented without these specific details or with variations on these specific details. Therefore, these descriptions should be considered illustrative rather than limiting.

[0112] Although the disclosure has been described in conjunction with specific embodiments thereof, many alternatives, modifications and variations will be apparent to those skilled in the art in light of the foregoing description. For example, other memory architectures (e.g. dynamic RAM (DRAM)) can use the embodiments discussed.

[0113] Embodiments of the present disclosure are intended to cover all such alternatives, modifications, and variations as fall within the broad scope of the appended claims. Accordingly, any one or more of the omitted, modified, equivalently replaced, improved, and the like, as long as within the spirit and principle of the embodiments of the present disclosure, should be included in the scope of protection of the present disclosure.

Claims

1. A method for converting graphic formats, comprising: Obtain a graphic file with a first format, and obtain graphic description information from the graphic file, wherein the first format is JSON format; Based on the description information, calculate the width and height of the graphic, and create a canvas with the width and height; Draw the graphic on the canvas according to the description information; as well as The canvas on which the graphic is drawn is converted into a graphic file with a second format; Creating a canvas having the width and the height includes: using WebGL to create a WebGL canvas having the width and the height based on the width and the height of the graphic; The description information includes drawing order information and multiple graphics unit information; drawing the graphics on the canvas according to the description information includes: using WebGL to sequentially upload each graphics unit information in the description information to the shader to draw the graphics on the WebGL canvas according to the drawing order information in the description information; the graphics unit information includes information on the shape, size and position of the graphics unit.

2. The method of claim 1, wherein, Obtain a graphic file with a first format, including: Obtain graphic files with a third format; and The graphic file with the third format is converted into the graphic file with the first format.

3. The method as described in claim 2, wherein, The graphic file with the third format includes a first tag and a second tag, where the second tag is a sub-tag of the first tag. Converting the graphic file with the third format to the graphic file with the first format includes: Create a target object to store the transformation results; In response to the identification of the first tag and the second tag in the graphic file with the third format, based on the hierarchical relationship between the first tag and the second tag, a first scope and a second scope corresponding to the first tag and the second tag respectively are created in the target object, wherein the second scope is a sub-scope of the first scope; and The tag name, attribute name, and attribute value corresponding to the first tag and the second tag are stored in the first scope and the second scope, respectively.

4. The method of claim 3, wherein, In response to the identification of the first tag and the second tag in the graphic file with the third format, based on the hierarchical relationship between the first tag and the second tag, a first scope and a second scope corresponding to the first tag and the second tag, respectively, are created in the target object, including: The scope stack is used to store information from the first scope and the second scope; wherein the information from the first scope is pushed onto the stack before the information from the second scope; and Based on the information stored in the scope stack, the hierarchical relationship between the first tag and the second tag is determined.

5. The method of claim 2, wherein, The second format is base64 format, and the third format is SVG format.

6. The method of claim 1, wherein, Based on the description information, the width and height of the graphic are calculated, including: Obtain the maximum and minimum values ​​of the graph in the description information on the x-axis and y-axis; and Calculate the width and height of the graphic based on its maximum and minimum values ​​on the x and y axes.

7. The method of claim 1, wherein, The graphic unit information is information about points, line segments, or triangles.

8. The method of claim 1, further comprising: The image file with base64 format is rendered using the img tag.

9. An apparatus for converting graphic formats, comprising: The calculation module is configured to: acquire a graphic file with a first format, and acquire graphic description information from the graphic file, wherein the first format is JSON format; And, based on the description information, calculate the width and height of the graphic; The drawing module is configured to: create a canvas having the width and the height; and draw the graphic on the canvas according to the description information. as well as The conversion module is configured to convert the canvas on which the graphics are drawn into a graphic file with a second format. Creating a canvas having the width and the height includes: using WebGL to create a WebGL canvas having the width and the height based on the width and the height of the graphic; The description information includes drawing order information and multiple graphics unit information; drawing the graphics on the canvas according to the description information includes: using WebGL to sequentially upload each graphics unit information in the description information to the shader to draw the graphics on the WebGL canvas according to the drawing order information in the description information; the graphics unit information includes information on the shape, size and position of the graphics unit.

10. A computer device comprising one or more processors, a memory; and one or more programs, wherein the one or more programs are stored in the memory and executed by the one or more processors, the programs comprising instructions for performing the method according to any one of claims 1-8.

11. A non-volatile computer-readable storage medium comprising a computer program, which, when executed by one or more processors, causes the processors to perform the method of any one of claims 1-8.

12. A computer program product comprising computer program instructions that, when executed on a computer, cause the computer to perform the method as described in any one of claims 1-8.

Images