Image processing method and device, equipment, storage medium and product

Abstract

The invention provides an image processing method and device, equipment, a storage medium and a product. The method comprises the following steps: in response to a processing request for an image, when the image is a vector image described by a first grammar, determining a platform environment for processing the image; obtaining a first mapping relation between the first grammar and the second grammar on the first attribute and a second mapping relation between the first grammar and the second grammar on the second attribute and corresponding to the platform environment; the compatibility of different platform environments to the second attribute is different; and based on the first mapping relationship and the second mapping relationship, converting the description grammar of the image from the first grammar to the second grammar, and executing an operation requested to be executed by the processing request on the image described by the second grammar based on the platform environment. According to the invention, the vector image can be more compatible with different platform environments, and the use consistency of the vector image in different platform environments is improved.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to an image processing method, device, equipment, storage medium and product. Background Art

[0002] In front-end development, developers usually need to use vector images to create graphics, icons and other graphic elements. Although vector images can maintain clear graphic quality at different resolutions, the syntax for describing vector images is not necessarily applicable to all platform environments. Therefore, in order to be able to use vector images directly in different platform environments, it is usually necessary to convert the description syntax of vector images. However, different platform environments have different compatibility for some attributes of vector images, which means that the vector images after the description syntax conversion may not be fully compatible with different platforms. Summary of the invention

[0003] The embodiments of the present application provide an image processing method, device, electronic device, computer-readable storage medium and computer program product, which can make vector images more compatible with different platform environments and improve the consistency of use of vector images in different platform environments.

[0004] The technical solution of the embodiment of the present application is implemented as follows:

[0005] The present application provides an image processing method, the method comprising:

[0006] In response to a processing request for an image, when the image is a vector image described by a first grammar, determining a platform environment for processing the image; obtaining a first mapping relationship between a first grammar and a second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar corresponding to the platform environment on a second attribute; wherein different platform environments have the same compatibility with the first attribute, and different platform environments have different compatibility with the second attribute; based on the first mapping relationship and the second mapping relationship, converting the description grammar of the image from the first grammar to the second grammar, and performing the operation requested by the processing request on the image described by the second grammar based on the platform environment.

[0007] The present application provides an image processing device, including:

[0008] A determination module, configured to, in response to a processing request for an image, determine a platform environment for processing the image when the image is a vector image described by a first grammar;

[0009] An acquisition module, used to acquire a first mapping relationship between a first grammar and a second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar on a second attribute corresponding to the platform environment;

[0010] Wherein, different platform environments have the same compatibility with the first attribute, and different platform environments have different compatibility with the second attribute;

[0011] A conversion module is used to convert the description syntax of the image from the first syntax to the second syntax based on the first mapping relationship and the second mapping relationship, and perform the operation requested by the processing request on the image described by the second syntax based on the platform environment.

[0012] An embodiment of the present application provides an electronic device, the electronic device comprising:

[0013] A memory for storing computer executable instructions or computer programs;

[0014] The processor is used to implement the image processing method provided in the embodiment of the present application when executing the computer executable instructions or computer program stored in the memory.

[0015] An embodiment of the present application provides a computer-readable storage medium storing a computer program or computer-executable instructions for implementing the image processing method provided in the embodiment of the present application when executed by a processor.

[0016] An embodiment of the present application provides a computer program product, including a computer program or computer executable instructions. When the computer program or computer executable instructions are executed by a processor, the image processing method provided by the embodiment of the present application is implemented.

[0017] The embodiments of the present application have the following beneficial effects:

[0018] Through the above-mentioned embodiment, in response to a processing request for an image, when it is determined that the image is a vector image described by the first grammar, the platform environment for processing the image is first determined, and then a first mapping relationship between the first grammar and the second grammar on the first attribute, and a second mapping relationship between the first grammar and the second grammar corresponding to the platform environment on the second attribute are obtained. Then, based on the first mapping relationship and the second mapping relationship, the description grammar of the image can be converted from the first grammar to the second grammar, and operations are performed on the image based on the platform environment. Since different platform environments have the same compatibility with the first attribute, but different platform environments have different compatibility with the second attribute, therefore, through the first mapping relationship and the second mapping relationship corresponding to the platform environment, when the description grammar of the image is converted to the second grammar, it can be more in line with the attribute compatibility of the platform environment with the image, so that different platform environments can make accurate and consistent operations on the processing requests of the image, thereby improving the consistency of the use of images in different platform environments. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Figure 1 is a structural diagram of the image processing system architecture provided by an embodiment of the present application;

[0020] Figure 2 is a schematic diagram of the structure of an electronic device provided in an embodiment of the present application;

[0021] Figure 3A is a first flow chart of the image processing method provided in an embodiment of the present application;

[0022] Figure 3B is a flowchart of a description grammar conversion method provided in an embodiment of the present application;

[0023] Figure 3C It is a flowchart of the attribute element conversion method provided in an embodiment of the present application;

[0024] Figure 4 It is a second flow chart of the image processing method provided in an embodiment of the present application.

[0025] It should be pointed out that the above-mentioned "first" and "second" are only used to distinguish different solutions, and do not represent the degree of superiority or inferiority of the solutions or the priority in the implementation process. DETAILED DESCRIPTION

[0026] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0027] In the following description, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it can be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments and may be combined with each other without conflict.

[0028] In the following description, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described here can be implemented in an order other than that illustrated or described here.

[0029] In the embodiments of the present application, the term "module" or "unit" refers to a computer program or a part of a computer program with a predetermined function, and works together with other related parts to achieve a predetermined goal, and can be implemented in whole or in part by using software, hardware (such as processing circuits or memories) or a combination thereof. Similarly, a processor (or multiple processors or memories) can be used to implement one or more modules or units. In addition, each module or unit can be part of an overall module or unit that includes the function of the module or unit.

[0030] Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meanings as those commonly understood by those skilled in the art. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0031] The relevant data collection and processing in the embodiments of this application should be strictly in accordance with the requirements of relevant laws and regulations when applied in examples, obtain the informed consent or separate consent of the personal information subject, and carry out subsequent data use and processing within the scope of authorization of laws and regulations and the personal information subject.

[0032] Before further describing the embodiments of the present application in detail, the nouns and terms involved in the embodiments of the present application are explained. The nouns and terms involved in the embodiments of the present application are subject to the following interpretations.

[0033] 1) Vector image, also known as vector graphics or vector graphics, is a way of representing digital images. It is different from common bitmap images, which are composed of pixels, each of which contains fixed color information. In contrast, vector images are composed of a series of geometric elements, mainly including points, lines, curves and shapes, which are defined by mathematical equations. Each geometric element has its own properties, such as position, size and color. The objects in vector images are object-oriented, which means that each object is a self-contained entity with independent properties and behaviors. For example, a shape object can be moved or modified independently of other objects without affecting other objects. In an embodiment of the present application, the vector image may be a Scalable Vector Graphics (SVG).

[0034] 2) Platform environment: Platform environment refers to the basic operating environment of a computer system or mobile device operating system, which determines how applications or software interact with hardware and operating systems. Platform environment usually includes information such as operating system type, hardware architecture, processor type, device model, system version, etc. Depending on the platform environment, software developers may need to perform specific compatibility design and optimization for different operating systems or devices.

[0035] 3) Descriptive Grammar, Descriptive Grammar is a method for describing the grammatical rules of a natural language or programming language. It is often used in linguistics to analyze and describe the structure and rules of a language. In the context of programming languages ​​and computer science, descriptive grammar can refer to a formal system for defining the grammar of a programming language, which can be used to generate or verify the structure of program code.

[0036] In front-end development, React components are a widely used JavaScript library for building user interfaces and single-page applications. React adopts a component-based design philosophy that allows developers to build complex user interfaces while keeping the code modular and easy to maintain. Components in React applications are usually written using JavaScript and JSX (JavaScript XML) syntax, which allows developers to use XML syntax to write more intuitive and maintainable code.

[0037] However, many developers still need to use vector images (e.g., scalable vector graphics, SVG images) to create icons, charts, and other graphic elements. SVG images are an XML-based vector image format that can maintain clear graphic quality at different screen sizes and resolutions. Although SVG images can be used directly in React applications, their format and JSX syntax are different, which requires manual writing of a lot of code to map SVG attributes and React component attributes when using SVG images in React applications.

[0038] In order to simplify the use of SVG images in React applications, some conversion tools have been developed in related technologies, such as SVG-to-JSX conversion tools. The principle of these tools is to convert the XML code of SVG images into the JSX syntax of React components. In this way, developers can integrate SVG images directly into React applications and take advantage of React's componentization and virtual DOM mechanisms to optimize image performance and enhance interactivity.

[0039] The conversion tools in the related art usually use a unified mapping rule to convert the XML code of the SVG image into JSX code. However, different platform environments have different compatibilities for some attributes in the SVG image. The conversion method in the related art cannot make the attributes of the converted SVG image fully compatible with different platform environments.

[0040] The embodiments of the present application provide an image processing method, device, electronic device, computer-readable storage medium, and computer program product, which can make images more compatible with different platform environments and improve the consistency of image usage in different platform environments.

[0041] See also Figure 1 , Figure 1 It is a schematic diagram of the architecture of the image processing system 100 provided in an embodiment of the present application. To support an image processing application, the terminal 401 is connected to the server 200 via the network 300. The network 300 can be a wide area network or a local area network, or a combination of the two.

[0042] The terminal 401 is used for sending a processing request for the image to the server 200 in response to a processing instruction for the image.

[0043] The server 200 is used to respond to a processing request for an image, and when the image is a vector image described by a first grammar, determine the platform environment of the terminal 401 for processing the image; obtain a first mapping relationship between the first grammar and the second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar corresponding to the platform environment on a second attribute; wherein different platform environments have the same compatibility with the first attribute, and different platform environments have different compatibility with the second attribute; based on the first mapping relationship and the second mapping relationship, convert the description grammar of the image from the first grammar to the second grammar, and perform the operation requested by the processing request on the image described by the second grammar based on the platform environment.

[0044] In some embodiments, the server 200 performs the operation requested by the processing request on the image described by the second grammar, and after obtaining the operation result, the server 200 may actively send the operation result to the terminal 401, so that the user can view the operation result through the terminal 401. Of course, the terminal 401 may also actively obtain the operation result from the server 200.

[0045] In some embodiments, the terminal 401 provided in the embodiments of the present application can be implemented as various types of terminals such as laptop computers, tablet computers, desktop computers, set-top boxes, smart phones, smart speakers, smart watches, smart TVs, and car terminals, and can also be implemented as servers.

[0046] In some embodiments, the server 200 may be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, content delivery networks (CDN), and big data and artificial intelligence platforms. The terminal and the server may be directly or indirectly connected via wired or wireless communication, which is not limited in the embodiments of the present application.

[0047] See also Figure 2 , Figure 2 is a schematic diagram of the structure of an electronic device 400 provided in an embodiment of the present application, Figure 2 The electronic device 400 shown includes: at least one processor 410, a memory 450, at least one network interface 420 and a user interface 430. The various components in the electronic device 400 are coupled together via a bus system 440. It is understood that the bus system 440 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 440 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 440 is not described in detail. Figure 2 Various buses are labeled as bus system 440 .

[0048] The processor 410 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0049] The user interface 430 includes one or more output devices 431 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 430 also includes one or more input devices 432, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0050] The memory 450 may be removable, non-removable, or a combination thereof. Exemplary hardware devices include solid-state memory, hard disk drives, optical disk drives, etc. The memory 450 may optionally include one or more storage devices that are physically remote from the processor 410.

[0051] The memory 450 includes a volatile memory or a non-volatile memory, and may also include both volatile and non-volatile memories. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 450 described in the embodiments of the present application is intended to include any suitable type of memory.

[0052] In some embodiments, memory 450 can store data to support various operations, examples of which include programs, modules, and data structures, or a subset or superset thereof, as exemplarily described below.

[0053] Operating system 451, including system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0054] A network communication module 452, used to reach other electronic devices via one or more (wired or wireless) network interfaces 420, exemplary network interfaces 420 include: Bluetooth, Wireless Compatibility Certification (WiFi), and Universal Serial Bus (USB), etc.;

[0055] a presentation module 453 for enabling presentation of information via one or more output devices 431 (e.g., display screen, speaker, etc.) associated with the user interface 430 (e.g., a user interface for operating peripherals and displaying content and information);

[0056] The input processing module 454 is used to detect one or more user inputs or interactions from one of the one or more input devices 432 and translate the detected inputs or interactions.

[0057] In some embodiments, the device provided in the embodiments of the present application can be implemented in software. Figure 2 The image processing device 455 stored in the memory 450 is shown, which can be software in the form of a program and a plug-in, etc., and includes the following software modules: a determination module 4551, an acquisition module 4552, and a conversion module 4553. These modules are logical, and therefore can be arbitrarily combined or further split according to the functions implemented. The functions of each module will be described below.

[0058] In other embodiments, the image processing device provided in the embodiments of the present application can be implemented in hardware. As an example, the image processing device provided in the embodiments of the present application can be a processor in the form of a hardware decoding processor, which is programmed to execute the image processing method provided in the embodiments of the present application. For example, the processor in the form of a hardware decoding processor can adopt one or more application specific integrated circuits (Application Specific Integrated Circuit, ASIC), digital signal processors (Digital Signal Processor, DSP), programmable logic devices (Programmable Logic Device, PLD), complex programmable logic devices (Complex Programmable Logic Device, CPLD), field programmable gate arrays (Field-Programmable Gate Array, FPGA) or other electronic components.

[0059] In some embodiments, the terminal or server can implement the image processing method provided by the embodiment of the present application by running various computer executable instructions or computer programs. For example, computer executable instructions can be commands, machine instructions or software instructions at the microprogram level. The computer program can be a native program or software module in the operating system; it can be a native (Native) application (APPlication, APP), that is, a program that needs to be installed in the operating system to run, such as an instant messaging APP; it can also be a small program that can be embedded in any APP, that is, a program that can be run only by downloading it to a browser environment. In short, the above-mentioned computer executable instructions can be instructions in any form, and the above-mentioned computer program can be an application, module or plug-in in any form.

[0060] The image processing method provided by the embodiment of the present application will be described below in conjunction with the accompanying drawings. As mentioned above, the electronic device that implements the image processing method of the embodiment of the present application can be a terminal 401, a server 200, or a combination of the two. Therefore, the execution subject of each step will not be repeatedly described below.

[0061] The image processing method of the embodiment of the present application is described by taking the execution subject as the server 200 as an example. Figure 3A , Figure 3A is a first flow chart of the image processing method provided in the embodiment of the present application, which will be combined with Figure 3A The steps shown are explained.

[0062] In step 101 , in response to a request for processing an image, when the image is a vector image described by a first syntax, a platform environment for processing the image is determined.

[0063] In an embodiment of the present application, processing requests for images include at least but are not limited to: loading requests, display requests, saving requests, adjustment requests, image synthesis requests, image analysis requests, etc.; wherein different processing requests request different operations to be performed on the image, for example, a loading request is used to request a loading operation to be performed on the image, a display request is used to request a rendering and display operation to be performed on the image, and an adjustment request is used to request an image adjustment operation of at least one of rotation, scaling, color adjustment, and filter adjustment to be performed on the image.

[0064] The platform environment is the basic operating environment of the electronic device that processes the image. The platform environment can indicate the following aspects: operating system, indicating the type of operating system used by the electronic device, such as Windows system, macOS system, iOS system or Android system, etc.; hardware specifications, including hardware configurations such as CPU type, memory size, graphics card model, etc.; system version, referring to the version number of the operating system or software, such as Windows 10, macOS Big Sur, iOS 14 or Android 10, etc.; device model, for electronic devices, it can refer to the specific device model; architecture type, referring to the processor architecture of the electronic device, such as x86, x64, ARM, etc.; operating environment, which may also include specific runtime environments, such as Java Virtual Machine (JVM) version, .NET Framework version, etc. Since there are some differences in the compatibility of image attributes between different platform environments, the purpose of determining the platform environment is to take into account the differences in platform environments, perform corresponding adaptation and optimization work on the image, ensure that the processing request runs correctly on specific hardware and operating systems, and provide users with a good user experience.

[0065] In actual implementation, when a processing request for an image is received, a format detection is performed on the image in response to the processing request. When the format detection result indicates that the image is a vector image described by a first syntax, an environment detection is performed on the platform for processing the image to determine the platform environment for processing the image.

[0066] In an embodiment of the present application, the vector image may be a scalable vector image (SVG image), and the first syntax is the XML syntax corresponding to the scalable vector image (SVG image).

[0067] In step 102, a first mapping relationship between the first grammar and the second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar on a second attribute corresponding to a platform environment are obtained.

[0068] Among them, different platform environments have the same compatibility with the first attribute, and different platform environments have different compatibility with the second attribute.

[0069] In the embodiment of the present application, the first grammar may be an XML grammar, and the second grammar may be a grammar suitable for optimizing image performance and enhancing interactivity of an image, such as JavaScript grammar and JSX (JavaScript XML) grammar in a React application. Since the names of the attribute elements between the first grammar and the second grammar are not the same or directly corresponding, it is necessary to establish a mapping relationship between the two grammars in terms of attributes.

[0070] In actual implementation, the attributes of the image are divided into the first attribute and the second attribute. The first attribute is used to characterize the attributes that are compatible with different platform environments, while the compatibility of different platform environments with the second attribute is different. For example, the first attribute can be understood as a common attribute of an image that can be compatible with different platforms, such as appearance attributes such as width and height; and the second attribute can be understood as a special attribute with different compatibility for different platforms, such as gradient and pattern related attributes, filter related attributes, and animation support related attributes. Therefore, for the first attribute of the image, a unified first mapping relationship on the first grammar and the second grammar can be constructed, and no matter which platform environment responds to the processing request for the image, the same first mapping relationship is used. For the second attribute of the image, according to the compatibility of different platform environments with the second attribute, the corresponding second mapping relationship on the first grammar and the second grammar is configured for different platforms.

[0071] As an example, the first mapping relationship and the second mapping relationship can be constructed in the form of a mapping table, wherein the first mapping table corresponding to the first mapping relationship stores the association relationship between the tag name of the first attribute in the first grammar and the corresponding tag name in the second grammar; the second mapping table corresponding to the second mapping relationship stores the association relationship between the tag name of the second attribute in the first grammar and the corresponding tag name in the second grammar.

[0072] As an example, when the first grammar is expressed as XML grammar and the second grammar is expressed as JSX grammar, the first mapping table may be expressed as:

[0073] const svgToJSXMap = {

[0074] rect:'Rect',

[0075] circle:'Circle',

[0076] path:'Path',

[0077] / / ...other mappings

[0078] }.

[0079] JSX syntax is a component-based library. There are differences in attribute naming and usage between JSX syntax and XML syntax. By constructing the first mapping relationship and the second mapping relationship, these naming or usage differences can be processed during the subsequent description syntax conversion to ensure that the attributes of XML syntax are correctly applied in JSX syntax, ensure semantic matching, and ensure that the converted code complies with the naming convention of JSX syntax.

[0080] Through the above embodiments, in order to make the description syntax of the image more suitable for compatibility with the corresponding platform environment after converting the first syntax into the second syntax, when different platforms respond to processing requests for images, the second mapping relationship corresponding to the platform environment is obtained according to the platform environment, and the first mapping relationship is obtained, and the description syntax is converted using the first mapping relationship and the second mapping relationship.

[0081] In step 103, based on the first mapping relationship and the second mapping relationship, the description syntax of the image is converted from the first syntax to the second syntax, and the operation requested by the processing request is performed on the image described by the second syntax based on the platform environment.

[0082] In some embodiments, see Figure 3B , Figure 3A In step 103 shown, “based on the first mapping relationship and the second mapping relationship, converting the description syntax of the image from the first syntax to the second syntax” can be implemented through steps 1031 to 1032 .

[0083] In step 1031, a first source code of an image described based on a first grammar is obtained.

[0084] The first source code includes a first attribute element representing an attribute of the image.

[0085] In actual implementation, if the first grammar is represented as XML grammar, the first source code of the image is XML code written in XML grammar. The XML code follows the XML structure and can define the first attribute element of the image. The first attribute element represents the image attribute of the image, that is, the first source code includes the first attribute element representing the image attribute.

[0086] As an example, the XML code has a strict hierarchical structure, with each first attribute element beginning with " <element> " begins with "< / element> " where "element" is the name of the first attribute element. For example, the start and end tags of a rectangle element are " <rect> "and"< / rect> ". Each first attribute element contains attributes, which are used to define the style, size, position and other properties of the element. Here, the attributes contained in the first attribute element represent the information of the image attributes. Attributes can appear in the start tag of the first attribute element in the form of key-value pairs. For example: "fill="red"" defines the fill color of the first attribute element as red. In the XML code, the first attribute elements of the image can be nested, which means that a first attribute element can contain other first attribute elements. This method can be used to construct complex images. The nested first attribute elements can be regarded as combined attribute elements. The parent attribute element in the combined attribute element controls the layout and visual attributes of the child attribute elements.

[0087] In step 1032, based on the first mapping relationship and the second mapping relationship, the first attribute element included in the first source code is converted into a second attribute element based on the second grammatical description to obtain a second source code of the image based on the second grammatical description.

[0088] In some embodiments, see Figure 3C , Figure 3B The shown step 1032 can be implemented through steps 10321 to 10322.

[0089] In step 10321, a property node tree corresponding to the first source code is constructed.

[0090] The attribute node tree includes attribute nodes corresponding to the first attribute elements included in the first source code and association relationships between the first attribute elements.

[0091] In some embodiments, step 10321 may be implemented by:

[0092] The first source code is processed for identifying attribute elements to obtain a root attribute element corresponding to the image, a parent attribute element belonging to the root attribute element, and a child attribute element associated with the parent attribute element; a root node corresponding to the root attribute element, an attribute parent node corresponding to the parent attribute element, and an attribute child node corresponding to the child attribute element are constructed; based on the association relationship among the root attribute element, the parent attribute element, and the child attribute element in the first source code, a connection relationship among the root node, the attribute parent node, and the attribute child node is established to obtain an attribute node tree.

[0093] In actual implementation, when the first source code is represented as XML code, since the XML code follows the XML structure, the attribute elements contained in the XML code can be identified through the start tag and end tag of each attribute element in the XML code. Through the identification process, the root attribute element contained in the first source code, the parent attribute element belonging to the root attribute element, and the child attribute elements contained in each parent attribute element are determined.

[0094] The root attribute element represents the container element that carries the first source code, that is, the container of the entire first source code, such as the " <svg>" element. The parent attribute element is the outermost parent attribute element in each combined attribute element in the first source code, and each combined attribute element also contains multiple child attribute elements nested in the parent attribute element.

[0095] In actual implementation, since the attribute elements may carry image attribute information, when constructing the nodes corresponding to the attribute elements, the image attribute information corresponding to the attribute elements may be added to the corresponding nodes. In addition, in addition to the nested relationship, there may be other associations such as dependency, logical relationship, inheritance relationship, etc. between the attribute elements in each first source code. Therefore, when identifying each attribute element, the association relationship between the attribute elements can also be identified.

[0096] As an example, the root attribute element is traversed to obtain the parent attribute elements contained in the root attribute element and the first association relationship between the parent attribute elements, and an attribute parent node is constructed for each parent attribute element; for each parent attribute element, the image attribute information corresponding to the parent attribute element is extracted, and the image attribute information is added to the attribute parent node corresponding to the parent attribute information.

[0097] Then, for each parent attribute element, the parent attribute elements are traversed to determine the child attribute elements contained in the parent attribute element, and the second association relationship between the child attribute elements is determined. A corresponding attribute child node is constructed for each child attribute element; for each child attribute element, the image attribute information corresponding to the child attribute element is extracted, and the image attribute information is added to the attribute child node corresponding to the child attribute element.

[0098] In actual implementation, after identifying each attribute element in the first source code, a corresponding node can be constructed for each attribute element. Specifically, a corresponding root node is constructed for the root attribute element, a corresponding attribute parent node is constructed for each parent attribute element, and a corresponding attribute child node is constructed for each child attribute element.

[0099] For each parent attribute element, the attribute child nodes corresponding to the child attribute elements included therein are connected to the attribute parent node based on the second association relationship between the child attribute elements, so as to obtain the attribute node branch corresponding to each parent attribute element.

[0100] Then, based on the first association relationship between the parent attribute elements, the attribute parent node on the attribute node branch is connected to the root node to obtain an attribute node tree.

[0101] As an example, when constructing an attribute subnode, if the sub-attribute element contains text information, a text node may be constructed using the text information, and the text node may be added to the attribute subnode corresponding to the sub-attribute element.

[0102] In actual implementation, a code parser, such as a DOM parser (Document Object Model Parser), can be defined based on the construction rules of the attribute node tree. The DOM parser can parse the XML code document and convert the XML code into an attribute node tree. The attribute node tree is a hierarchical structure composed of nodes, which represent attribute elements, attributes, text and other contents in the XML code.

[0103] As an example, a defined DOM parser can convert the first source code (XML code) into an attribute node tree in the following manner: parsing starts, the DOM parser starts to read the first source code of the image and parses it according to the XML structure; processing declarations, the DOM parser encounters the XML declaration of the image, such as "<?xml version="1.0" encoding="UTF-8"?>", this declaration will be ignored by the DOM parser because it is not part of the attribute element of the image; reading the root attribute element, the DOM parser reads the root attribute element in the first source code, that is, " <svg>" element, which is the container of the entire XML code; recursive traversal, the DOM parser recursively traverses all attribute elements in the first source code, starting from the root attribute element, then its child elements (which can correspond to the above-mentioned parent attribute elements), then the child elements of the child elements, and so on; creating nodes, for each attribute element, the DOM parser will create a new attribute node, which has the corresponding attribute element, the tag name of the attribute element, the image attribute information, the text information, etc.; processing attribute elements, for each attribute of the attribute element, the DOM parser will also create a new image attribute information node and add it to the corresponding attribute element node; processing strings and entities, if the first source code contains string or entity references, the DOM parser will process these strings and entities and convert them into corresponding characters or entity values; processing annotations Comments and processing instructions, the DOM parser ignores comments (ˋ<!--...-->ˋ) and processing instructions (such as ˋ<?xml-stylesheet...?>ˋ) because they are not part of the first source code; processing text content, for the text content in the attribute element, the DOM parser creates a text node and adds it to the attribute element node; recursion is completed, the DOM parser continues to recursively process all attribute elements until all attribute elements in the first source code are parsed; building a tree structure, as the parsing proceeds, attribute element nodes are added to the tree structure to form a complete attribute node tree; completing the parsing, once all attribute elements in the first source code have been parsed, the DOM parser notifies the application that the parsing is complete. Here, the attribute element can include the above-mentioned parent attribute element and child attribute element.

[0104] Through the above embodiment, the first source code is converted into an attribute node tree, which can easily traverse and operate each attribute element.

[0105] In step 10322, for each attribute node in the attribute node tree, based on the first mapping relationship and the second mapping relationship, the first attribute element corresponding to the attribute node is converted into a second attribute element based on the second grammar description.

[0106] In some embodiments, step 10322 can be implemented in the following manner.

[0107] For each attribute node in the attribute node tree, the following process is performed: when the first attribute element corresponding to the attribute node belongs to the first attribute, the first attribute element corresponding to the attribute node is converted into a third attribute element based on the second grammatical description based on the first mapping relationship, and the third attribute element is used as the second attribute element of the attribute node when it belongs to the first attribute; when the first attribute element corresponding to the attribute node belongs to the second attribute, the first attribute element corresponding to the attribute node is converted into a fourth attribute element based on the second grammatical description based on the second mapping relationship, and the fourth attribute element is used as the second attribute element of the attribute node when it belongs to the second attribute.

[0108] In actual implementation, each first attribute element in the first source code can be converted into a description syntax to obtain a second attribute element based on a second grammatical description, and then the second attribute elements can be combined to obtain a second source code of the target object. The second source code is a code based on the second grammatical description.

[0109] In actual implementation, the attribute node tree is traversed, and for each attribute node in the attribute node tree, the first attribute element corresponding to the attribute node is converted into a syntax. Specifically, if the first attribute element corresponding to the attribute node belongs to the first attribute, a search is performed in the first mapping relationship based on the tag name of the first attribute element to determine the tag name of the third attribute element corresponding to the tag name of the first attribute element; then, based on the tag name of the third attribute element and the image attribute information corresponding to the first attribute element, the first attribute element is converted into a third attribute element that conforms to the second syntax. Here, when the first source code is expressed as XML code and the second source code is expressed as JSX code, the XML code corresponding to the first attribute element is converted into JSX code based on the JSX description, that is, the JSX code corresponding to the third attribute element. The third attribute element is used as the second attribute element of the attribute node when it belongs to the first attribute.

[0110] In actual implementation, if the first attribute element corresponding to the attribute node belongs to the second attribute, the tag name of the first attribute element is searched in the second mapping relationship to determine the tag name of the fourth attribute element corresponding to the tag name of the first attribute element; then, based on the tag name of the fourth attribute element and the image attribute information of the first attribute element, the first attribute element is converted into a fourth attribute element that conforms to the second grammar. That is, the XML code corresponding to the first attribute element is converted into JSX code to obtain the fourth attribute element, and the fourth attribute element is used as the second attribute element when the attribute node belongs to the second attribute.

[0111] After obtaining the second attribute elements corresponding to all the first attribute elements, the JSX codes corresponding to the second attribute elements can be combined based on the composition structure of the first attribute elements in the first source code, such as the composition of the root attribute element, the parent attribute element, and the child attribute element in the first source code, such as forming function components, to obtain the second source code of the image described based on the second grammar.

[0112] Then, the operation requested by the processing request may be executed on the image described by the second syntax in the platform environment.

[0113] Through the above-mentioned embodiment, in response to a processing request for an image, when it is determined that the image is a vector image described by the first grammar, the platform environment for processing the image is first determined, and then a first mapping relationship between the first grammar and the second grammar on the first attribute, and a second mapping relationship between the first grammar and the second grammar corresponding to the platform environment on the second attribute are obtained. Then, based on the first mapping relationship and the second mapping relationship, the description grammar of the image can be converted from the first grammar to the second grammar, and operations are performed on the image based on the platform environment. Since different platform environments have the same compatibility with the first attribute, but different platform environments have different compatibility with the second attribute, therefore, through the first mapping relationship and the second mapping relationship corresponding to the platform environment, when the description grammar of the image is converted to the second grammar, it can be more in line with the attribute compatibility of the platform environment with the image, so that different platform environments can make accurate and consistent operations on the processing requests of the image, thereby improving the consistency of the use of images in different platform environments.

[0114] In some embodiments, after “obtaining the second source code of the image based on the second grammatical description” in step 1032, the following process may also be performed.

[0115] An attribute adjustment interface for adjusting the second attribute element is configured in the second source code.

[0116] In actual implementation, since JSX syntax is a component-based library, converting the first source code based on XML syntax into the second source code based on JSX syntax not only retains the original structure and style of the image, but also makes full use of the componentized characteristics and dynamic functions of JSX syntax, making it easier to reuse and manage the attribute elements in the image, and also integrate and expand the image functions in the platform environment. Therefore, after converting the image description syntax from XML syntax to JSX syntax, that is, after obtaining the second source code of the image described based on JSX syntax, the attribute adjustment interface can be configured in the second source code to expand or adjust the attribute functions of the image through the attribute adjustment interface in the future.

[0117] In some embodiments, “performing the operation requested by the processing request on the image described by the second syntax based on the platform environment” shown in step 103 may be implemented in the following manner.

[0118] When the operation requested to be performed by the processing request is a display operation, a platform appearance attribute that conforms to the platform environment is obtained; the second source code is adjusted based on the platform appearance attribute through the attribute adjustment interface, and an image is displayed in the platform environment based on the adjusted second source code.

[0119] In actual implementation, due to the different display modules of different platform environments (such as desktop and mobile), different units are usually required for images to adapt to the corresponding platform environment. For example, relative units usually use: px, em, ex, %, etc., while absolute units usually use: rem, cm, pt, in, pc, mm, etc. Especially in the mobile platform environment, different units will cause inconsistent display of images on different models. Therefore, according to the differences in platform environments, each platform environment corresponds to platform appearance attributes such as width, height, and fonts, so as to display images in the platform environment based on the platform appearance attributes, ensure consistent display of images in different platform environments, and achieve unified rendering of images.

[0120] As an example, when displaying an image, different platform environments usually have different appearance attributes in the following aspects: size and scale, which is used to control the width and height of the image; borders and decorations, which are used to define the style, width and color of the image border; background, which is used to specify the background color behind the image container; color and contrast, which is used to adjust the brightness, contrast, saturation, etc. of the image; text and captions, which are used to set the color, font and size of the image caption; animation and transitions, which are used to control the smooth transition effect of the image size, position or color change; responsive design, which is used to adjust the size of the image according to different screen sizes and resolutions. These appearance attributes may have different implementations and naming conventions in different platform environments (such as web browsers, desktop applications, mobile applications, etc.), but their basic concepts and purposes are similar, all of which are to improve the user's visual experience of the image.

[0121] In actual implementation, when the operation requested by the processing request is a display operation, the platform appearance attributes corresponding to the platform environment for performing the operation are obtained, and the attribute adjustment interface pre-configured in the second source code is called to adjust the appearance attributes for the image in the second source code to conform to the platform appearance attributes, so as to realize the display of the image in the platform environment.

[0122] In some embodiments, "performing the operation requested by the processing request on the image described by the second syntax based on the platform environment" shown in step 103 can also be implemented in the following manner.

[0123] When the operation requested to be performed by the processing request is an image adjustment operation, determine the target attribute element indicated by the image adjustment operation in the second attribute element; and perform the image adjustment operation of the target attribute element on the image described by the second syntax in the platform environment through the attribute adjustment interface.

[0124] In an embodiment of the present application, the attribute adjustment interface may be used to adjust the image attribute information of the second attribute element to meet actual business needs, for example, replacing the filter of the image, or displaying the image effect as a gradient, etc.

[0125] In actual implementation, if the operation requested to be performed by the processing request is an image adjustment operation, the target attribute element indicated by the image adjustment operation can be determined first, and then the attribute adjustment interface is called to adjust the second attribute element corresponding to the target attribute element in the second source code in the platform environment to the attribute effect indicated by the image adjustment operation, so that the image display is consistent with the effect indicated by the image adjustment operation.

[0126] In some embodiments, "performing the operation requested by the processing request on the image described by the second syntax based on the platform environment" shown in step 103 can also be implemented in the following manner.

[0127] Based on the attribute adjustment interface, a display emergency attribute is added in the second source code; when the processing request is expressed as a display request, whether the image described by the second grammar is abnormal is detected; if the image is abnormal, a backup image is determined based on the display emergency attribute in the second source code, and the backup image is displayed in the platform environment.

[0128] In actual implementation, since there may be damaged requests when the image is transmitted between different electronic devices, or errors may occur during the conversion of the image description syntax, the image may not be displayed normally in the platform environment. Therefore, a display emergency attribute can be added to the second source code based on the attribute adjustment interface.

[0129] As an example, a fallback function (also called a backup function), such as a fallback function, can be constructed in the second source code to display emergency properties. A fallback function is a specific function that is used to restore the normal operation of the system or provide an alternative solution when the normal execution process fails or an exception occurs. The role of the fallback function is to provide a safety measure for the program to ensure that the system can continue to run or provide minimum functionality when the main process is unavailable or fails. For example, when the main process is unavailable or does not meet the conditions, an alternative plan or alternative path is provided.

[0130] As an example, a fallback function may be used to provide an alternative solution for displaying a backup image when an image is abnormal.

[0131] As an example, when the processing request is expressed as a display request, that is, when the operation requested by the processing request is a display operation, an abnormality detection is performed on the image described by the second grammar. If an image abnormality is detected, the display emergency attribute can be called to determine the backup image indicated by the display emergency attribute, and the backup image is displayed in the platform environment.

[0132] Through the above embodiment, by displaying the emergency attributes, it can be ensured that when an abnormality occurs in the image, the user will not directly see the error page on the platform environment; and, by choosing to display the backup image, the platform environment can still provide an effective response to the display request, rather than completely crashing or displaying useless error messages, thereby reducing user anxiety.

[0133] In some embodiments, a loading attribute can also be constructed based on the loading function, and the loading attribute can be added to the second source code through the attribute adjustment interface, so that when the platform environment performs an operation of displaying an image, if the platform environment responds slowly, a loading animation or indicator is displayed in the display area of ​​the platform environment to inform the user that the image is loading. The design of the loading function should take into account the user experience, ensuring that the loading animation or indicator appears when necessary and disappears in time when the image is loaded.

[0134] In some embodiments, "performing the operation requested by the processing request on the image described by the second syntax based on the platform environment" shown in step 103 can also be implemented in the following manner.

[0135] Based on the attribute adjustment interface, an exception reporting attribute is added in the second source code; during the process of performing operations on the image in the platform environment, if the image is abnormal, the abnormal situation of the image is determined based on the exception reporting attribute in the second source code, and the abnormal situation is reported.

[0136] In actual implementation, when the platform environment performs operations on images, it is inevitable that abnormal situations will occur, or the image will be abnormal. In this case, in addition to constructing corresponding abnormal emergency attributes through the fallback function, errors can also be reported so that the administrator of the platform environment can discover the abnormal situation in time and facilitate subsequent repairs.

[0137] As an example, an event processing function, such as the onError function, can be used to construct an exception reporting attribute, and the exception reporting attribute can be added to the second source code through the attribute adjustment interface. The event processing function is specifically used to handle error events. When the platform environment determines that an image exception occurs during the execution of an operation, the event processing function will be triggered to determine the abnormal situation and report the abnormal situation, so that the administrator can take corresponding measures when an abnormality occurs, such as displaying an abnormal message, recording an abnormal log, and performing abnormal recovery.

[0138] In some embodiments, Figure 3A Before executing "executing the operation requested by the processing request on the image described by the second syntax based on the platform environment" in step 103 shown, the multi-request processing attribute may be added in the following manner.

[0139] When the processing request is a first request to perform an operation on an image in a platform environment, a multi-request processing attribute is added to the second source code based on the attribute adjustment interface.

[0140] exist Figure 3A After the “perform the operation requested by the processing request on the image described by the second syntax based on the platform environment” in step 103 shown in the figure is executed, the operation can be performed in the following manner.

[0141] The image described by the second syntax is cached based on the multi-request processing attribute, so that when the platform environment performs an operation on the image again, the cached image described by the second syntax is directly obtained, and the operation is performed on the image described by the second syntax.

[0142] In actual implementation, the platform environment may receive processing requests for images multiple times. In order to improve the processing speed of the platform environment when performing operations on images, the image may be processed only when the processing request for the image is received for the first time. Figure 3A The description grammar conversion process shown in the figure is then cached, and the image based on the second grammar description obtained after the conversion is cached. Then, when a processing request for the image is received later, the cached image is directly obtained, and the operation is performed based on the cached image.

[0143] As an example, a cache function, such as the useRequestCache function, can be used to construct a multi-request processing attribute, and the multi-request processing attribute can be added to the second source code through the attribute adjustment interface. The cache function can cache the initial image, and when performing operations on the image later, there is no need to re-request the description syntax, which speeds up the response speed of the platform environment to perform operations.

[0144] As an example, when the platform environment receives a processing request for an image for the first time, that is, before the platform environment performs the operation requested by the processing request for the image for the first time, a multi-request processing attribute is added to the second source code based on the attribute adjustment interface, and after the platform environment performs the operation for the image for the first time, the multi-request processing attribute is called to cache the image based on the second grammatical description converted before the first execution of the operation. When the platform environment receives a processing request for the image again, in response to the processing request, the cached image described by the second grammatical description is directly obtained, and the operation requested by the processing request received again is performed on the image described by the second grammatical description.

[0145] In a specific embodiment, the image processing method provided in the embodiment of the present application is further described by taking the processing request as a display request, that is, the processing request is used to request to perform a rendering display operation on an image as an example. Figure 4 , Figure 4 This is a second flow chart of the image processing method provided in the embodiment of the present application. The image processing method provided in the embodiment of the present application may also include steps 201 to 204.

[0146] In S201 , in response to a processing request for an image, a source resource corresponding to the image is acquired.

[0147] As an example, the source resource may be a local static file in the platform receiving the processing request, or an image file sent by other electronic devices through a network or a content distribution network. The source resource is an image in a vector format based on the first grammar description. In response to the processing request, the platform determines its own platform environment.

[0148] As an example, you can determine your platform environment by executing the following code on the platform:

[0149] / / system

[0150] let system = "unknow";

[0151] if(testUa( / windows|win32|win64|wow32|wow64 / g)){

[0152] system = "windows"; / / windows system

[0153] }else if(testUa( / macintosh|macintel / g)){

[0154] system = "macos"; / / macos system

[0155] }else if(testUa( / x11 / g)){

[0156] system = "linux"; / / linux system

[0157] }else if(testUa( / android|adr / g)){

[0158] system = "android"; / / android system

[0159] }else if(testUa( / ios|iphone|ipad|ipod|iwatch / g)){

[0160] system = "ios"; / / ios system

[0161] }

[0162] / / platform

[0163] let platform = "unknow";

[0164] if(system===="windows"||system===="macos"||system===="linux"){

[0165] platform = "desktop"; / / desktop

[0166] }else if(system===="android"||system===="ios"||testUa( / mobile / g)){

[0167] platform = "mobile"; / / mobile terminal

[0168] }

[0169] The above code is used to determine whether the operating system indicated by the platform environment is a Windows system, a MacOS system, a Linux system, an Android system, or an iOS system; and to determine whether the platform indicated by the platform environment is a desktop or a mobile terminal.

[0170] In S202, a first source code of an image described based on a first grammar is parsed.

[0171] As an example, a transcoder is constructed, and the transcoder may include a DOM parser, a mapping module, wherein the mapping module may include a first attribute mapping unit and a second attribute mapping unit.

[0172] As an example, when the first grammar is XML grammar and the second grammar is JSX grammar, a first mapping relationship between XML grammar and JSX grammar on a first attribute and a second mapping relationship between XML grammar and JSX grammar on a second attribute corresponding to the platform environment are obtained.

[0173] Then, the first source code of the image described based on the first grammar is converted into a JS object through a DOM parser to obtain an attribute node tree corresponding to the image.

[0174] Traverse the attribute node tree, and for each attribute node on the attribute node tree, determine whether the first attribute element corresponding to the attribute node belongs to the first attribute or the second attribute. When the first attribute element belongs to the first attribute, the first attribute mapping unit converts the first attribute element into a third attribute element based on the JSX syntax description based on the first mapping relationship; when the first attribute element belongs to the second attribute, the second attribute mapping unit converts the first attribute element into a fourth attribute element based on the JSX syntax description based on the second mapping relationship. Combine the third attribute element and the fourth attribute element to obtain the second source code of the image described based on the JSX syntax.

[0175] Here, the first attribute can be understood as a common attribute of an image that is compatible with different platforms, such as width and height, and the second attribute can be understood as a special attribute with different compatibility for different platforms, such as attributes related to gradients and patterns, attributes related to filters, and attributes related to animation support. For the second attribute, a corresponding second mapping relationship can be constructed according to the platform environment to suit the compatibility of the platform environment with the image effect of the image.

[0176] As an example, when the platform environment is a desktop of a Windows system, a mapping relationship between the tag name of the second attribute in XML syntax and the attribute tag name in CSS syntax can be constructed in the second mapping relationship to map the second attribute of the image to a CSS attribute.

[0177] As an example, regarding the gradient attribute in XML syntax <lineargradient>The conversion can be based on the second mapping relationship. <lineargradient>The attribute is converted to a linear gradient in the background-image attribute in CSS. In one example, if the gradient attribute is <lineargradient>The code is represented as:

[0178] <defs>

[0179] <linearGradient id="myGradient"x1="0%"y1="0%"x2="100%"y2="0%">

[0180] <stop offset="0%"stop-color="blue" / >

[0181] <stop offset="100%"stop-color="red" / >

[0182] < / defs> < / lineargradient>

[0183]

[0184] Then, set the gradient attribute <lineargradient>After being converted into the background-image property in CSS, the code is:

[0185] .linear-gradient-class{

[0186] background-image:linear-gradient(to right,blue,red);

[0187] }.

[0188] In S203, the packaging enhancement of the image is achieved by configuring the attribute adjustment interface in the second source code.

[0189] As an example, the property elements in the second source code may be adjusted through the property adjustment interface to subsequently extend effects and other characteristics for the image.

[0190] As an example, props is a parameter that supports accepting attributes such as width, height, and transparency to change the shape of the JSX component. Users can adjust the appearance attributes of the image by calling the attribute adjustment interface and passing in the props parameter.

[0191] For example, when a user uses an image on page A of a platform environment and expects to display an image with an aspect ratio of 200px:200px, the code can be used<SvgAnimatedJsx width=200height=200> To adjust the width and height of the SvgAnimatedJsx component in the second source code. If the user wants to use an image on the B page of the platform environment and expects to display an image with an aspect ratio of 100px:100px, the code<SvgAnimatedJsx width=100height=100> To adjust the width and height of the SvgAnimatedJsx component in the second source code, users can get two images with completely different sizes and styles by simply changing the two properties of the SvgAnimatedJsx component.

[0192] As an example, through the attribute adjustment interface, the attribute elements in the second source code can be adjusted or added to configure different attribute expressions of the image to obtain several effects of the image, which are suitable for various business scenarios.

[0193] As an example, through the property adjustment interface, the following features can be added to the second source code: the property of adding text to the image through the Desc function or the title function; the multi-request processing property built through the useRequestCache function; the exception reporting property built through the onError function; the display emergency property built through the fallback function; the loading property built based on the loading function, etc.; add events to the attribute elements through the span function, such as binding mouse click events, mouse move events, and mouse leave events.

[0194] In S204, a cross-platform environment solution is constructed for the image described based on the second grammar.

[0195] As an example, to smooth out the framework differences, corresponding compatibility plug-ins can be built based on the image processing method of the embodiment of the present application for the platform frameworks supported by different platform environments, and the conversion of the image description syntax and the rendering of the image can be realized by configuring the corresponding compatibility plug-ins for different platform environments. In this way, developers can reuse the same image in multiple platforms without worrying about the platform environment, and ensure the UI consistency of the image on multiple platforms.

[0196] As an example, the rendering logic is unified. In order to ensure that images based on the second syntax can run in different platform environments, a compatible alternative is adopted for the second attribute of the image, such as using the image component in the react environment to simulate the fill effect of the image.

[0197] As an example, conditional compilation and compatibility checking introduces conditional compilation logic to dynamically adjust the output JSX code according to the platform environment. For example, for platforms that do not support certain XML code features, fallback solutions or warning prompts are provided.

[0198] Through the above embodiments, the description syntax of the image is converted from XML syntax to JSX syntax, so that code standardization can be achieved. The converted code conforms to the coding style and specifications of the JSX syntax, thereby improving the readability and maintainability of the image code. After the attribute elements of the XML code are converted into components of the JSX code, these graphic components can be conveniently reused in the JSX application, and even further encapsulated and customized. The converted JSX code can be seamlessly integrated into the JSX application, and the state management and life cycle methods of the JSX syntax, as well as other JSX libraries and frameworks, can be used to achieve more complex interactions and animation effects for images.

[0199] The following is a description of an exemplary structure of the image processing device 455 provided in the embodiment of the present application implemented as a software module. In some embodiments, Figure 2 As shown, the software modules stored in the image processing device 455 of the memory 440 may include:

[0200] The determination module 4551 is used to determine the platform environment for processing the image in response to a processing request for the image when the image is a vector image described by the first syntax.

[0201] The acquisition module 4552 is used to acquire a first mapping relationship between the first syntax and the second syntax on the first attribute, and a second mapping relationship between the first syntax and the second syntax on the second attribute corresponding to the platform environment.

[0202] The conversion module 4553 is used to convert the description syntax of the image from the first syntax to the second syntax based on the first mapping relationship and the second mapping relationship, and perform the operation requested by the processing request on the image described by the second syntax based on the platform environment.

[0203] In some embodiments, the conversion module 4553 is also used to obtain a first source code of an image based on a first grammatical description, the first source code including a first attribute element representing an attribute of the image; based on a first mapping relationship and a second mapping relationship, the first attribute element included in the first source code is converted into a second attribute element based on a second grammatical description to obtain a second source code of the image based on the second grammatical description.

[0204] In some embodiments, the conversion module 4553 is also used to construct an attribute node tree corresponding to the first source code, the attribute node tree including attribute nodes corresponding to the first attribute elements included in the first source code and the association relationship between the first attribute elements; for each attribute node in the attribute node tree, the first attribute element corresponding to the attribute node is converted into a second attribute element based on the second grammatical description based on the first mapping relationship and the second mapping relationship.

[0205] In some embodiments, the conversion module 4553 is also used to perform the following process for each attribute node in the attribute node tree: when the first attribute element corresponding to the attribute node belongs to the first attribute, the first attribute element corresponding to the attribute node is converted into a third attribute element based on the second grammatical description based on the first mapping relationship, and the third attribute element is used as the second attribute element of the attribute node when it belongs to the first attribute; when the first attribute element corresponding to the attribute node belongs to the second attribute, the first attribute element corresponding to the attribute node is converted into a fourth attribute element based on the second grammatical description based on the second mapping relationship, and the fourth attribute element is used as the second attribute element of the attribute node when it belongs to the second attribute.

[0206] In some embodiments, the conversion module 4553 is also used to perform attribute element recognition processing on the first source code to obtain the root attribute element corresponding to the image, the parent attribute element belonging to the root attribute element, and the child attribute element associated with the parent attribute element; construct the root node corresponding to the root attribute element, the attribute parent node corresponding to the parent attribute element, and the corresponding attribute child node of the child attribute element; based on the association relationship between the root attribute element, the parent attribute element and the child attribute element in the first source code, establish the connection relationship between the root node, the attribute parent node and the attribute child node to obtain the attribute node tree.

[0207] In some embodiments, the image processing device 455 further includes a configuration module, which is used to configure a property adjustment interface for adjusting the second property element in the second source code.

[0208] In some embodiments, the conversion module 4553 is also used to obtain platform appearance attributes that conform to the platform environment when the operation requested to be performed by the processing request is a display operation; adjust the second source code based on the platform appearance attributes through the attribute adjustment interface, and display the image based on the adjusted second source code in the platform environment.

[0209] In some embodiments, the conversion module 4553 is also used to determine the target attribute element indicated by the image adjustment operation in the second attribute element when the operation requested to be performed in the processing request is an image adjustment operation; through the attribute adjustment interface, the image adjustment operation of the target attribute element is performed in the platform environment for the image described by the second syntax.

[0210] In some embodiments, the conversion module 4553 is also used to add a display emergency attribute in the second source code based on the attribute adjustment interface; when the processing request is expressed as a display request, whether the image described by the second syntax is abnormal is detected; if the image is abnormal, a backup image is determined based on the display emergency attribute in the second source code, and the backup image is displayed in the platform environment.

[0211] In some embodiments, the image processing device 455 further includes an exception handling module, which is used to add an exception reporting attribute in the second source code based on the attribute adjustment interface; in the process of the platform environment performing operations on the image, if the image is abnormal, the abnormality of the image is determined based on the abnormality reporting attribute in the second source code, and the abnormality is reported

[0212] In some embodiments, the image processing device 455 also includes a multi-request processing module, which is used to add a multi-request processing attribute in the second source code based on the attribute adjustment interface when the processing request is the first request to perform an operation on the image in the platform environment; cache the image described by the second syntax based on the multi-request processing attribute, so that when the operation is performed on the image in the platform environment again, the cached image described by the second syntax is directly obtained, and the operation is performed on the image described by the second syntax.

[0213] The embodiment of the present application provides a computer program product, which includes a computer program or a computer executable instruction, and the computer program or the computer executable instruction is stored in a computer-readable storage medium. The processor of the electronic device reads the computer executable instruction from the computer-readable storage medium, and the processor executes the computer executable instruction, so that the electronic device performs the above-mentioned image processing method of the embodiment of the present application.

[0214] The present application embodiment provides a computer-readable storage medium in which computer executable instructions or computer programs are stored. When the computer executable instructions or computer programs are executed by a processor, the processor will be caused to execute the image processing method provided by the present application embodiment, for example, Figure 3A The image processing method is shown.

[0215] In some embodiments, the computer-readable storage medium may be a memory such as RAM, ROM, flash memory, magnetic surface memory, optical disk, or CD-ROM; or may be various devices including one or any combination of the above memories.

[0216] In some embodiments, computer executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0217] As an example, computer-executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file that stores other programs or data, such as in one or more scripts in a HyperText Markup Language (HTML) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions).

[0218] As an example, computer executable instructions may be deployed to be executed on one electronic device, or on multiple electronic devices located at one site, or on multiple electronic devices distributed at multiple sites and interconnected by a communication network.

[0219] In summary, through the above embodiments, in response to a processing request for an image, when it is determined that the image is a vector image described by a first grammar, the platform environment for processing the image is first determined, and then a first mapping relationship between the first grammar and the second grammar on the first attribute, and a second mapping relationship between the first grammar and the second grammar corresponding to the platform environment on the second attribute are obtained. Then, based on the first mapping relationship and the second mapping relationship, the description grammar of the image can be converted from the first grammar to the second grammar, and operations are performed on the image based on the platform environment. Since different platform environments have the same compatibility with the first attribute, and different platform environments have different compatibility with the second attribute, therefore, through the first mapping relationship and the second mapping relationship corresponding to the platform environment, when the description grammar of the image is converted to the second grammar, it can be more in line with the attribute compatibility of the platform environment with the image, so that different platform environments can make accurate and consistent operations on the processing requests of the image, thereby improving the consistency of the use of images in different platform environments.

[0220] In addition, converting the image description syntax from XML syntax to JSX syntax can achieve code standardization. The converted code conforms to the coding style and specifications of JSX syntax, improving the readability and maintainability of the image code. After converting the attribute elements of XML code into components of JSX code, these graphic components can be easily reused in JSX applications, and even further encapsulated and customized. The converted JSX code can be seamlessly integrated into JSX applications, and more complex interactions and animation effects can be achieved for images by using the state management and lifecycle methods of JSX syntax, as well as other JSX libraries and frameworks.

[0221] The above is only an embodiment of the present application and is not intended to limit the protection scope of the present application. Any modifications, equivalent substitutions and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.< / lineargradient> < / lineargradient> < / lineargradient> < / svg> < / svg>

Claims

1. An image processing method, characterized in that: The method comprises: In response to a request for processing an image, when the image is a vector image described by a first syntax, determining a platform environment for processing the image; Acquire a first mapping relationship between a first grammar and a second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar on a second attribute corresponding to the platform environment; Based on the first mapping relationship and the second mapping relationship, the description syntax of the image is converted from the first syntax to the second syntax, and based on the platform environment, the operation requested by the processing request is performed on the image described by the second syntax.

2. The method according to claim 1, characterized in that The converting the description syntax of the image from the first syntax to the second syntax based on the first mapping relationship and the second mapping relationship includes: Acquire a first source code of the image based on the first grammar description, wherein the first source code includes a first attribute element representing an attribute of the image; Based on the first mapping relationship and the second mapping relationship, a first attribute element included in the first source code is converted into a second attribute element based on the second grammatical description to obtain a second source code of the image based on the second grammatical description.

3. The method according to claim 2, characterized in that The converting, based on the first mapping relationship and the second mapping relationship, the first attribute element included in the first source code into a second attribute element based on the second grammar description includes: Constructing an attribute node tree corresponding to the first source code, the attribute node tree including attribute nodes corresponding to first attribute elements included in the first source code and association relationships between the first attribute elements; For each attribute node in the attribute node tree, a first attribute element corresponding to the attribute node is converted into a second attribute element based on the second grammar description based on the first mapping relationship and the second mapping relationship.

4. The method according to claim 2, characterized in that: After obtaining the second source code of the image based on the second grammar description, the method further includes: An attribute adjustment interface for adjusting the second attribute element is configured in the second source code.

5. The method according to claim 4, characterized in that The performing, in the platform environment, the operation requested by the processing request on the image described by the second grammar comprises: When the operation requested to be performed by the processing request is a display operation, obtaining a platform appearance attribute that conforms to the platform environment; The second source code is adjusted based on the platform appearance attribute through the attribute adjustment interface, and the image is displayed based on the adjusted second source code in the platform environment.

6. The method according to claim 4, characterized in that The method further comprises: Based on the attribute adjustment interface, adding a display emergency attribute in the second source code; When the processing request is expressed as a display request, detecting whether the image described by the second grammar is abnormal; If the image is abnormal, a backup image is determined based on the display emergency attribute in the second source code, and the backup image is displayed in the platform environment.

7. The method according to claim 4, characterized in that The method further comprises: Based on the attribute adjustment interface, adding an exception reporting attribute in the second source code; During the process of the platform environment performing the operation on the image, if the image is abnormal, the abnormal situation of the image is determined based on the abnormal reporting attribute in the second source code, and the abnormal situation is reported.

8. An image processing device, characterized in that: The device comprises: A determination module, configured to, in response to a processing request for an image, determine a platform environment for processing the image when the image is a vector image described by a first grammar; An acquisition module, used to acquire a first mapping relationship between a first grammar and a second grammar on a first attribute, and a second mapping relationship between the first grammar and the second grammar on a second attribute corresponding to the platform environment; A conversion module is used to convert the description syntax of the image from the first syntax to the second syntax based on the first mapping relationship and the second mapping relationship, and perform the operation requested by the processing request on the image described by the second syntax based on the platform environment.

9. An electronic device, characterized in that: The electronic device comprises: A memory for storing computer executable instructions or computer programs; A processor, configured to implement the method according to any one of claims 1 to 7 when executing computer executable instructions or computer programs stored in the memory.

10. A computer-readable storage medium storing computer-executable instructions or a computer program, characterized in that: When the computer executable instructions or computer programs are executed by a processor, the method according to any one of claims 1 to 7 is implemented.

11. A computer program product comprising computer executable instructions or a computer program, characterized in that: When the computer executable instructions or computer programs are executed by a processor, the method according to any one of claims 1 to 7 is implemented.

Images