Image processing method, device, electronic device and storage medium

Abstract

The embodiment of the present invention relates to a method, device, electronic device and storage medium for image processing, including: obtaining an original scalable vector graphic SVG image to be processed uploaded by a user; obtaining at least one set of configuration information set by the user for the original SVG image, a set of the configuration information including style data corresponding to at least one SVG node; for each set of the configuration information, determining a target SVG node corresponding to the configuration information from the original SVG image; using the configuration information to modify the style data of the target SVG node to obtain a reconfigured SVG image. Thus, the original SVG image can be reconfigured according to at least one set of configuration information, and at least one reconfigured SVG image can be automatically generated, without the user having to configure each original SVG image one by one, and the image configuration can be completed quickly, simplifying the operation, reducing the workload, and reducing the labor cost.

Description

Technical Field

[0001] The embodiments of the present invention relate to the field of image processing technology, and in particular to an image processing method, device, electronic device and storage medium. Background Art

[0002] At present, due to the fast rendering speed of PNG (Portable Network Graphics) images, the images in mobile App (Application) mainly use the PNG format, and the most widely used one is that UI (User Interface) designers directly provide PNG images.

[0003] However, PNG images are not vector graphics, and non-vector graphics may cause image distortion when enlarged. Therefore, UI designers need to provide corresponding PNG images for different image sizes, and even if the images are the same size, if there are other subtle differences (such as rounded corners, colors, etc.), UI designers also need to provide corresponding PNG images.

[0004] It can be seen that in the prior art, even if there are slight differences, UI designers are required to provide PNG images of multiple different styles, which results in heavy workload and low work efficiency for designers. Summary of the invention

[0005] In view of this, in order to solve the above technical problems or at least partially solve the above technical problems, the embodiments of the present invention provide a picture processing method, device, electronic device and storage medium.

[0006] In a first aspect, an embodiment of the present invention provides a method for processing an image, comprising:

[0007] Get the original scalable vector graphics SVG image uploaded by the user to be processed;

[0008] Acquire at least one set of configuration information set by the user for the original SVG image, where the set of configuration information includes style data corresponding to at least one SVG node;

[0009] For each set of the configuration information, a target SVG node corresponding to the configuration information is determined from the original SVG image; and the style data of the target SVG node is modified using the configuration information to obtain a reconfigured SVG image.

[0010] In a possible implementation, for each set of the configuration information, determining a target SVG node corresponding to the configuration information from the original SVG image includes:

[0011] For each set of the configuration information, determining a set of color values ​​corresponding to the configuration information;

[0012] Each SVG node in the original SVG image is traversed to determine the value of the color fill field in the traversed SVG node; if the color value set includes the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0013] In a possible implementation, the method further includes:

[0014] Splitting the original SVG image to obtain multiple SVG sub-graphs, wherein SVG nodes with the same color fill field value are split into the same SVG sub-graph, and SVG nodes with different color fill field values ​​are split into different SVG sub-graphs;

[0015] Outputting the plurality of SVG sub-images to the user, so that the user selects at least one SVG sub-image from the plurality of SVG sub-images, and setting configuration information for the selected SVG sub-image;

[0016] The obtaining of at least one set of configuration information set by the user for the original SVG image includes:

[0017] Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user;

[0018] For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

[0019] In a possible implementation, the method further includes:

[0020] For each of the SVG sub-image groups, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set;

[0021] The step of determining, for each set of the configuration information, a set of color values ​​corresponding to the configuration information includes:

[0022] For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

[0023] In a possible implementation, the method further includes:

[0024] Convert the reconfigured SVG image into a format to obtain an image in a preset format;

[0025] Outputting a picture in a preset format to the user.

[0026] In a second aspect, an embodiment of the present invention provides a picture processing device, including:

[0027] The image acquisition module is used to acquire the original scalable vector graphics SVG image uploaded by the user to be processed;

[0028] An information acquisition module, configured to acquire at least one set of configuration information set by the user for the original SVG image, wherein the set of configuration information includes style data corresponding to at least one SVG node;

[0029] The reconfiguration module is used to determine, for each set of the configuration information, a target SVG node corresponding to the configuration information from the original SVG image; and modify the style data of the target SVG node using the configuration information to obtain a reconfigured SVG image.

[0030] In a possible implementation, the reconfiguration module includes:

[0031] A set determination submodule, used to determine, for each group of the configuration information, a color value set corresponding to the configuration information;

[0032] The node determination submodule is used to traverse each SVG node in the original SVG image and determine the value of the color fill field in the traversed SVG node; if the color value set contains the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0033] In a possible implementation, the device further includes:

[0034] An image splitting module is used to split the original SVG image to obtain multiple SVG sub-images, wherein SVG nodes with the same color fill field value are split into the same SVG sub-image, and SVG nodes with different color fill field values ​​are split into different SVG sub-images;

[0035] A sub-image output module, configured to output the plurality of SVG sub-images to the user, so that the user can select at least one SVG sub-image from the plurality of SVG sub-images, and set configuration information for the selected SVG sub-image;

[0036] The information acquisition module is specifically used for:

[0037] Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user;

[0038] For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

[0039] In a possible implementation, the device further includes:

[0040] A relationship determination module, for each of the SVG sub-image groups, classifies the color filling field value corresponding to each SVG sub-image in the SVG sub-image group into a corresponding color value set, and obtains a corresponding relationship between the configuration information and the color value set;

[0041] The set determination submodule is specifically used for:

[0042] For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

[0043] In a possible implementation, the device further includes:

[0044] A format conversion module, used to convert the reconfigured SVG image into a format to obtain an image in a preset format;

[0045] The picture output module is used to output pictures in a preset format to the user.

[0046] In a third aspect, an embodiment of the present invention provides an electronic device, comprising: a processor and a memory, wherein the processor is used to execute a picture processing program stored in the memory to implement the picture processing method described in any one of the first aspects.

[0047] In a fourth aspect, an embodiment of the present invention provides a storage medium, wherein the storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the image processing method described in any one of the first aspects.

[0048] The technical solution provided by the embodiment of the present invention obtains at least one set of configuration information set by the user for the original SVG image by obtaining the SVG image to be processed uploaded by the user, and the set of configuration information includes style data corresponding to at least one SVG node. For each set of configuration information, the target SVG node corresponding to the configuration information is determined from the original SVG image, and the style data of the target SVG node is modified by using the configuration information to obtain the reconfigured SVG image. Since only one original SVG image and at least one set of configuration information are required, the original SVG image can be reconfigured by using the configuration information to obtain multiple SVG images of different styles, and the user does not need to configure each original SVG image one by one, so the image configuration can be completed quickly, the operation is simplified, the workload is reduced, and the labor cost is reduced. The SVG image can be converted into images of any other format. Therefore, when the user wants to obtain multiple preset format images of different styles, the user can use this method to obtain multiple SVG images of different styles, and convert the SVG image into a preset format image, and the design classmate no longer needs to manually generate multiple preset format images of different styles, thereby reducing the labor cost and the user's workload and improving the work efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] Figure 1 An example of a group of similar icons;

[0050] Figure 2 A flowchart of an embodiment of a picture processing method provided by an embodiment of the present invention;

[0051] Figure 3 An example of a first visual interface provided by an embodiment of the present invention;

[0052] Figure 4 An example of a second visual interface provided by an embodiment of the present invention;

[0053] Figure 5 An example of a third visual interface provided by an embodiment of the present invention;

[0054] Figure 6 An example of a fourth visual interface provided by an embodiment of the present invention;

[0055] Figure 7 An example of a fifth visual interface provided by an embodiment of the present invention;

[0056] Figure 8 A flowchart of another picture processing method provided by an embodiment of the present invention;

[0057] Fig. 9 is an example of a horizontal line icon;

[0058] Fig.10 This is an example of a single broadcast icon;

[0059] Fig.11 A block diagram of an embodiment of a picture processing device provided by an embodiment of the present invention;

[0060] Fig.12 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0061] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0062] In an exemplary application scenario, the same icon may have different styles due to different usage locations. Figure 1 , is an example of a group of similar icons, which includes two different styles of VIP icons. Figure 1 The VIP icon on the left has a background image with rounded upper corners and right lower corners. Figure 1 The VIP icon on the right has two right angles on the upper corners of the background image and two rounded corners on the lower corners. In this regard, in the prior art, UI designers need to enumerate all styles and provide pictures in preset formats one by one. This will result in a heavy workload for designers and low work efficiency.

[0063] Based on this, an embodiment of the present invention provides an image processing method, through which only one original SVG image is provided, and multiple SVG images with different styles can be reconfigured, and then the SVG image is converted into an image in a preset format, so that multiple images in preset formats with different styles can be obtained, thereby reducing user workload and improving work efficiency.

[0064] The image processing method provided by the present invention is further explained below with reference to specific embodiments in conjunction with the accompanying drawings, and the embodiments do not constitute a limitation on the embodiments of the present invention.

[0065] See also Figure 2 , is a flow chart of an embodiment of a picture processing method provided by an embodiment of the present invention. Figure 2 As shown, the process may include the following steps:

[0066] Step 201: Obtain the original SVG image to be processed uploaded by the user.

[0067] SVG is an open standard vector graphics language that allows users to directly use code to depict images, namely SVG images.

[0068] In one embodiment, the user can upload the original SVG image to the server through a preset first visual interface, so that the server can obtain the original SVG image to be processed uploaded by the user. Further, the server supports storing SVG images and can store relevant information of the SVG image to a preset storage medium, such as a cloud, a database, etc.

[0069] For example, see Figure 3 , is an example of a first visualization interface provided by an embodiment of the present invention. Figure 3 In the first visualization interface shown, the user can drag the original SVG image into the preset area 310 of the first visualization interface, and then click the "Submit" button. In response to the user's click operation on the "Submit" button, the electronic device uploads the original SVG image dragged into the preset area 310 to the server.

[0070] In another embodiment, the user may select an SVG image stored in the server through a preset second visualization interface, and the server determines the SVG image selected by the user as the original SVG image to be processed.

[0071] For example, see Figure 4 , is an example of a second visual interface provided by an embodiment of the present invention. Figure 4 As shown, the SVG image list stored in the server can be output through the second visualization interface, and the user can select an SVG image from the SVG image list, so that the server determines the SVG image selected by the user as the original SVG image to be processed.

[0072] In addition, in this embodiment, when the user selects any SVG image from the SVG image list output by the second visualization interface, the attribute information of the SVG image (including image size, prototype, appearance, style, etc.) can be output through the third visualization interface. For example, assuming that the user selects an SVG image named "Star Diamond" in the list, then when the user selects the SVG image, the attribute information of the SVG image can be output through the third visualization interface. For details, see Figure 5 As shown in FIG. 1 , an example of a third visual interface provided by an embodiment of the present invention is shown. Figure 5 The rightmost portion of the third visualization interface shown is the attribute information of an SVG image named “Star Diamond”.

[0073] Through this processing, users can intuitively and clearly understand the original SVG image and its attribute information.

[0074] Step 202: Obtain at least one set of configuration information set by the user for the original SVG image, where the set of configuration information includes style data corresponding to at least one SVG node.

[0075] The above set of configuration information may include style data of one or more SVG nodes. An SVG node represents an element object in an SVG image, such as a character, background image, pattern, etc. Style data is the parameters used to modify the element object, including but not limited to: size, color, shape, etc. The color here can be a solid color or a gradient color.

[0076] In one embodiment, at least one set of configuration information may be input by a user through a preset visual interface.

[0077] For example, Figure 1 Take the VIP icon in the example as an example. Assume that the original SVG image corresponding to the VIP icon is displayed as a background image with four right angles. In order to obtain Figure 1 Two sets of configuration information can be set for the two styles in the example. One set of configuration information corresponds to the SVG node representing the background image in the original SVG image, including the style data corresponding to the SVG node, specifically characterized by the two corners above the background image being rounded; the other set of configuration information also corresponds to the SVG node representing the background image in the original SVG image, including the style data corresponding to the SVG node, specifically characterized by the two corners below the background image being rounded.

[0078] For example, suppose Figure 1 The original SVG image corresponding to the VIP icon in the example is displayed as a dark gray background image and a dark yellow VIP character. It is assumed that in order to obtain the following two styles of icons: the VIP character is black and the background image is dark gray; the VIP character is red and the background image is blue. Then, two sets of configuration information can be set, one set of configuration information corresponds to the SVG node representing the character in the original SVG image, including the style data corresponding to the SVG node, specifically characterized by the VIP character being black; the other set of configuration information corresponds to the SVG node representing the character in the original SVG image, and the SVG node representing the background image, including the style data corresponding to each of the two SVG nodes, specifically characterized by the VIP character being red and the background image being blue.

[0079] Step 203: for each set of configuration information, determine the target SVG node corresponding to the configuration information from the original SVG image; modify the style data of the target SVG node using the configuration information to obtain a reconfigured SVG image.

[0080] It can be seen from the description in the above step 202 that a group of configuration information corresponds to at least one SVG node, including the style data of the corresponding SVG node. Then in this step 203, for each group of configuration information, the target SVG node corresponding to the group of configuration information can be determined from the original SVG image, and then the style data of the target SVG node can be modified using the group of configuration information to obtain the reconfigured SVG image.

[0081] pass Figure 2 It can be seen from the process shown that in the technical solution of the present invention, by obtaining the original SVG picture to be processed uploaded by the user, at least one set of configuration information set by the user for the original SVG picture is obtained, and a set of configuration information includes style data corresponding to at least one SVG node. For each set of configuration information, the target SVG node corresponding to the configuration information is determined from the original SVG picture, and the style data of the target SVG node is modified using the configuration information to obtain the reconfigured SVG picture. Since only one original SVG picture and at least one set of configuration information are required, the original SVG picture can be reconfigured using the configuration information to obtain multiple SVG pictures of different styles. There is no need for the user to configure each original SVG picture one by one, and the picture configuration can be completed quickly, simplifying the operation, reducing the workload, and reducing the labor cost. The SVG picture can be converted into pictures of any other format. Therefore, when the user wants to obtain pictures of multiple preset formats of different styles, the user can use this method to obtain multiple SVG pictures of different styles, and convert the SVG picture into pictures of preset formats. It is no longer necessary for the design students to manually generate multiple pictures of preset formats of different styles, thereby reducing the labor cost and the workload of the user and improving the work efficiency.

[0082] See also Figure 8 , is a flow chart of another picture processing method provided by an embodiment of the present invention. Figure 8 The process shown in the above Figure 2 Based on the process shown, the following steps may be included:

[0083] Step 801: Obtain the original SVG image to be processed uploaded by the user.

[0084] The detailed description of step 801 can be found in the above Figure 2 The description of step 201 in the illustrated process will not be repeated here.

[0085] Step 802: split the original SVG image to obtain multiple SVG sub-graphs, wherein SVG nodes with the same color fill field value are split into the same SVG sub-graph, and SVG nodes with different color fill field values ​​are split into different SVG sub-graphs.

[0086] Step 803: Output multiple SVG sub-images to the user, so that the user can select at least one SVG sub-image from the multiple SVG sub-images, and set configuration information for the selected SVG sub-image.

[0087] The following is a unified description of step 802 and step 803:

[0088] The above splitting refers to dividing multiple SVG nodes in the original SVG image to obtain multiple SVG sub-images.

[0089] In one embodiment, multiple SVG nodes in the original SVG image may be divided according to color. Specifically, for each SVG node in the original SVG image, the value of the color fill field is read. Here, the value of the color fill field represents the color used by the SVG node, which may be a solid color or a gradient color. When it is a solid color, the color fill field value may be a specific color value; when it is a gradient color, the color fill field value may be a set of multiple color values, or may be an ID representing a gradient color combination.

[0090] Then, according to the value of the color fill field, SVG nodes with the same value are divided into the same group, and SVG nodes with different values ​​are divided into different groups. The group here represents an SVG sub-graph.

[0091] For example, see Fig. 9 , is an example of a horizontal line icon, with Fig. 9 Take the horizontal line icon as an example, the horizontal line icon includes three SVG nodes, namely, the SVG node corresponding to the icon frame (hereinafter referred to as SVG node 1), the SVG node corresponding to the background image (hereinafter referred to as SVG node 2) and the SVG node corresponding to the horizontal line logo (hereinafter referred to as SVG node 3), and it is assumed that the values ​​of the color fill fields in the three SVG sub-nodes are: a, a, b. Then, according to the above description, according to the value of the color fill field, the SVG nodes with the same value are divided into the same group, and the SVG nodes with different values ​​are divided into different groups. Then, SVG node 1 and SVG node 2 can be divided into the same group, and SVG node 3 can be divided into another group, and two SVG sub-graphs are obtained.

[0092] The above describes the specific operation of splitting the original SVG image when the color in the original SVG image is a solid color. Fig.10 Taking the single broadcast icon shown in the figure as an example, the specific operation of splitting the original SVG image when the color of the original SVG image includes gradient color is described:

[0093] See also Fig.10 , is an example of a single broadcast icon, such as Fig.10The example of the exclusive broadcast icon includes two SVG nodes, namely, the SVG node corresponding to the background image (hereinafter referred to as SVG node 4) and the SVG node corresponding to the exclusive broadcast text (hereinafter referred to as SVG node 5), and it is assumed that the values ​​of the color fill fields in the above two SVG nodes are: url(#a) and #FFF, where url(#a) represents a gradient color. Then, according to the above description, according to the value of the color fill field, SVG nodes with the same value are divided into the same group, and SVG nodes with different values ​​are divided into different groups, then SVG node 4 and SVG node 5 can be divided into different groups to obtain two SVG sub-graphs.

[0094] In addition, after the original SVG image is split into multiple SVG sub-images, multiple SVG sub-images can be output, so that the user can name and upload SVG sub-images of different colors, and determine the correspondence between the image names of the multiple SVG images and the color field values ​​of the SVG images, so that the user can set configuration information for SVG images of different colors according to the correspondence. For example, the yellow SVG sub-image is named and the image name of the yellow SVG sub-image is determined to be "yellow".

[0095] Step 804: Determine at least one SVG sub-image group from the multiple SVG sub-images, where one SVG sub-image group includes at least one SVG sub-image selected by the user.

[0096] Step 805: For each SVG sub-image group, obtain configuration information set by the user for each SVG sub-image in the SVG sub-image group to obtain at least one set of configuration information.

[0097] The following is a unified description of step 804 and step 805:

[0098] The above-mentioned SVG sub-image group may include one or more SVG sub-images selected by the user, wherein being selected by the user means that the user wants to set configuration information for the SVG sub-image.

[0099] In one embodiment, the user can Figure 7 The example visualization interface selects one or more SVG sub-images from multiple SVG sub-images output by the visualization interface, and Figure 7 In the interface shown, the configuration information set for the selected SVG sub-image is input, and thus, an SVG sub-image group and the configuration information corresponding to the SVG sub-image group can be obtained.

[0100] Furthermore, if the same user repeats the above selection operation and configuration information input operation multiple times, or multiple users respectively perform the above selection operation and configuration information input operation, multiple SVG sub-image groups and configuration information corresponding to each SVG sub-image group can be obtained.

[0101] For example, see Figure 6 , which is an example of a fourth visualization interface provided by an embodiment of the present invention. Figure 6 The fourth visualization interface outputs multiple SVG images stored in the server. Assuming that the user selects a picture named "not yet broadcast" from the multiple SVG images, in response to the user's selection of the "not yet broadcast" picture, the SVG image is split to obtain two SVG sub-images after the SVG image is split and the current configuration information of the two SVG sub-images. Figure 7 The fifth visualization interface illustrated in the example outputs multiple SVG sub-images of the SVG image and configuration information of the multiple SVG sub-images. Figure 7 It includes an SVG sub-image named "grey" corresponding to the background image and the configuration information of the SVG sub-image, and the configuration information indicates that the color of the background image is a gray linear gradient; it also includes an SVG sub-image named "weikaibo" corresponding to the words "not on air" and the configuration information of the SVG sub-image, and the configuration information indicates that the color of the words "not on air" is white.

[0102] Afterwards, based on Figure 7 In the fifth visualization interface illustrated as an example, the user can select one or more SVG sub-images and input configuration information set for the selected SVG sub-images in the corresponding input boxes.

[0103] Step 806: For each SVG sub-image group, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set.

[0104] It can be seen from the description of step 802 above that when the original SVG image is split, SVG nodes with the same value of the color fill field are split into the same SVG sub-image, while SVG nodes with different color fill field values ​​are split into different SVG sub-images. Therefore, the value of the color fill field corresponding to each SVG sub-image in the above SVG sub-image group is different, that is, each SVG sub-image corresponds to a unique color fill field value. Therefore, one SVG sub-image group corresponds to one group of color fill field values. It can be seen from the description of step 804 above that one group of configuration information corresponds to one SVG sub-image group. Therefore, for each SVG sub-image group, a correspondence between its corresponding configuration information and the color fill field value can be established.

[0105] Specifically, for each SVG sub-image group, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set.

[0106] For example, Fig. 9Taking the horizontal line icon as an example, it can be seen from the above description that the horizontal line icon can be split according to the value of the color field to obtain two SVG sub-graphs, one of which includes SVG node 1 and SVG node 2, and the other SVG sub-graph includes SVG node 3. Assuming that the above two SVG sub-graphs corresponding to the horizontal line icon are determined as an SVG sub-graph group (hereinafter referred to as SVG sub-graph group 1), it can be known that the color value set corresponding to the SVG sub-graph group 1 is {a, b}. Furthermore, the corresponding relationship between the color value set {a, b} and the configuration information set for the SVG sub-graph group 1 can be obtained.

[0107] For another example, assuming that the SVG sub-graph including SVG node 1 and SVG node 2 is determined as an SVG sub-graph group (hereinafter referred to as SVG sub-graph group 2), it can be known that the color value set corresponding to the SVG sub-graph group 2 is {a}. Furthermore, the corresponding relationship between the color value set {a} and the configuration information set for the SVG sub-graph group 2 can be obtained.

[0108] Step 807: When processing the original SVG image, for each set of configuration information, search for the above correspondence to obtain a set of color values ​​corresponding to the configuration information.

[0109] As can be seen from the above description, when setting configuration information, a correspondence between the configuration information and the color value set can be established. Then, in step 806, the above correspondence can be searched for each set of configuration information to obtain the color value set corresponding to the configuration information.

[0110] Step 808: For each set of configuration information, traverse each SVG node in the original SVG image and determine the value of the color fill field in the traversed SVG node; if the color value set corresponding to the set of configuration information contains the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0111] The above traversing each SVG node in the original SVG image refers to accessing each SVG node in the original SVG image in sequence according to a preset search order, and the specific access operation may be to retrieve the value of the color fill field in each SVG node.

[0112] For example, based on the example in step 805 above, it is assumed that for a set of configuration information, the above correspondence is searched, and the color value set obtained is {a, b}. Then when traversing to the SVG node corresponding to the icon box in the horizontal line icon, it is determined that the color fill field value of the SVG node is a. Since the color value set {a, b} contains the color fill field value a, the currently traversed SVG node is determined to be the target SVG node corresponding to the configuration information. When traversing to the SVG node corresponding to the background image in the horizontal line icon, it is determined that the color fill field value of the SVG node is a. Since the color value set {a, b} contains the color fill field value a, the currently traversed SVG node is determined to be the target SVG node corresponding to the configuration information. When traversing to the SVG node corresponding to the horizontal line logo in the horizontal line icon, it is determined that the color fill field value of the SVG node is b. Since the color value set {a, b} contains the color fill field value b, the currently traversed SVG node is determined to be the target SVG node corresponding to the configuration information. Finally, three target SVG nodes are obtained.

[0113] Step 809: Use the configuration information to modify the style data of the target SVG node to obtain a reconfigured SVG image.

[0114] As can be seen from the description of step 808, in the embodiment of the present invention, after determining the target SVG node corresponding to the configuration information, the style data in the target SVG node is modified using the configuration information. Thus, the style of the target SVG node can be reconfigured to obtain the reconfigured SVG image.

[0115] Step 810: Convert the format of the reconfigured SVG image to obtain an image in a preset format.

[0116] Step 811: Output a picture in a preset format to the user.

[0117] The following is a unified description of step 810 and step 811:

[0118] The above-mentioned preset format can be any image format except the SVG format, for example: PNG (Portable Network Graphics), JPEG (Joint Photographic Experts Group), GIF (Graphics Interchange Format), etc., and the embodiment of the present invention does not limit this.

[0119] Specifically, the reset SVG image can be converted into a preset format using a preset format conversion tool, where the format conversion tool can be software with a format conversion function, such as an APP, applet, system, etc. installed on electronic devices such as smart phones, tablet computers, and laptop computers.

[0120] For example, assuming that the above preset format is PNG format, the reconfigured SVG image can be converted into a PNG format through Node.js and the sharp npm package.

[0121] Through this processing method, the reconfigured SVG image can be directly converted into a format to obtain an image in a preset format. Designers do not need to provide images in the preset format one by one, which improves work efficiency.

[0122] So far, completed Figure 8 A description of the process shown.

[0123] Corresponding to the above-mentioned embodiment of the image processing method, the present invention also provides a block diagram of an embodiment of the device.

[0124] See also Fig.11 , is a block diagram of an embodiment of a picture processing device provided by an embodiment of the present invention. Fig.11 As shown, the device comprises:

[0125] The image acquisition module 1101 is used to acquire the original scalable vector graphics SVG image to be processed uploaded by the user;

[0126] An information acquisition module 1102 is used to acquire at least one set of configuration information set by the user for the original SVG image, where the set of configuration information includes style data corresponding to at least one SVG node;

[0127] The reconfiguration module 1103 is used to determine, for each set of the configuration information, a target SVG node corresponding to the configuration information from the original SVG image; and modify the style data of the target SVG node using the configuration information to obtain a reconfigured SVG image.

[0128] In a possible implementation, the reconfiguration module 1103 includes (not shown in the figure):

[0129] A set determination submodule, used to determine, for each group of the configuration information, a color value set corresponding to the configuration information;

[0130] The node determination submodule is used to traverse each SVG node in the original SVG image and determine the value of the color fill field in the traversed SVG node; if the color value set contains the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0131] In a possible implementation, the device further includes (not shown in the figure):

[0132] An image splitting module is used to split the original SVG image to obtain multiple SVG sub-images, wherein SVG nodes with the same color fill field value are split into the same SVG sub-image, and SVG nodes with different color fill field values ​​are split into different SVG sub-images;

[0133] A sub-image output module, configured to output the plurality of SVG sub-images to the user, so that the user can select at least one SVG sub-image from the plurality of SVG sub-images, and set configuration information for the selected SVG sub-image;

[0134] The information acquisition module 1102 is specifically used for:

[0135] Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user;

[0136] For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

[0137] In a possible implementation, the device further includes (not shown in the figure):

[0138] A relationship determination module, for each of the SVG sub-image groups, classifies the color filling field value corresponding to each SVG sub-image in the SVG sub-image group into a corresponding color value set, and obtains a corresponding relationship between the configuration information and the color value set;

[0139] The set determination submodule is specifically used for:

[0140] For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

[0141] In a possible implementation, the device further includes (not shown in the figure):

[0142] A format conversion module, used to convert the reconfigured SVG image into a format to obtain an image in a preset format;

[0143] The picture output module is used to output pictures in a preset format to the user.

[0144] Fig.12 A schematic diagram of the structure of an electronic device provided by an embodiment of the present invention, Fig.12 The electronic device 1200 shown includes: at least one processor 1201, a memory 1202, at least one network interface 1204 and a user interface 1203. The various components in the electronic device 1200 are coupled together via a bus system 1205. It is understood that the bus system 1205 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 1205 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 1205 is not described in detail. Fig.12 Various buses are labeled as bus system 1205.

[0145] The user interface 1203 may include a display, a keyboard or a pointing device (eg, a mouse, a trackball), a touch pad or a touch screen.

[0146] It can be understood that the memory 1202 in the embodiment of the present invention can be a volatile memory or a non-volatile memory, or can include both volatile and non-volatile memories. Among them, the non-volatile memory can be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. The volatile memory can be a random access memory (RAM), which is used as an external cache. By way of example and not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct memory bus random access memory (DRRAM). The memory 1202 described herein is intended to include, but is not limited to, these and any other suitable types of memory.

[0147] In some embodiments, the memory 1202 stores the following elements, executable units or data structures, or a subset thereof, or an extended set thereof: an operating system 12021 and an application program 12022 .

[0148] The operating system 12021 includes various system programs, such as a framework layer, a core library layer, a driver layer, etc., which are used to implement various basic services and process hardware-based tasks. The application 12022 includes various application programs, such as a media player (Media Player), a browser (Browser), etc., which are used to implement various application services. The program for implementing the method of the embodiment of the present invention can be included in the application 12022.

[0149] In the embodiment of the present invention, by calling the program or instruction stored in the memory 1202, specifically, the program or instruction stored in the application 12022, the processor 1201 is used to execute the method steps provided by each method embodiment, for example, including:

[0150] Get the original scalable vector graphics SVG image uploaded by the user to be processed;

[0151] Acquire at least one set of configuration information set by the user for the original SVG image, where the set of configuration information includes style data corresponding to at least one SVG node;

[0152] For each set of the configuration information, a target SVG node corresponding to the configuration information is determined from the original SVG image; and the style data of the target SVG node is modified using the configuration information to obtain a reconfigured SVG image.

[0153] In a possible implementation, for each set of the configuration information, determining a target SVG node corresponding to the configuration information from the original SVG image includes:

[0154] For each set of the configuration information, determining a set of color values ​​corresponding to the configuration information;

[0155] Each SVG node in the original SVG image is traversed to determine the value of the color fill field in the traversed SVG node; if the color value set includes the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0156] In a possible implementation, the method further includes:

[0157] Splitting the original SVG image to obtain multiple SVG sub-graphs, wherein SVG nodes with the same color fill field value are split into the same SVG sub-graph, and SVG nodes with different color fill field values ​​are split into different SVG sub-graphs;

[0158] Outputting the plurality of SVG sub-images to the user, so that the user selects at least one SVG sub-image from the plurality of SVG sub-images, and setting configuration information for the selected SVG sub-image;

[0159] The obtaining of at least one set of configuration information set by the user for the original SVG image includes:

[0160] Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user;

[0161] For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

[0162] In a possible implementation, the method further includes:

[0163] For each of the SVG sub-image groups, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set;

[0164] The step of determining, for each set of the configuration information, a set of color values ​​corresponding to the configuration information includes:

[0165] For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

[0166] In a possible implementation, the method further includes:

[0167] Convert the reconfigured SVG image into a format to obtain an image in a preset format;

[0168] Outputting a picture in a preset format to the user.

[0169] The method disclosed in the above embodiment of the present invention can be applied to the processor 1201, or implemented by the processor 1201. The processor 1201 may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by the hardware integrated logic circuit or software instructions in the processor 1201. The above processor 1201 can be a general processor, a digital signal processor (Digital Signal Processor, DSP), an application specific integrated circuit (Application Specific Integrated Circuit, ASIC), a field programmable gate array (Field Programmable Gate Array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present invention can be implemented or executed. The general processor can be a microprocessor or the processor can also be any conventional processor. The steps of the method disclosed in the embodiment of the present invention can be directly embodied as a hardware decoding processor to execute, or the hardware and software units in the decoding processor can be executed. The software unit can be located in a mature storage medium in the field such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory 1202, and the processor 1201 reads the information in the memory 1202 and completes the steps of the above method in combination with its hardware.

[0170] It is understood that the embodiments described herein may be implemented in hardware, software, firmware, middleware, microcode, or a combination thereof. For hardware implementation, the processing unit may be implemented in one or more application specific integrated circuits (ASIC), digital signal processors (DSP), digital signal processing devices (DSPD), programmable logic devices (PLD), field programmable gate arrays (FPGA), general purpose processors, controllers, microcontrollers, microprocessors, other electronic units for performing the functions described in the present application, or a combination thereof.

[0171] For software implementation, the technology described herein can be implemented by a unit that performs the functions described herein. The software code can be stored in a memory and executed by a processor. The memory can be implemented in the processor or outside the processor.

[0172] The electronic device provided in this embodiment may be Fig.12 The electronic device shown in FIG. 1 may perform the following steps: Figure 2 and Figure 8 All the steps of the image processing method in Figure 2 and Figure 8 For details, please refer to the technical effects of the image processing method in Figure 2 and Figure 8 For the sake of brevity, the relevant description is not repeated here.

[0173] The embodiment of the present invention also provides a storage medium (computer-readable storage medium). The storage medium here stores one or more programs. The storage medium may include a volatile memory, such as a random access memory; the memory may also include a non-volatile memory, such as a read-only memory, a flash memory, a hard disk or a solid-state drive; the memory may also include a combination of the above-mentioned types of memory.

[0174] When one or more programs in the storage medium can be executed by one or more processors, the above-mentioned image processing method executed on the electronic device side can be implemented.

[0175] The processor is used to execute the image processing program stored in the memory to implement the following steps of the image processing method performed on the electronic device side:

[0176] Get the original scalable vector graphics SVG image uploaded by the user to be processed;

[0177] Acquire at least one set of configuration information set by the user for the original SVG image, where the set of configuration information includes style data corresponding to at least one SVG node;

[0178] For each set of the configuration information, a target SVG node corresponding to the configuration information is determined from the original SVG image; and the style data of the target SVG node is modified using the configuration information to obtain a reconfigured SVG image.

[0179] In a possible implementation, for each set of the configuration information, determining a target SVG node corresponding to the configuration information from the original SVG image includes:

[0180] For each set of the configuration information, determining a set of color values ​​corresponding to the configuration information;

[0181] Each SVG node in the original SVG image is traversed to determine the value of the color fill field in the traversed SVG node; if the color value set includes the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

[0182] In a possible implementation, the method further includes:

[0183] Splitting the original SVG image to obtain multiple SVG sub-graphs, wherein SVG nodes with the same color fill field value are split into the same SVG sub-graph, and SVG nodes with different color fill field values ​​are split into different SVG sub-graphs;

[0184] Outputting the plurality of SVG sub-images to the user, so that the user selects at least one SVG sub-image from the plurality of SVG sub-images, and setting configuration information for the selected SVG sub-image;

[0185] The obtaining of at least one set of configuration information set by the user for the original SVG image includes:

[0186] Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user;

[0187] For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

[0188] In a possible implementation, the method further includes:

[0189] For each of the SVG sub-image groups, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set;

[0190] The step of determining, for each set of the configuration information, a set of color values ​​corresponding to the configuration information includes:

[0191] For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

[0192] In a possible implementation, the method further includes:

[0193] Convert the reconfigured SVG image into a format to obtain an image in a preset format;

[0194] Outputting a picture in a preset format to the user.

[0195] The professionals should further realize that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in the above description according to the function. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0196] The steps of the method or algorithm described in conjunction with the embodiments disclosed herein may be implemented using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0197] The specific implementation methods described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific implementation method of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A method for processing an image, characterized in that: The method comprises: Get the original scalable vector graphics SVG image uploaded by the user to be processed; Obtaining at least one set of configuration information set by the user for the original SVG image, wherein the set of configuration information includes style data corresponding to at least one SVG node; For each set of the configuration information, determine a target SVG node corresponding to the configuration information from the original SVG image; modify style data of the target SVG node using the configuration information to obtain a reconfigured SVG image; The step of determining, for each set of the configuration information, a target SVG node corresponding to the configuration information from the original SVG image includes: For each set of the configuration information, determining a set of color values ​​corresponding to the configuration information; Traversing each SVG node in the original SVG image, and determining the value of the color fill field in the traversed SVG node; if the color value set includes the value of the color fill field, determining the traversed SVG node as the target SVG node corresponding to the configuration information; Divide the multiple SVG nodes in the original SVG image to obtain multiple SVG sub-graphs, wherein the SVG nodes with the same color fill field value are divided into the same SVG sub-graph, and the SVG nodes with different color fill field values ​​are divided into different SVG sub-graphs; Outputting the plurality of SVG sub-images to the user, so that the user selects at least one SVG sub-image from the plurality of SVG sub-images, and setting configuration information for the selected SVG sub-image; The obtaining of at least one set of configuration information set by the user for the original SVG image includes: Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user; For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

2. The method according to claim 1, characterized in that The method further comprises: For each of the SVG sub-image groups, the color filling field value corresponding to each SVG sub-image in the SVG sub-image group is classified into a corresponding color value set to obtain a corresponding relationship between the configuration information and the color value set; The step of determining, for each set of the configuration information, a set of color values ​​corresponding to the configuration information includes: For each set of the configuration information, the corresponding relationship is searched to obtain a set of color values ​​corresponding to the configuration information.

3. The method according to claim 1, characterized in that The method further comprises: Convert the reconfigured SVG image into a format to obtain an image in a preset format; Outputting a picture in a preset format to the user.

4. A picture processing device, characterized in that: The device comprises: The image acquisition module is used to obtain the original SVG image to be processed uploaded by the user; An information acquisition module, configured to acquire at least one set of configuration information set by the user for the original SVG image, wherein the set of configuration information includes style data corresponding to at least one SVG node; A reconfiguration module, configured to determine, for each set of the configuration information, a target SVG node corresponding to the configuration information from the original SVG image; and modify the style data of the target SVG node using the configuration information to obtain a reconfigured SVG image; The step of determining, for each set of the configuration information, a target SVG node corresponding to the configuration information from the original SVG image includes: For each set of the configuration information, determining a set of color values ​​corresponding to the configuration information; Traversing each SVG node in the original SVG image, and determining the value of the color fill field in the traversed SVG node; if the color value set includes the value of the color fill field, determining the traversed SVG node as the target SVG node corresponding to the configuration information; Divide the multiple SVG nodes in the original SVG image to obtain multiple SVG sub-graphs, wherein the SVG nodes with the same color fill field value are divided into the same SVG sub-graph, and the SVG nodes with different color fill field values ​​are divided into different SVG sub-graphs; Outputting the plurality of SVG sub-images to the user, so that the user selects at least one SVG sub-image from the plurality of SVG sub-images, and setting configuration information for the selected SVG sub-image; The obtaining of at least one set of configuration information set by the user for the original SVG image includes: Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user; For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

5. The device according to claim 4, characterized in that The reconfiguration module comprises: A set determination submodule, used to determine, for each group of the configuration information, a color value set corresponding to the configuration information; The node determination submodule is used to traverse each SVG node in the original SVG image and determine the value of the color fill field in the traversed SVG node; if the color value set contains the value of the color fill field, the traversed SVG node is determined as the target SVG node corresponding to the configuration information.

6. The device according to claim 5, characterized in that The device also includes: An image splitting module is used to divide multiple SVG nodes in the original SVG image to obtain multiple SVG sub-graphs, wherein SVG nodes with the same color fill field value are split into the same SVG sub-graph, and SVG nodes with different color fill field values ​​are split into different SVG sub-graphs; A sub-image output module, configured to output the plurality of SVG sub-images to the user, so that the user can select at least one SVG sub-image from the plurality of SVG sub-images, and set configuration information for the selected SVG sub-image; The information acquisition module is specifically used for: Determine at least one SVG sub-image group from the plurality of SVG sub-images, wherein one SVG sub-image group includes at least one SVG sub-image selected by a user; For each of the SVG sub-image groups, configuration information set by the user for each SVG sub-image in the SVG sub-image group is obtained to obtain at least one set of configuration information.

7. An electronic device, characterized in that: include: A processor and a memory, wherein the processor is used to execute an image processing program stored in the memory to implement the image processing method according to any one of claims 1 to 3.

8. A storage medium, characterized in that: The storage medium stores one or more programs, and the one or more programs can be executed by one or more processors to implement the image processing method described in any one of claims 1 to 3.

Images