CN107066430B - Picture processing method and device, server and client - Google Patents

Picture processing method and device, server and client Download PDF

Info

Publication number
CN107066430B
CN107066430B CN201710266917.XA CN201710266917A CN107066430B CN 107066430 B CN107066430 B CN 107066430B CN 201710266917 A CN201710266917 A CN 201710266917A CN 107066430 B CN107066430 B CN 107066430B
Authority
CN
China
Prior art keywords
file
picture
rendering
rendering code
code file
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710266917.XA
Other languages
Chinese (zh)
Other versions
CN107066430A (en
Inventor
陈锦庆
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Lingxi Interactive Entertainment Co ltd
Original Assignee
Alibaba China Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Alibaba China Co Ltd filed Critical Alibaba China Co Ltd
Priority to CN201710266917.XA priority Critical patent/CN107066430B/en
Publication of CN107066430A publication Critical patent/CN107066430A/en
Application granted granted Critical
Publication of CN107066430B publication Critical patent/CN107066430B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/151Transformation
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/957Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

The invention relates to the technical field of computers, and provides a picture processing method, a picture processing device, a server and a client, wherein the server acquires a first picture file of the client and converts the first picture file into a rendering code file; and the client downloads the rendering code file from the server, responds to the operation of the user, runs the rendering code file, and renders and draws the rendering code file to obtain a second picture file. Compared with the existing raster graph, the method can effectively reduce the size of occupied memory, simultaneously can amplify the picture without distortion, and has the advantages of high loading speed, capability of locally modifying rendering commands, support of nine graphs and high rendering efficiency of complex pictures compared with the existing mode of analyzing the file information of the SVG picture by traversing the tree structure of the XML.

Description

Picture processing method and device, server and client
Technical Field
The invention relates to the technical field of computers, in particular to a picture processing method, a picture processing device, a server and a client.
Background
At present, mobile phone applications are continuously developed along with self services, contents are continuously rich, used local picture resources are continuously increased, finally, the size of an installation package is increased, memory occupation is increased, page loading speed is reduced, memory management of pictures is optimized by some open-source pictures, but some local pictures are not essentially optimized, multi-resolution adaptation is also considered for Android local pictures, if pictures with the highest definition are displayed by the smallest memory on models with various resolutions, multiple resolution pictures are needed, resource redundancy is caused, and SVG (Scalable Vector Graphics) Vector diagrams can solve the problems.
However, the disadvantages of using an SVG vector diagram by Android at present are mainly slow loading speed and low rendering efficiency of complex pictures, because an SVG picture file needs to be read and parsed at run time, the SVG file is a readable XML (Extensible Markup Language) file, a tree structure of XML needs to be traversed to parse corresponding information during parsing, and a corresponding memory needs to be allocated to cache the information, the process is several times slower than the parsing of a raster diagram, in addition, a special raster diagram such as nine diagrams is provided on Android, and the SVG protocol itself does not have the concept of nine diagrams.
Disclosure of Invention
The present invention provides a method, an apparatus, a server and a client for processing an image, so as to solve the above problem.
In order to achieve the above purpose, the embodiment of the present invention adopts the following technical solutions:
in a first aspect, an embodiment of the present invention provides an image processing method, which is applied to a server communicating with a client, where the method includes: acquiring a first picture file of a client, wherein the first picture file is a picture file based on a markup language; and converting the first picture file into a rendering code file so as to render and draw the rendering code file when the rendering code file is operated at a client side to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
In a second aspect, an embodiment of the present invention provides an image processing method, which is applied to a client communicating with a server, where the method includes: downloading a rendering code file from a server, wherein the rendering code file is converted from a first picture file, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language; and responding to the user operation, running the rendering code file, and rendering and drawing the rendering code file to obtain a second picture file.
In a third aspect, an embodiment of the present invention provides an image processing apparatus, which is applied to a server communicating with a client, where the apparatus includes: the system comprises a picture acquisition module, a picture processing module and a picture processing module, wherein the picture acquisition module is used for acquiring a first picture file of a client, and the first picture file is a picture file based on a markup language; and the file conversion module is used for converting the first picture file into a rendering code file so as to render and draw the rendering code file when the rendering code file is operated at the client side to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
In a fourth aspect, an embodiment of the present invention provides an image processing apparatus, which is applied to a client communicating with a server, where the apparatus includes: the file downloading module is used for downloading the rendering code file from the server, wherein the rendering code file is converted from a first picture file, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language; and the picture rendering module is used for responding to user operation, operating the rendering code file and rendering and drawing the rendering code file to obtain a second picture file.
In a fifth aspect, an embodiment of the present invention provides a server, where the server includes a first memory, a first processor, and a picture processing apparatus, where the picture processing apparatus is installed in the first memory and includes one or more software function modules executed by the first processor, and includes: the system comprises a picture acquisition module, a picture processing module and a picture processing module, wherein the picture acquisition module is used for acquiring a first picture file of a client, and the first picture file is a picture file based on a markup language; and the file conversion module is used for converting the first picture file into a rendering code file so as to render and draw the rendering code file when the rendering code file is operated at the client side to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
In a sixth aspect, an embodiment of the present invention provides a client, where the client includes a second memory, a second processor, and a picture processing apparatus, where the picture processing apparatus is installed in the second memory and includes one or more software function modules executed by the second processor, and includes: the file downloading module is used for downloading the rendering code file from the server, wherein the rendering code file is converted from a first picture file, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language; and the picture rendering module is used for responding to user operation, operating the rendering code file and rendering and drawing the rendering code file to obtain a second picture file.
Compared with the prior art, the invention has the following beneficial effects: according to the picture processing method, the device, the server and the client, the server converts the first picture file based on the markup language into the rendering file code formed by the non-markup language, then packages the rendering file code into the application program installation package, and runs the application program after the application program installation package is downloaded and installed by the server, so that the rendering file code is rendered and drawn to obtain the second picture file.
In order to make the aforementioned and other objects, features and advantages of the present invention comprehensible, preferred embodiments accompanied with figures are described in detail below.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings needed to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present invention and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained according to the drawings without inventive efforts.
Fig. 1 is a schematic diagram illustrating interaction between a server and a client according to an embodiment of the present invention.
Fig. 2 is a block diagram illustrating a server according to an embodiment of the present invention.
Fig. 3 is a block diagram illustrating a client according to an embodiment of the present invention.
Fig. 4 is a flowchart illustrating a picture processing method when the method is applied to a server and a client that are communicatively connected to each other according to an embodiment of the present invention.
Fig. 5 is a flowchart illustrating sub-steps of step S102 shown in fig. 4.
Fig. 6 is a flowchart of sub-steps of sub-step S1021 shown in fig. 5.
Fig. 7 is a flowchart illustrating sub-steps of step S104 shown in fig. 4.
Fig. 8 is a flowchart of sub-steps of sub-step S1043 shown in fig. 7.
Fig. 9 is a flowchart of sub-steps of sub-step S1045 shown in fig. 7.
Fig. 10 is a flowchart of sub-steps of sub-step S10452 shown in fig. 9.
Fig. 11 is a block diagram illustrating a first picture processing apparatus according to an embodiment of the present invention.
Fig. 12 is a block diagram illustrating a file conversion module in the first picture processing apparatus shown in fig. 11.
Fig. 13 is a block diagram illustrating a file converting unit in the file converting module shown in fig. 12.
Fig. 14 is a block diagram illustrating a second picture processing apparatus according to an embodiment of the present invention.
Fig. 15 is a block diagram illustrating a picture rendering module in the second picture processing apparatus shown in fig. 14.
Fig. 16 is a block diagram illustrating a modification unit in the picture rendering module shown in fig. 15.
Fig. 17 is a block diagram illustrating a picture rendering unit in the picture rendering module shown in fig. 15.
Fig. 18 is a block diagram illustrating a seventh sub-execution unit in the picture rendering unit shown in fig. 17.
Icon: 100-a server; 110-a first picture processing device; 120-a first memory; 130-a first processor; 140-a first communication unit; 111-picture acquisition module; 112-file conversion module; 1121-file conversion unit; 1122-a code generation unit; 1123-primitive attribute obtaining unit; 1124-a computing unit; 1125-file storage unit; 1126-address storage unit; 11211 — a first sub-execution unit; 11212-a second sub-execution unit; 11213-a third sub-execution unit; 200-a client; 210-a second picture processing device; 211-file download module; 212-a picture rendering module; 2121-address load unit; 2122-a code acquisition unit; 2123-a modification unit; 2124-a region determination unit; 2125-a picture rendering unit; 21231-a fourth sub-execution unit; 21232-a fifth sub-execution unit; 21251-a sixth sub-execution unit; 21252-seventh sub-execution unit; 21253-eighth sub-execution unit; 212521-coordinate calculation unit; 212522-a stretching unit; 212523-coordinate determining unit; 220-a second memory; 230-a memory controller; 240-a second processor; 250-peripheral interfaces; 260-a second communication unit; 270-a radio frequency unit; 280-a display screen; 300-a network; 400-application program.
Detailed Description
The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. The components of embodiments of the present invention generally described and illustrated in the figures herein may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present invention, presented in the figures, is not intended to limit the scope of the invention, as claimed, but is merely representative of selected embodiments of the invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the present invention without making any creative effort, shall fall within the protection scope of the present invention.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures. Meanwhile, in the description of the present invention, the terms "first", "second", and the like are used only for distinguishing the description, and are not to be construed as indicating or implying relative importance.
Referring to fig. 1, fig. 1 is an interaction diagram illustrating a server 100 and at least one client 200 according to a preferred embodiment of the present invention. The server 100 can communicate with the client 200 through the network 300 to realize data communication or interaction between the server 100 and the client 200. The server 100 may provide at least one installation package of the application 400 suitable for various operating systems for downloading by the client 200. After the client 200 accesses the server 100 through the network 300, the application 400 is installed in the client 200 by downloading an installation package of the application 400 suitable for the operating system of the client 200 from the server 100 through the network 300.
In the embodiment of the present invention, the server 100 is a web server. The client 200 may be, but is not limited to, a smart phone, a Personal Computer (PC), a tablet PC, a Personal Digital Assistant (PDA), a Mobile Internet Device (MID), and the like. The operating system of the client 200 may be, but is not limited to, an Android system, an IOS (iPhone operating system) system, a Windows phone system, a Windows system, and the like. The application 400 may be any application provided by the server 100 and capable of being custom downloaded and installed by the client 200, and preferably, in this embodiment, the application 400 may be various applications including pictures.
Referring to fig. 2, fig. 2 is a block diagram illustrating a server 100 according to an embodiment of the present invention. The server 100 includes a first image processing apparatus 110, a first memory 120, a first processor 130 and a first communication unit 140.
The elements of the first memory 120, the first processor 130 and the first communication unit 140 are electrically connected to each other directly or indirectly to realize data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The first picture processing device 110 includes at least one software function module which can be stored in the first memory 120 in the form of software or firmware (firmware) or solidified in an Operating System (OS) of the server 100. The first processor 130 is used for executing executable modules stored in the first memory 120, such as software functional modules and computer programs included in the first picture processing device 110.
The first Memory 120 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The first memory 120 is used for storing a program, and the first processor 130 executes the program after receiving the execution instruction. The first communication unit 140 is configured to establish a communication connection between the server 100 and the client 200 through the network 300, and is configured to send and receive data through the network 300.
Referring to fig. 3, fig. 3 is a block diagram illustrating a client 200 according to an embodiment of the present invention. The client 200 includes a second picture processing device 210, a second memory 220, a storage controller 230, a second processor 240, a peripheral interface 250, a second communication unit 260, a radio frequency unit 270, and a display screen 280.
The second memory 220, the memory controller 230, the second processor 240, the peripheral interface 250, the second communication unit 260, the radio frequency unit 270 and the display screen 280 are electrically connected to each other directly or indirectly to realize data transmission or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The second picture processing device 210 includes at least one software function module which may be stored in the second memory 220 in the form of software or firmware (firmware) or solidified in an Operating System (OS) of the client 200. The second memory 220 stores the application 400 downloaded and installed from the server 100 by the client 200. The second processor 240 is configured to execute an executable module stored in the second memory 220, such as a software functional module or a computer program included in the second picture processing device 210.
The second Memory 220 may be, but is not limited to, a Random Access Memory (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. Wherein the second memory 220 is used for storing programs, the second processor 240 executes the programs after receiving execution instructions, and the access of the second processor 240 and other possible components to the second memory 220 can be performed under the control of the storage controller 230.
The second processor 240 may be an integrated circuit chip having signal processing capabilities. The second Processor 240 may be a general-purpose Processor including a Central Processing Unit (CPU), a Network Processor (NP), a voice Processor, a video Processor, and the like; but may also be a digital signal processor, an application specific integrated circuit, a field programmable gate array or other programmable logic device, discrete gate or transistor logic, discrete hardware components. The various methods, steps and logic blocks disclosed in the embodiments of the present invention may be implemented or performed. A general purpose processor may be a microprocessor or the second processor 240 may be any conventional processor or the like.
The peripheral interface 250 is used to couple various input/output devices to the second processor 240 and the second memory 220. In some embodiments, the peripheral interface 250, the second processor 240, and the memory controller 230 may be implemented in a single chip. In other examples, they may be implemented separately from the individual chips.
The rf unit 270 is used for receiving and transmitting radio wave signals (e.g., electromagnetic waves) to realize interconversion between radio waves and electrical signals, so as to realize wireless communication between the client 200 and the network 300 or other communication devices.
The second communication unit 260 is configured to establish a connection with the server 100 through the network 300, so as to implement a communication connection between the server 100 and the client 200. For example, the second communication unit 260 may be connected to the network 300 by using the radio frequency signal transmitted by the radio frequency unit 270, and further establish a communication connection with the server 100 through the network 300.
The display screen 280 is used for displaying the second picture file processed by the second picture processing device 210 of the client 200.
First embodiment
Referring to fig. 4, fig. 4 is a flowchart illustrating a picture processing method when the method is applied to a server 100 and a client 200 that are communicatively connected with each other according to an embodiment of the present invention. The picture processing method comprises the following steps:
step S101, a first picture file of a client is obtained, wherein the first picture file is a picture file based on a markup language.
In the embodiment of the present invention, the first picture file may be pre-stored in a raw directory of the application 400 installed in the client 200, and is a picture file of the application 400 itself, that is, a picture required for loading a runtime interface of the application 400, and the server 100 may directly obtain the first picture file in the raw directory through the network 300, where the first picture file may be, but is not limited to, a picture based on a markup Language such as XML (extensible markup Language) or HTML (hypertext markup Language),
in the embodiment of the present invention, the first picture file may be, but is not limited to, a picture resource that needs to be used in the running process of the application 400, such as a UC browser, a wechat, and the like, and for example, the first picture file may be a control such as "determine", "complete", and the like, or an icon of a message box, a friend added, and the like. As an embodiment, the first picture file may be a picture file in SVG format, which is a graphic format based on XML language for describing two-dimensional vector graphics.
Step S102, converting the first picture file into a rendering code file, and rendering and drawing the rendering code file when the rendering code file is operated at the client to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
In the embodiment of the present invention, in order to solve the problem of slow loading of the picture file in the SVG format, the first picture file may be converted into a rendering file code by converting a markup language into a non-markup language, for example, the picture file in the SVG format may be converted into a code file composed of non-markup languages such as Java, C, and C + +, as an implementation, after the picture file in the SVG format in the raw directory is read, the XML code is converted into a Java code by using an Android native SVG parser or an open source SVG parser, and after the picture file in the SVG format is converted into the rendering code file, the rendering code file is packaged into an application code, and the application code may be, but is not limited to, an installation package of the application 400 such as a UC browser and a wechat.
Referring to fig. 5, the first picture file is a picture file in SVG format, and step S102 further includes the following sub-steps:
and a substep S1021, converting the picture file in the SVG format to generate a feature code.
In the embodiment of the invention, the picture file can be converted by a code language conversion mode, for example, the picture file in the SVG format is an XML code, and the XML code can be converted into the abstract syntax tree firstly, and then the abstract syntax tree is converted into a code in the Java format.
As an embodiment, in order to reduce resources and time consumed by code conversion, the feature part of the SVG format picture file may be converted into Java code, which is generated by converting a feature part of a picture file in other SVG format, where the picture file in other SVG format is a picture file in SVG format that has been converted before the first picture file is converted, and has the same code as the first picture file, and then the code of the same part does not need to be converted again when the first picture file is converted, only the different part is converted, and then the converted part and the code of the same part are combined into a complete feature code corresponding to the first picture file.
In the embodiment of the invention, the feature code can be, but is not limited to, Java code generated by converting the feature part of one SVG format picture file different from other SVG format picture files.
Referring to fig. 6, the sub-step S1021 further includes the following sub-steps:
in sub-step S10211, when the picture file in SVG format corresponds to the nine-icon mark, the nine-icon mark is parsed into nine-icon attribute information.
In the embodiment of the present invention, the nine-icon mark may be self-defined, for example, a rectangular frame may be marked on the picture in the SVG format, the rectangular frame is the nine-icon mark, a nine-icon content area is located in the rectangular frame, the nine-icon mark is analyzed as nine-icon attribute information, which may be coordinate values of pixel points located at four corners of the rectangular frame on the picture file, the nine-icon attribute information reflects the nine-icon content area in the picture file in the SVG format, the nine-icon attribute information is defined as niematch, if the niematch is (l40, 48t56, 57r10, 78b0, 92), the picture size is 92 × 88, then l40, 48 is left black-edge information, and indicates that the vertically stretched area is the 40 th to 48 th pixel points; t56, 57 is upper black edge information indicating that the horizontal stretching region is the 56 th to 57 th pixel points; r10, 78 is right black edge information, which indicates that the content area in the vertical direction is the 10 th to 78 th pixel points, the 0 th to 10 th pixel points and the 78 th to 88 th pixel points are edge distances, and the content is not displayed; b0 and 92 are lower black side information indicating that the content area in the horizontal direction is the 0 th to 92 th pixel points.
The substep S10212 converts the picture file in the SVG format into a first code file.
In the embodiment of the present invention, the first code file may be, but is not limited to, a Java code generated by converting picture contents other than the nine-picture content area in a picture file in SVG format having nine-picture marks, that is, converting picture parts other than the nine-picture marks in the picture file in SVG format.
The substep S10213 adds the nine-map attribute information to the first code file to obtain the feature code.
In the embodiment of the invention, the left/upper black side information in the nine-figure attribute information is analyzed to generate the logic code which needs to be calculated when the logic code is stretched, the right/lower black side information is analyzed to generate the corresponding content margin code, and the logic code and the content margin code are added into the first code file, so that the feature code can be obtained.
And a substep S1022, acquiring the same type of primitive attributes of the picture files in the SVG format.
In the embodiment of the present invention, primitive attributes of the same type of the picture file may be obtained according to a tree structure of XML, and the primitive attributes of the same type may be, but are not limited to, a color attribute of a primitive, a shape attribute of a primitive, a gradient attribute of a primitive, and the like.
And a substep S1023 of calculating attribute values of the attributes of the primitives with the same type, wherein the attribute values form an attribute array, and the attribute array is added into the feature code.
In the embodiment of the present invention, the attribute values of the primitive attributes of the same type may be, but are not limited to, values of color attributes of the primitive, shape attributes of the primitive, and the like, for example, if the color of a certain primitive is red, the attribute value, that is, the RGB value of red is (1,0,0), and for the shape of the primitive, the coordinate values of the pixel points of the primitive outline need to be read.
And a substep S1024 of applying the feature codes to a preset SVG code template to generate a rendering code file, wherein the rendering code file is composed of Java codes.
As an embodiment, since the converted rendering file code will be a Java class, and a part of the content is public, in order to improve the efficiency of code conversion, an SVG code template can be predefined, and the SVG code template can be, but is not limited to, a public code part of a plurality of rendering code files, such as the beginning and end parts of a Java class. The SVG code template comprises a common template and a nine-figure template, wherein the common template is used for outputting rendering file codes of picture files in the SVG format without nine-figure marks, and the nine-figure template is used for outputting rendering file codes of picture files in the SVG format with nine-figure marks.
In the embodiment of the invention, the number of the picture files in the SVG format is multiple, and the multiple picture files in the SVG format respectively generate multiple rendering code files in one-to-one correspondence.
In sub-step S1025, the plurality of rendering code files are stored in a pre-designated resource directory.
In the embodiment of the present invention, each rendering code file is first encapsulated, then a plurality of encapsulated rendering code files are stored in a pre-specified resource directory, and then the resource directory is encapsulated in an installation package of the application program 400, so that codes can be simplified, and each rendering code file is encapsulated, so that confusion can be performed, where a resource directory refers to a resource directory specified by the application program 400, for example, a resource directory specified by a UC browser, and is only encapsulated in an installation package of the UC browser.
It should be noted that the size of the picture file in the SVG format is still very small after being converted into the rendering code file, and the rendered code file is reduced in size and even smaller than the picture file in the SVG format, so that the size of the installation package can be reduced, 134 picture files in the SVG format are replaced in an actual project, and the size of picture resources is reduced by about 75%.
In the embodiment of the present invention, in addition to storing a plurality of rendering code files in a pre-specified resource directory, rendering objects for drawing the rendering code files need to be cached in a rendering object pool, where the rendering objects may be, but are not limited to, a matrix, a rectangle, a brush, a path, and the like, the corresponding rendering object pool may be, but is not limited to, a matrix object pool, a rectangle object pool, a brush object pool, a path object pool, and the like, the rendering objects and the rendering object pools correspond one to one, because the drawing of each rendering code file requires a plurality of matrix objects, rectangle objects, brush objects, path objects, and the like, and the usage number of each rendering object is related to the content of the rendering code file, if each rendering code file holds a corresponding rendering object, there is a certain memory overhead and performance loss of frequently creating rendering objects, in order to reuse memory as much as possible, establishing a rendering object cache pool mechanism, instantiating a certain number of rendering objects in advance and placing the rendering objects into a cache pool, wherein the used rendering objects are all taken from the rendering object pool when the rendering of the rendering code file is executed, and only when the rendering code file is complex and the rendering objects required to be used exceed the rendering object pool, dynamically creating corresponding rendering objects.
It should be noted that, in the embodiment of the present invention, because a render object cache mechanism is provided for multiplexing all render code files, the memory usage after conversion into a render code file is much smaller than that of a dynamically resolved SVG vector diagram, for example, the memory of an SVG vector diagram is about 0.8k, the memory of a raster diagram is proportional to the size of a picture, the icon level is about ten to tens of k, and the large diagram level is even hundreds of k.
And a substep S1026, obtaining corresponding storage addresses of the plurality of rendering code files in the resource directory, and adding the storage addresses corresponding to the plurality of rendering code files into a preset address mapping table.
As an implementation manner, after a certain rendering code file is stored in a resource directory, the resource directory generates a storage address of the rendering code file, reads the storage address, and stores the storage address into a preset address mapping table.
Step S103, downloading a rendering code file from the server, wherein the rendering code file is converted from a first picture file, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language.
In the embodiment of the present invention, when a certain client 200 needs to install the application 400, or the application 400 installed in a certain client 200 needs to be updated, the client 200 downloads an installation package of the application 400 including the rendering code file from the server 100, and installs the installation package.
And step S104, responding to the user operation, operating the rendering code file, and rendering and drawing the rendering code file to obtain a second picture file.
In the embodiment of the present invention, the manner of responding to the user operation may be, but is not limited to, when the user clicks an icon of the application program 400 installed in the client 200, so that the application program code including the rendering code file runs, the rendering code file is run, and the rendering code file is rendered and drawn to obtain the second picture file, and the user operation may be generated when the application program 400 runs, so that the interface loading using the SVG picture is required, as an implementation manner, the second picture file may be a picture displayed on the display screen 280 of the client 200.
Referring to fig. 7, the sub-step S104 further includes the following sub-steps:
and a substep S1041 of obtaining a storage address corresponding to any one rendering code file in the address mapping table in response to a user operation.
In the embodiment of the present invention, when a user clicks a certain installation application 400, so that an application code of the application 400 runs, a storage address corresponding to any one rendering code file in the address mapping table may be obtained.
It should be noted that, in the embodiment of the present invention, since the picture file in the SVG format is converted into the render code file, the second picture file can be directly drawn without any IO operation during loading, and the raster image needs to be operated to perform IO operation to read resources, if the nine images also need to analyze information of the nine images, the loading speed of the picture processing method provided by the present invention is much faster than that of the raster image, in an actual project, the gray data statistics shows that the first loading speed of the second picture file is more than 8 times faster than that of the raster image, and not for the first time, the second picture file is cached and is basically equal.
And a substep S1042, obtaining the rendering code file corresponding to the storage address in the resource directory according to the storage address corresponding to any one rendering code file.
And a substep S1043 of executing an attribute modification operation when the rendering code file needs to modify the primitive attribute.
In the embodiment of the invention, if the same icon is multiplexed for multiple times, the primitive attributes are required to be modified, when the primitive attributes in the rendering code file are modified, the adjacent primitives with the same attribute value are combined together to be defined as a layer, and a layer modification interface is added.
It should be noted that, the modification of the attribute value may be, but is not limited to, modification before the rendering of the rendering code file head, or modification in any time period during the rendering process, as long as it is ensured that the view is refreshed after the attribute value is modified, in addition, since the SVG format picture file is converted into the rendering code file and stored in the resource directory, the same name rendering code file may be used, in order to avoid affecting other same name rendering code files when the primitive attribute in one rendering code file is modified, and in the process of performing the attribute modification operation, a picture object corresponding to the rendering code file must be copied first, and then the attribute modification is performed. In addition, because the primitive attributes can be modified, if a plurality of similar SVG format picture files only have different primitive colors or different special effects, the same picture can be multiplexed, and only different primitive attributes need to be modified.
Referring to fig. 8, the sub-step S1043 further includes the following sub-steps:
and a substep S10431 of responding to the user operation, operating the rendering code file and acquiring the attribute array.
In the embodiment of the present invention, the attribute array may be, but is not limited to, an array composed of attribute values of colors, shapes, and the like of the background primitive or the non-background primitive.
And a substep S10432, modifying the attribute values of the attributes of the primitives with the same type in the attribute array.
In the embodiment of the present invention, after the attribute value of the primitive attribute is modified, the primitive attribute is changed accordingly, for example, the RGB value of a certain primitive is modified from (1,0,0) to (1, 1, 0), and the color of the primitive changes from red to yellow accordingly. In addition, when the attribute values of a plurality of adjacent primitive attributes of the same type in the attribute array are the same, the primitive attributes of the same type are set as a primitive set, and batch modification of the attribute values of the primitive attributes of the same type is realized by modifying the attribute values of the primitive set. For example, a background primitive of a certain picture is yellow, 3 adjacent primitives, namely a primitive 1, a primitive 2 and a primitive 3 are provided in a non-background primitive, and the colors of the primitive 1, the primitive 2 and the primitive 3 are all red, the primitive 1, the primitive 2 and the primitive 3 can be used as a layer, and when the colors of the primitive 1, the primitive 2 and the primitive 3 are all required to be modified to be blue, the colors of the primitive 1, the primitive 2 and the primitive 3 can be all changed to be blue only by modifying the attribute value from (1,0,0) to (0,0,1) through a layer modification interface.
And a substep S1044, when the rendering code file includes the nine-figure attribute information, determining a nine-figure content area in the second picture file to be rendered according to the nine-figure attribute information.
In the embodiment of the present invention, the nine-figure content area may be, but is not limited to, a stretched area determined by a margin value of the vertical-direction stretched area l and a margin value of the horizontal-direction stretched area t, and a content area determined by a margin value of the vertical-direction content margin r and a margin value of the horizontal-direction content margin b.
And in the substep S1045, operating the rendering code file, and rendering and drawing the rendering code file to obtain a second picture file.
Referring to fig. 9, the sub-step S1045 further includes the following sub-steps:
in sub-step S10451, a scaling factor is obtained.
In the embodiment of the present invention, the scaling factor is set according to the resolution of the client 200, the resolution of the client 200 may be obtained by copying a Display code in an Android system view directory, and the setting standard of the scaling factor is such that when the second picture file is displayed on the client 200, the amplification is not distorted.
In the sub-step S10452, the vertex coordinates of the second picture file to be rendered are determined according to the scaling factor.
In the embodiment of the present invention, the vertex coordinates of the second picture file to be rendered may be, but are not limited to, a product of a scaling factor and original vertex coordinates of the second picture file, in other words, the vertex coordinates of the second picture file to be rendered are first read, and the vertex coordinates are multiplied by the scaling factor to obtain vertex coordinates of the second picture file to be rendered, where the vertex coordinates are the vertex coordinates after scaling.
Referring to fig. 10, the sub-step S10452 further includes the following sub-steps:
in sub-step S104521, when the second picture file to be rendered includes a nine-picture content region, the coordinates of the target vertex of the nine-picture content region after the nine-picture stretching operation are calculated.
In the embodiment of the present invention, the target vertex of the nine-diagram content area after the nine-diagram stretching operation is (PathX, PathY), and
PathX=OrgPathX+(DawableW–OrgW)*LeftTopBWS/TopBWS;
PathY=OrgPathY+(DawableH–OrgH)*TopLeftBWS/LeftBWS;
wherein, OrgPathX/Y is vertex coordinates of the nine-diagram content area when not stretched, DrawableW/H is width/height of a control on the client 200, which is dynamically obtained when the client 200 runs, OrgW/H is width/height of the nine-diagram content area when not stretched, topbwws is total specific gravity of a black border on the nine-diagram content area when not stretched, LeftBWS is total specific gravity of a left black border on the nine-diagram content area to the left of the vertex when not stretched, lefttoptopbww is total specific gravity of a black border on the nine-diagram content area to the left of the vertex when not stretched, and TopLeftBWS is total specific gravity of a left black border on the nine-diagram content area above the vertex when not stretched.
Through the above calculation, the coordinates of the target vertex of the nine-map content area after the nine-map stretching operation can be calculated, and the coordinates of the target vertex do not fall on the upper/left black side normally, and if the coordinates of the target vertex fall on the upper/left black side, the following correction is needed:
PathXTopBL=OrgPathX–CurTopBLeftX;
PathYLeftBL=OrgPathY–CurLeftBTopY;
FixPathX=PathX+(DawableW–OrgW)*(CurTopBW/TopBWS)*(PathXTopBL/CurTopBL);
FixPathY=PathY+(DawableH–OrgH)*(CurLeftBW/LeftBWS)*(PathYLeftBL/CurLeftBL);
the FixPathX/Y is a coordinate correction result value of the target vertex, the CurTopBL is a black edge length on the un-stretched nine-figure content region, the CurLeftBL is a left black edge length of the un-stretched nine-figure content region, the CurTopBLeftX is a black edge left endpoint x coordinate on the un-stretched nine-figure content region, the CurLeftBTopY is an endpoint Y coordinate on the un-stretched nine-figure content region left black edge, PathXTopBL is a length of the target vertex x coordinate on the black edge, PathLeftBL is a length of the target vertex Y coordinate on the left black edge, CurTopBW is a black edge specific gravity on the nine-figure where the target vertex x is located, CurLeftBW is a left black edge specific gravity of the nine-figure where the target Path vertex Y is located, and Path is a graph Path.
And a substep S104522 of stretching the second picture file to be rendered according to the coordinates of the target vertex.
In the embodiment of the present invention, the target vertex is a pixel coordinate point after the nine-picture stretching operation, the screen vertex coordinate corresponding to the target vertex needs to be calculated when rendering the second picture file, the screen vertex is a product of the target vertex and a pixel density coefficient, and the pixel density coefficient is related to the resolution of the client 200.
In the sub-step S104523, the vertex coordinates of the graph of the second picture file to be rendered after the nine-picture stretching operation are determined according to the scaling coefficient.
In the sub-step S10453, the rendering code file is executed based on the vertex coordinates to obtain a second picture file.
In the embodiment of the invention, the rendering code file is rendered and drawn to obtain the second picture file according to the zoomed vertex coordinates, and the vertex is firstly zoomed and then drawn, so that the second picture file can not be distorted after being enlarged.
Firstly, converting a plurality of picture files in an SVG format into a plurality of rendering code files in one-to-one correspondence respectively, and packaging each rendering code file respectively, so that code simplification is realized, and the size of occupied memory can be effectively reduced; secondly, in the process of converting the rendering code file, an SVG code template is introduced, and a public code part of the rendering code file is reused for multiple times, so that the code conversion speed is improved; thirdly, a rendering object caching mechanism is arranged, rendering objects for drawing rendering code files are cached in a rendering object pool, all the rendering code files can be reused, and the rendering efficiency is improved; fourthly, calculating attribute values of the attributes of the same type of primitives to form an attribute array, dynamically modifying the attributes of the primitives during rendering, highly multiplexing picture resources, enhancing the flexibility of the pictures and solving the problem of resource redundancy; fifthly, the problem of undistorted amplification of the second picture file is solved by a picture rendering mode of firstly zooming the vertex coordinates and then drawing the picture, and the support of the SVG on the nine pictures is solved by customizing the nine-picture marks on the picture file in the SVG format and realizing the analysis of the nine-picture marks; compared with the existing mode of traversing the tree structure of the XML to analyze the file information of the SVG picture, the method has the advantages of high loading speed and high rendering efficiency of the complex picture.
Second embodiment
Referring to fig. 11, fig. 11 is a block diagram illustrating a first image processing apparatus 110 according to an embodiment of the present invention. The first image processing apparatus 110 includes an image obtaining module 111 and a file conversion module 112.
The image obtaining module 111 is configured to obtain a first image file of the client, where the first image file is an image file based on a markup language.
In this embodiment of the present invention, the picture obtaining module 111 may be configured to execute step S101.
And the file conversion module 112 is configured to convert the first picture file into a rendering code file, so that when the rendering code file is run at the client, the rendering code file is rendered and drawn to obtain a second picture file, where the rendering code file is composed of a non-markup language.
In an embodiment of the present invention, the file conversion module 112 may be configured to execute step S102.
Referring to fig. 12, fig. 12 is a block diagram illustrating a file conversion module 112 in the first image processing apparatus 110 shown in fig. 11. The file conversion module 112 includes a file conversion unit 1121, a code generation unit 1122, a primitive attribute acquisition unit 1123, a calculation unit 1124, a file storage unit 1125, and an address storage unit 1126.
The file conversion unit 1121 is configured to convert a picture file in an SVG format to generate a feature code.
In an embodiment of the present invention, the file conversion unit 1121 may be configured to perform the sub-step S1021.
Referring to fig. 13, fig. 13 is a block diagram illustrating a file conversion unit 1121 in the file conversion module 112 shown in fig. 12. The file conversion unit 1121 includes a first sub-execution unit 11211, a second sub-execution unit 11212, and a third sub-execution unit 11213.
And a first sub-execution unit 11211, configured to parse the nine icons into nine icon attribute information when the picture file in the SVG format corresponds to the nine icons.
In an embodiment of the present invention, the first sub-execution unit 11211 may be configured to execute the sub-step S10211.
And a second sub-execution unit 11212, configured to convert the picture file in the SVG format into a first code file.
In an embodiment of the present invention, the second sub-execution unit 11212 may be configured to execute the sub-step S10212.
A third sub-execution unit 11213, configured to add the nine-map attribute information to the first code file to obtain the feature code.
In an embodiment of the present invention, the third sub-execution unit 11213 may be configured to execute the sub-step S10213.
The code generating unit 1122 is configured to obtain the same type of primitive attributes of the picture files in the SVG format.
In an embodiment of the present invention, the code generating unit 1122 may be used to perform sub-step S1022.
And the primitive attribute obtaining unit 1123 is configured to calculate attribute values of primitive attributes of the same type, where the attribute values form an attribute array, and add the attribute array to the feature code.
In this embodiment of the present invention, the primitive attribute obtaining unit 1123 may be configured to perform sub-step S1023.
And the calculating unit 1124 is configured to apply the feature codes to a preset SVG code template to generate a rendering code file, where the rendering code file is composed of Java codes.
In an embodiment of the present invention, the calculating unit 1124 may be configured to perform the sub-step S1024.
The file storage unit 1125 stores a plurality of rendering code files in a pre-designated resource directory.
In an embodiment of the present invention, the file storage unit 1125 may be used to perform the sub-step S1025.
The address storage unit 1126 is configured to obtain corresponding storage addresses of the multiple rendering code files in the resource directory, and add the storage addresses corresponding to the multiple rendering code files to a preset address mapping table.
In an embodiment of the present invention, address storage unit 1126 may be configured to perform substep S1026.
Referring to fig. 14, fig. 14 is a block diagram illustrating a second image processing apparatus 210 according to an embodiment of the present invention. The second picture processing device 210 includes a file download module 211 and a picture rendering module 212.
The file downloading module 211 is configured to download the rendering code file from the server, where the rendering code file is converted from a first picture file, the first picture file is a markup language-based picture file, and the rendering code file is composed of a non-markup language.
In this embodiment of the present invention, the file downloading module 211 may be configured to execute step S103.
And the picture rendering module 212 is configured to respond to a user operation, run the rendering code file, and render and draw the rendering code file to obtain a second picture file.
In this embodiment of the present invention, the picture rendering module 212 may be configured to execute step S104.
Referring to fig. 15, fig. 15 is a block diagram illustrating a picture rendering module 212 in the second picture processing apparatus 210 shown in fig. 14. The picture rendering module 212 includes an address loading unit 2121, a code acquiring unit 2122, a modifying unit 2123, a region determining unit 2124, and a picture rendering unit 2125.
And the address loading unit 2121 is configured to obtain, in response to a user operation, a storage address corresponding to any one rendering code file in the address mapping table.
In this embodiment of the present invention, the address loading unit 2121 may be configured to perform the sub-step S1041.
The code obtaining unit 2122 is configured to obtain, in the resource directory, a rendering code file corresponding to a storage address corresponding to any one of the rendering code files according to the storage address corresponding to the storage address.
In an embodiment of the present invention, the code obtaining unit 2122 may be configured to perform the sub-step S1042.
And the modifying unit 2123 is configured to perform an attribute modifying operation when the rendering code file needs to modify the primitive attribute.
In an embodiment of the present invention, the modifying unit 2123 may be configured to perform the sub-step S1043.
Referring to fig. 16, fig. 16 is a block diagram illustrating a modification unit 2123 in the picture rendering module 212 shown in fig. 15. The modification unit 2123 includes a fourth sub-execution unit 21231 and a fifth sub-execution unit 21232.
And the fourth sub-execution unit 21231, configured to run the rendering code file in response to a user operation, and obtain the attribute array.
In this embodiment of the present invention, the fourth sub-execution unit 21231 may be configured to execute the sub-step S10431.
And the fifth sub-execution unit 21232 is configured to modify the attribute values of the attributes of the primitives of the same type in the attribute array.
In this embodiment of the present invention, the fifth sub-execution unit 21232 may be configured to execute the sub-step S10432.
And an area determining unit 2124, configured to determine, when the rendering code file includes the nine-map attribute information, a nine-map content area in the second picture file to be rendered according to the nine-map attribute information.
In an embodiment of the present invention, the region determining unit 2124 may be configured to perform the sub-step S1044.
And the picture rendering unit 2125 is configured to run the rendering code file, and perform rendering and drawing on the rendering code file to obtain a second picture file.
In this embodiment of the present invention, the picture rendering unit 2125 may be configured to perform the sub-step S1045.
Referring to fig. 17, fig. 17 is a block diagram illustrating a picture rendering unit 2125 in the picture rendering module 212 shown in fig. 17. The picture rendering unit 2125 includes a sixth sub-execution unit 21251, a seventh sub-execution unit 21252, and an eighth sub-execution unit 21253.
A sixth sub-execution unit 21251 for obtaining the scaling factor.
In this embodiment of the present invention, the sixth sub-execution unit 21251 may be configured to execute the sub-step S10451.
A seventh sub-execution unit 21252, configured to determine, according to the scaling factor, vertex coordinates of the second picture file to be rendered.
In this embodiment of the present invention, the seventh sub-execution unit 21252 may be configured to execute the sub-step S10452.
Referring to fig. 18, fig. 18 is a block diagram illustrating a seventh sub-execution unit 21252 of the picture rendering unit 2125 shown in fig. 17. The seventh sub-execution unit 21252 includes a coordinate calculation unit 212521, a stretching unit 212522, and a coordinate determination unit 212523.
And a coordinate calculation unit 212521, configured to, when the nine-figure content area is included in the second picture file to be rendered, calculate coordinates of a target vertex of the nine-figure content area after the nine-figure stretching operation.
In an embodiment of the present invention, the coordinate calculation unit 212521 may be used to perform the sub-step S104521.
And the stretching unit 212522 is configured to stretch the second picture file to be rendered according to the coordinates of the target vertex.
In an embodiment of the present invention, the stretching unit 212522 may be used to perform sub-step S104522.
A coordinate determining unit 212523, configured to determine, according to the scaling coefficient, a graph vertex coordinate of the second picture file to be rendered after the nine-picture stretching operation.
In an embodiment of the present invention, the coordinate determining unit 212523 may be configured to perform the sub-step S104523.
And an eighth sub-execution unit 21253, configured to run the rendering code file to obtain a second picture file based on the vertex coordinates.
In the embodiment of the present invention, the eighth sub-execution unit 21253 may be configured to execute the sub-step S10453.
In summary, according to the image processing method, the image processing device, the server and the client provided by the invention, the server obtains the first image file of the client, wherein the first image file is an image file based on a markup language, and converts the first image file into a rendering code file, so that when the rendering code file is run at the client, the rendering code file is rendered and drawn to obtain the second image file, wherein the rendering code file is composed of a non-markup language; the client downloads a rendering code file from the server, wherein the rendering code file is converted from a first picture file, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language; and the client responds to the user operation, runs the rendering code file, and renders and draws the rendering code file to obtain a second picture file. Compared with the existing raster graph, the method can effectively reduce the size of occupied memory, simultaneously can amplify the picture without distortion, and has the advantages of high loading speed, capability of locally modifying rendering commands, support of nine graphs and high rendering efficiency of complex pictures compared with the existing mode of analyzing the file information of the SVG picture by traversing the tree structure of the XML.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented in other ways. The apparatus embodiments described above are merely illustrative, and for example, the flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, the functional modules in the embodiments of the present invention may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes. It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention, and various modifications and changes may be made by those skilled in the art. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention should be included in the protection scope of the present invention. It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

Claims (27)

1. A picture processing method is applied to a server side which is communicated with a client side, and the method comprises the following steps:
acquiring a first picture file of a client, wherein the first picture file is a picture file based on a markup language;
and converting the first picture file into a rendering code file so that the client downloads the rendering code file, and rendering and drawing the rendering code file when the rendering code file is operated at the client to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
2. The method of claim 1, wherein said first picture file is a picture file in SVG format, and said step of converting said first picture file into a render code file comprises:
converting the picture file in the SVG format to generate a feature code;
and applying the feature codes to a preset SVG code template to generate a rendering code file, wherein the rendering code file is composed of Java codes.
3. The method of claim 2, wherein the plurality of picture files in the SVG format generate a plurality of rendering code files in one-to-one correspondence, and wherein the step of converting the first picture file into a rendering code file further comprises:
storing a plurality of rendering code files into a pre-designated resource directory;
and acquiring the corresponding storage addresses of the plurality of rendering code files in the resource directory, and adding the storage addresses corresponding to the plurality of rendering code files into a preset address mapping table.
4. The method of claim 2, wherein said step of converting said SVG formatted picture file to generate feature codes comprises:
when the picture file in the SVG format corresponds to a nine-icon mark, analyzing the nine-icon mark into nine-icon attribute information;
converting the picture file in the SVG format into a first code file;
adding the nine-figure attribute information to the first code file to obtain the feature code.
5. The method of claim 2, wherein said step of converting said SVG picture file to generate feature code is followed by the step of:
obtaining the same type of primitive attributes of the picture files in the SVG format;
and calculating the attribute values of the attributes of the primitives with the same type, wherein the attribute values form an attribute array, and the attribute array is added into the feature code.
6. A picture processing method is applied to a client side communicating with a server side, and comprises the following steps:
downloading a rendering code file from the server, wherein the rendering code file is obtained by converting a first picture file through the server, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language;
and responding to user operation, operating the rendering code file, and rendering and drawing the rendering code file to obtain a second picture file.
7. The method of claim 6, wherein said step of executing said rendering code file in response to a user action to render said rendering code file for rendering to obtain a second picture file comprises:
responding to user operation to obtain a storage address corresponding to any one rendering code file in the address mapping table;
acquiring a rendering code file corresponding to the storage address in a resource directory according to the storage address corresponding to any one rendering code file;
and operating the rendering code file, and rendering and drawing the rendering code file to obtain a second picture file.
8. The method of claim 7, wherein after the step of obtaining the rendering code file corresponding to the storage address in the resource directory according to the storage address corresponding to the any one rendering code file, the method further comprises:
and when the rendering code file needs to modify the attributes of the primitives, executing attribute modification operation.
9. The method of claim 8, wherein the attribute modification operation comprises:
responding to user operation, running the rendering code file, and acquiring an attribute array;
and modifying the attribute values of the attributes of the primitives with the same type in the attribute array.
10. The method of claim 9, wherein the step of modifying the attribute values of attributes of primitives of the same type within the attribute array comprises:
when the attribute values of a plurality of adjacent primitive attributes of the same type in the attribute array are the same, setting the primitive attributes of the same type as a primitive set, and modifying the attribute values of the primitive set to realize batch modification of the attribute values of the primitive attributes of the same type.
11. The method of claim 8, wherein the step of performing an attribute modification operation when the render code file requires modification of primitive attributes is further followed by:
and when the rendering code file comprises the nine-figure attribute information, determining a nine-figure content area in the second picture file to be rendered according to the nine-figure attribute information.
12. The method of claim 7, wherein the step of executing the rendering code file, rendering the rendering code file, and drawing a second picture file comprises:
obtaining a scaling coefficient;
determining the vertex coordinates of a second picture file to be rendered according to the scaling coefficient;
and running the rendering code file to obtain a second picture file based on the vertex coordinates.
13. The method of claim 12, wherein the step of determining vertex coordinates of the second picture file to be rendered according to the scaling factor comprises:
when a second picture file to be rendered comprises a nine-picture content area, calculating coordinates of a target vertex of the nine-picture content area after nine-picture stretching operation;
stretching a second picture file to be rendered according to the coordinates of the target vertex;
and determining the graphic vertex coordinates of the second picture file to be rendered after the nine-picture stretching operation according to the scaling coefficient.
14. A picture processing device, which is applied to a server side communicating with a client side, the device comprising:
the system comprises a picture acquisition module, a picture processing module and a picture processing module, wherein the picture acquisition module is used for acquiring a first picture file of a client, and the first picture file is a picture file based on a markup language;
and the file conversion module is used for converting the first picture file into a rendering code file so as to enable the client to download the rendering code file, and rendering and drawing the rendering code file when the rendering code file is operated at the client to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
15. The apparatus of claim 14, wherein the first picture file is a picture file in SVG format, the file conversion module comprising:
the file conversion unit is used for converting the picture file in the SVG format to generate a feature code;
and the code generation unit is used for applying the feature codes to a preset SVG code template to generate a rendering code file.
16. The apparatus of claim 15, wherein the SVG formatted picture files are plural, the plural SVG formatted picture files generate plural one-to-one rendering code files, respectively, the file conversion module further comprising:
the file storage unit is used for storing a plurality of rendering code files into a pre-designated resource directory;
and the address storage unit is used for acquiring the corresponding storage addresses of the plurality of rendering code files in the resource directory and adding the storage addresses corresponding to the plurality of rendering code files into a preset address mapping table.
17. The apparatus of claim 15, wherein the file conversion unit comprises:
the first sub-execution unit is used for analyzing the nine icon marks into nine-icon attribute information when the picture file in the SVG format corresponds to the nine icon marks;
the second sub-execution unit is used for converting the picture file in the SVG format into a first code file;
a third sub-execution unit, configured to add the nine-graph attribute information to the first code file to obtain the feature code.
18. The apparatus of claim 15, wherein the file conversion module further comprises:
the primitive attribute acquiring unit is used for acquiring the primitive attributes of the same type of the picture files in the SVG format;
and the computing unit is used for computing the attribute values of the attributes of the primitives with the same type, forming an attribute array by the attribute values and adding the attribute array into the feature code.
19. A picture processing device, which is applied to a client terminal communicating with a server terminal, the device comprising:
the file downloading module is used for downloading a rendering code file from the server, wherein the rendering code file is obtained by converting a first picture file through the server, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language;
and the picture rendering module is used for operating the rendering code file based on response to user operation, and rendering and drawing the rendering code file to obtain a second picture file.
20. The apparatus of claim 19, wherein the picture rendering module comprises:
the address loading unit is used for responding to user operation to obtain a storage address corresponding to any one rendering code file in the address mapping table;
the code acquisition unit is used for acquiring the rendering code file corresponding to the storage address in the resource directory according to the storage address corresponding to the any one rendering code file;
and the picture rendering unit is used for operating the rendering code file and rendering and drawing the rendering code file to obtain a second picture file.
21. The apparatus of claim 20, wherein the picture rendering module further comprises:
and the modification unit is used for executing attribute modification operation when the rendering code file needs to modify the attribute of the primitive.
22. The apparatus of claim 21, wherein the modifying unit comprises:
the fourth sub-execution unit is used for responding to user operation, running the rendering code file and acquiring the attribute array;
and the fifth sub-execution unit is used for modifying the attribute values of the attributes of the primitives with the same type in the attribute array.
23. The apparatus of claim 21, wherein the picture rendering module further comprises:
and the area determining unit is used for determining a nine-figure content area in the second picture file to be rendered according to the nine-figure attribute information when the rendering code file comprises the nine-figure attribute information.
24. The apparatus of claim 20, wherein the picture rendering unit comprises:
a sixth sub-execution unit, configured to obtain a scaling factor;
the seventh sub-execution unit is used for determining the vertex coordinates of the second picture file to be rendered according to the scaling coefficient;
and the eighth sub-execution unit is used for operating the rendering code to obtain a second picture file based on the vertex coordinates.
25. The apparatus of claim 24, wherein the seventh sub-execution unit comprises:
the coordinate calculation unit is used for calculating the coordinates of a target vertex of the nine-figure content area after the nine-figure stretching operation when the second picture file to be rendered comprises the nine-figure content area;
the stretching unit is used for stretching the second picture file to be rendered according to the coordinates of the target vertex;
and the coordinate determination unit is used for determining the graphic vertex coordinates of the second picture file to be rendered after the nine-picture stretching operation according to the scaling coefficient.
26. A server, characterized in that the server comprises:
a first memory;
a first processor; and
a picture processing device installed in the first memory and including one or more software function modules executed by the first processor, comprising:
the system comprises a picture acquisition module, a picture processing module and a picture processing module, wherein the picture acquisition module is used for acquiring a first picture file of a client, and the first picture file is a picture file based on a markup language;
and the file conversion module is used for converting the first picture file into a rendering code file so as to enable the client to download the rendering code file, and rendering and drawing the rendering code file when the rendering code file is operated so as to obtain a second picture file, wherein the rendering code file is composed of a non-markup language.
27. A client, the client comprising:
a second memory;
a second processor; and
a picture processing device installed in the second memory and including one or more software function modules executed by the second processor, comprising:
the file downloading module is used for downloading a rendering code file from a server, wherein the rendering code file is obtained by converting a first picture file through the server, the first picture file is a picture file based on a markup language, and the rendering code file is composed of a non-markup language;
and the picture rendering module is used for responding to user operation, operating the rendering code file and rendering and drawing the rendering code file to obtain a second picture file.
CN201710266917.XA 2017-04-21 2017-04-21 Picture processing method and device, server and client Active CN107066430B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710266917.XA CN107066430B (en) 2017-04-21 2017-04-21 Picture processing method and device, server and client

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710266917.XA CN107066430B (en) 2017-04-21 2017-04-21 Picture processing method and device, server and client

Publications (2)

Publication Number Publication Date
CN107066430A CN107066430A (en) 2017-08-18
CN107066430B true CN107066430B (en) 2021-02-26

Family

ID=59600224

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710266917.XA Active CN107066430B (en) 2017-04-21 2017-04-21 Picture processing method and device, server and client

Country Status (1)

Country Link
CN (1) CN107066430B (en)

Families Citing this family (16)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107943363B (en) * 2017-11-21 2020-10-02 广州视睿电子科技有限公司 Background image configuration method and device, interactive intelligent panel and storage medium
CN111666318B (en) * 2019-03-05 2023-10-27 阿里巴巴集团控股有限公司 Graph drawing method and device and electronic equipment
CN111724293B (en) 2019-03-22 2023-07-28 华为技术有限公司 Image rendering method and device and electronic equipment
WO2020199216A1 (en) 2019-04-04 2020-10-08 华为技术有限公司 Oscillator and device
CN110175053B (en) * 2019-04-24 2023-10-27 创新先进技术有限公司 Picture loading method and device
CN110263301B (en) * 2019-06-27 2023-12-05 北京百度网讯科技有限公司 Method and device for determining color of text
CN112784188B (en) * 2019-11-07 2022-09-13 武汉金山办公软件有限公司 Page rendering method and device
CN112927312A (en) * 2019-12-05 2021-06-08 广州凡科互联网科技股份有限公司 Novel picture generation method
CN111124579B (en) * 2019-12-24 2023-12-19 北京金山安全软件有限公司 Special effect rendering method and device, electronic equipment and storage medium
CN111178013B (en) * 2019-12-31 2022-10-18 福建天泉教育科技有限公司 Method and terminal for restoring custom coloring effect of picture in PPT
CN113538208A (en) * 2020-04-20 2021-10-22 华为技术有限公司 Picture loading method and related device
CN111897989A (en) * 2020-07-29 2020-11-06 北京字节跳动网络技术有限公司 Image processing method and device, terminal and storage medium
CN112686001B (en) * 2021-01-05 2021-12-03 中科三清科技有限公司 Transformation method and transmission method of meteorological data, server and data transmission system
CN114463766B (en) * 2021-07-16 2023-05-12 荣耀终端有限公司 Table processing method and electronic equipment
CN113704530A (en) * 2021-08-30 2021-11-26 北京思明启创科技有限公司 Image processing method, image processing device, electronic equipment and computer readable storage medium
CN114398125B (en) * 2021-12-31 2024-02-27 深圳市珍爱捷云信息技术有限公司 Point nine effect graph generation method and related device thereof

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101202665A (en) * 2007-12-06 2008-06-18 中兴通讯股份有限公司 Method for generating graphical user interface
CN104616331A (en) * 2015-02-16 2015-05-13 百度在线网络技术(北京)有限公司 Image processing method and device on mobile device
CN104680421A (en) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 Scalable vector graphics (SVG) display method and device
CN105760405A (en) * 2014-12-19 2016-07-13 阿里巴巴集团控股有限公司 Methods and devices for obtaining network resource for loading web page and method and device for caching network resource
CN106021421A (en) * 2016-05-13 2016-10-12 北京视博云科技有限公司 Method and device for accelerating web page rendering
CN106339414A (en) * 2016-08-12 2017-01-18 合网络技术(北京)有限公司 Webpage rendering method and device
CN106484383A (en) * 2015-08-31 2017-03-08 阿里巴巴集团控股有限公司 page rendering method, device and equipment

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7962895B2 (en) * 2006-07-20 2011-06-14 Oracle America, Inc. Language for binding scalable vector graphics elements to java classes
US20080052381A1 (en) * 2006-08-22 2008-02-28 Koon Wah Yu Method and system for selecting a transcoder to convert between content types
CN103713891B (en) * 2012-10-09 2017-11-24 阿里巴巴集团控股有限公司 It is a kind of to carry out the method and apparatus that figure renders on the mobile apparatus
CN103116490B (en) * 2012-12-04 2016-06-29 广州市久邦数码科技有限公司 A kind of based on webpage nine cut drawing drawing method
CN103208093B (en) * 2013-04-22 2016-08-03 四三九九网络股份有限公司 A kind of GPU of solution renders the method and apparatus that big picture load is excessive
CN104216700B (en) * 2013-09-10 2017-05-03 侯金涛 System of cloud-computing-based HTML5 application packaging, installation, unloading and operation method
DE102014225557A1 (en) * 2014-12-11 2016-06-16 Heidelberger Druckmaschinen Ag Method for generating executable applications with dynamic scalable vector graphics
CN105608191A (en) * 2015-12-23 2016-05-25 云南电网有限责任公司 EnersunWebCache based method for dynamically generating cached power grid map tiles

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101202665A (en) * 2007-12-06 2008-06-18 中兴通讯股份有限公司 Method for generating graphical user interface
CN104680421A (en) * 2013-11-26 2015-06-03 浙江大华系统工程有限公司 Scalable vector graphics (SVG) display method and device
CN105760405A (en) * 2014-12-19 2016-07-13 阿里巴巴集团控股有限公司 Methods and devices for obtaining network resource for loading web page and method and device for caching network resource
CN104616331A (en) * 2015-02-16 2015-05-13 百度在线网络技术(北京)有限公司 Image processing method and device on mobile device
CN106484383A (en) * 2015-08-31 2017-03-08 阿里巴巴集团控股有限公司 page rendering method, device and equipment
CN106021421A (en) * 2016-05-13 2016-10-12 北京视博云科技有限公司 Method and device for accelerating web page rendering
CN106339414A (en) * 2016-08-12 2017-01-18 合网络技术(北京)有限公司 Webpage rendering method and device

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
将SVG转化为位图;刘杰 等;《福建电脑》;20071112;第139、109页 *

Also Published As

Publication number Publication date
CN107066430A (en) 2017-08-18

Similar Documents

Publication Publication Date Title
CN107066430B (en) Picture processing method and device, server and client
CN102662616B (en) For screen graph adaptive approach and the system of mobile terminal
US7299411B2 (en) Providing a presentation engine adapted for use by a constrained resource client device
CN111339455A (en) Method and device for loading page first screen by browser application
US10902193B2 (en) Automated generation of web forms using fillable electronic documents
JP2012059275A (en) System and method for digital document processing
US9117314B2 (en) Information output apparatus, method, and recording medium for displaying information on a video display
WO2022063158A1 (en) Local screen adaptation method and device
US20090085921A1 (en) Populate Web-Based Content Based on Space Availability
CN109165364B (en) Page rendering method, device, equipment and storage medium
CN111339458A (en) Page presenting method and device
CN110634171B (en) Device and method for drawing map
JP2006331142A (en) Information provision system, and information provision method or the like
CN110263279B (en) Page generation method and device, electronic equipment and computer readable storage medium
CN111459501A (en) SVG-based Web configuration picture storage and display system, method and medium
US20150262322A1 (en) Rendering of graphics on a display device
CN113742530A (en) System, method, device, processor and storage medium for realizing generation and processing of digital poster picture based on SVG
JP7261732B2 (en) Method and apparatus for determining character color
US10403040B2 (en) Vector graphics rendering techniques
CN109815451B (en) PDF (Portable document Format) generation method, device and equipment
US20100053205A1 (en) Method, apparatus, and system for displaying graphics using html elements
CN117611703A (en) Barrage character rendering method, barrage character rendering device, barrage character rendering equipment, storage medium and program product
CN116010736A (en) Vector icon processing method, device, equipment and storage medium
CN115268904A (en) User interface design file generation method, device, equipment and medium
TW201443666A (en) System and method for displaying three-dimensional image

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20200604

Address after: 310051 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Applicant after: Alibaba (China) Co.,Ltd.

Address before: 510000 Guangdong city of Guangzhou province Whampoa Tianhe District Road No. 163 Xiping Yun Lu Yun Ping square B radio tower 13 layer self unit 02 (only for office use)

Applicant before: GUANGZHOU AIJIUYOU INFORMATION TECHNOLOGY Co.,Ltd.

GR01 Patent grant
GR01 Patent grant
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20230508

Address after: 201210 3rd floor, building 1, No.400, Fangchun Road, China (Shanghai) pilot Free Trade Zone, Pudong New Area, Shanghai

Patentee after: Shanghai Lingxi Interactive Entertainment Co.,Ltd.

Address before: Room 508, 5 / F, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Patentee before: Alibaba (China) Co.,Ltd.