Method, device and equipment for obtaining editable image template and readable storage medium

Abstract

The invention discloses a method, device and equipment for obtaining an editable image template and a readable storage medium. The method comprises the steps of obtaining an original file used for describing a design drawing draft; wherein the design drawing comprises a plurality of layers; analyzing original data of each layer from the original file, and converting the original data of each layer into standard layer data used by an image editing platform according to a preset rule; forming an editable image template corresponding to the design drawing according to all the standard layer data; according to the method, the editable image template can be automatically and efficiently generated according to the original file used for describing the design drawing, and the editable image template can be conveniently managed and used by a platform.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and particularly to a method, device, equipment and readable storage medium for obtaining an editable image template. Background Art

[0002] With the rapid development of the Internet, consumers are becoming more and more accustomed to online shopping. Different from traditional offline physical stores, online merchants can only display product details through product display images to attract users. However, for many online merchants, they do not have computer knowledge, so it is difficult to generate product display images by themselves.

[0003] In the existing technology, many e-commerce platforms provide image templates to help online merchants better display their products. However, these image templates are generated using third-party software such as Photoshop. When merchants import the image templates generated by software such as Photoshop into the e-commerce platform, technical personnel are still required to make adaptability modifications, which not only increases the operation difficulty and time cost of the merchants, but also increases the maintenance burden of the e-commerce platform. Therefore, how to improve the efficiency of generating platform image templates, reduce the operation difficulty of merchants, and improve the efficiency of the e-commerce platform in maintaining templates is a technical problem that needs to be solved urgently at present. Summary of the Invention

[0004] The purpose of the present invention is to provide a method, device, equipment and readable storage medium for obtaining an editable image template, which can automatically and efficiently generate an editable image template according to the original file for describing the design draft, and is convenient for the platform to manage and use the editable image template.

[0005] According to one aspect of the present invention, there is provided a method for obtaining an editable image template, which is applied to an image editing platform, and the method includes:

[0006] Obtain the original file for describing the design draft; wherein, the design draft includes multiple layers;

[0007] Parse out the original data of each layer from the original file, and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule;

[0008] Form an editable image template corresponding to the design draft according to all the standard layer data.

[0009] Optionally, the parsing out the original data of each layer from the original file, and respectively converting the original data of each layer into the standard layer data used by the image editing platform according to a preset rule specifically includes:

[0010] Obtain the preset rules corresponding to the layer type from the preset rule library according to the layer type of the layer;

[0011] Convert the original data of the layer into the standard layer data used by the image editing platform according to the preset rules.

[0012] Optionally, the converting the original data of the layer into the standard layer data used by the image editing platform according to the preset rules specifically includes:

[0013] When parsing the original data of the image layer from the original file, obtain the layer content data and the layer basic data from the original data of the image layer; wherein, the layer basic data includes: layer position, layer size, and layer rotation angle;

[0014] Store the layer content data in the cloud and obtain the corresponding cloud storage address;

[0015] Form the standard image layer data corresponding to the original data of the image layer with the layer basic data and the cloud storage address.

[0016] Optionally, the converting the original data of the layer into the standard layer data used by the image editing platform according to the preset rules specifically includes:

[0017] When parsing the original data of the text layer from the original file, parse out the text font data, text position data, and text color data from the original data of the text layer;

[0018] Input the text position data into a preset mapping function, and use the output of the preset mapping function as the standard position data;

[0019] Form the standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data.

[0020] Optionally, the inputting the text position data into a preset mapping function and using the output of the preset mapping function as the standard position data specifically includes:

[0021] Parse out the original position parameters from the text position data;

[0022] Calculate the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameters;

[0023] Calculate the standard position parameters in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template.

[0024] Optionally, calculating the standard position parameters in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template specifically includes:

[0025] Obtain the upper left vertex position (tlx, tly), upper right vertex position (trx, try), lower left vertex position (blx, bly), and lower right vertex position (brx, bry) of the outer bounding box of the text in the editable image template;

[0026] Determine the minimum value among tlx, trx, blx, and brx as the left parameter fl, and the maximum value as the right parameter fr;

[0027] Determine the minimum value among tly, try, bly, and bry as the upper parameter ft, and the maximum value as the lower parameter fb;

[0028] Determine the left parameter fl as the distance value x in the standard position data representing the distance from the upper left vertex of the outer bounding box of the text to the left boundary of the template;

[0029] Determine the upper parameter ft as the distance value y in the standard position data representing the distance from the upper left vertex of the outer bounding box of the text to the upper boundary of the template;

[0030] Determine the value of |fr - fl| as the width value w in the standard position data representing the width of the outer bounding box of the text;

[0031] Determine the value of |fb - ft| as the height value h in the standard position data representing the height of the outer bounding box of the text;

[0032] Determine the distance value x, the distance value y, the width value w, the height value h, and the rotation angle as the standard position parameters in the standard position data.

[0033] Optionally, calculating the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameters specifically includes;

[0034] Calculate the upper left vertex position (tlx, tly), the upper right vertex position (trx, try), the lower left vertex position (blx, bly), and the lower right vertex position (brx, bry) according to the following formula:

[0035] tlx = xx * left + xy * top + tx, tly = yx * left + yy * top + ty,

[0036] trx = yx * right + yy * top + tx, try = yx * right + yy * top + ty,

[0037] blx = xx * left + xy * bottom + tx, bly = yx * left + yy * bottom + ty,

[0038] brx = xx * right + xy * bottom + tx, bry = yx * right + yy * bottom + ty;

[0039] Wherein, xx is the horizontal scaling parameter in the text position data, xy is the horizontal skew parameter in the text position data, yy is the vertical scaling parameter in the text position data, yx is the vertical skew parameter in the text position data, tx is the horizontal translation parameter in the text position data, ty is the vertical translation parameter in the text position data, top is the distance value from the upper boundary of the text outer bounding box in the design draft to the upper boundary of the design draft in the text position data, bottom is the distance value from the lower boundary of the text outer bounding box in the design draft to the lower boundary of the design draft in the text position data, left is the distance value from the left boundary of the text outer bounding box in the design draft to the left boundary of the design draft in the text position data, and right is the distance value from the right boundary of the text outer bounding box in the design draft to the right boundary of the design draft in the text position data;

[0040] Determine the value of (-atan2(yx, xx) * 180 / π) as the rotation angle of the text outer bounding box in the editable image template.

[0041] Optionally, forming the standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data specifically includes:

[0042] Judge whether there is a font corresponding to the text font data in the font library of the image editing platform; if so, determine the text font data as the standard font data, if not, determine the preset font data as the standard font data;

[0043] Judge whether there is a fill color in the text color data; if so, determine the fill color as the standard color data, if not, determine the basic color in the text color data as the standard color data;

[0044] Form the standard text layer data from the standard font data, the standard color data, and the standard position data.

[0045] Optionally, after obtaining the original file for describing the design artwork, the method further includes:

[0046] Parsing the artwork basic information of the design artwork from the original file; wherein, the artwork basic information includes: artwork size and artwork position.

[0047] Optionally, the forming of the editable image template corresponding to the design artwork according to all the standard layer data specifically includes:

[0048] Rendering a thumbnail corresponding to the design artwork according to all the standard layer data;

[0049] Obtaining the marking information configured for the design artwork; wherein, the marking information at least includes one of the following: usage classification, usage scenario, single drawing / series information;

[0050] Forming an editable image template corresponding to the design artwork with the thumbnail, the marking information and all the standard layer data.

[0051] Optionally, after forming the editable image template corresponding to the design artwork according to all the standard layer data, the method further includes:

[0052] When receiving an edit instruction, obtaining a target editable image template corresponding to the edit instruction from a preset template library;

[0053] Drawing a template boundary corresponding to the artwork basic information in the target editable image template in the editing interface of the image editing platform;

[0054] Obtaining each standard layer data in the target editable image template, and sequentially drawing layer contents corresponding to each standard layer data within the template boundary; wherein each layer content is editable content.

[0055] Optionally, before the step of when receiving an edit instruction, obtaining a target editable image template corresponding to the edit instruction from a preset template library, the method further includes:

[0056] Displaying the thumbnails of each editable image template in the preset template library in a preset arrangement manner in the display interface of the image editing platform;

[0057] When detecting a preset operation on a target thumbnail in the display interface, triggering the edit instruction.

[0058] To achieve the above object, the present invention further provides a device for obtaining an editable image template, which is applied to an image editing platform. The device includes:

[0059] An acquisition module, configured to acquire an original file for describing a design artwork; wherein, the design artwork includes a plurality of layers;

[0060] A conversion module, configured to parse the original data of each layer from the original file, and respectively convert the original data of each layer into standard layer data used by the image editing platform according to a preset rule;

[0061] A formation module, configured to form an editable image template corresponding to the design artwork according to all the standard layer data.

[0062] To achieve the above object, the present invention further provides a computer device, which specifically includes: a memory, a processor, and a computer program stored on the memory and executable on the processor. When the processor executes the computer program, the steps of the method for obtaining an editable image template introduced above are implemented.

[0063] To achieve the above object, the present invention further provides a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method for obtaining an editable image template introduced above are implemented.

[0064] For the method, device, equipment and readable storage medium for obtaining an editable image template provided by the present invention, a designer only needs to input an original file for describing a design artwork into an image editing platform, and the image editing platform can automatically parse the original file and convert it into an editable image template that can be used by the image editing platform. This process greatly simplifies the work process of the designer and improves work efficiency. In addition, the present invention can be applied to various image editing platforms and e-commerce platforms, providing a more convenient and efficient product display method for merchants. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] By reading the detailed description of the preferred embodiments below, various other advantages and benefits will become clear to those of ordinary skill in the art. The drawings are only for the purpose of showing the preferred embodiments and are not considered to be a limitation of the present invention. Moreover, throughout the drawings, the same reference numerals are used to represent the same components. In the drawings:

[0066] Figure 1 An optional flowchart of the method for obtaining an editable image template provided for Embodiment 1;

[0067] Figure 2 An optional structural diagram of the device for obtaining an editable image template provided for Embodiment 2;

[0068] Figure 3 An optional hardware architecture diagram of the computer device provided for Embodiment 3. Detailed Implementation Manner

[0069] To make the objectives, technical solutions and advantages of the present invention clearer and more understandable, the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the scope of protection of the present invention.

[0070] Embodiment 1

[0071] An embodiment of the present invention provides a method for obtaining an editable image template, which is applied to an image editing platform, such as Figure 1 As shown, the method specifically includes the following steps:

[0072] Step S101: Obtain the original file for describing the design drawing; wherein, the design drawing includes multiple layers.

[0073] Among them, the design drawing is an image used to display a product completed by a designer through drawing software, and the original file is obtained by exporting the design drawing from the drawing software; in addition, in order to increase the display strength of the design drawing, the designer will set multiple layers in the design drawing, for example: text layer, image layer and / or vector shape layer. In practical applications, the original file can be a PSD (Photoshop Document) file exported from Photoshop software, a PPTX file exported from PPT (PowerPoint) software, a file exported from Sketch vector drawing application software, or other files including multiple layer data, which are not specifically limited herein; in this embodiment, the PSD file will be used as an example for explanation.

[0074] Step S102: Parse the original data of each layer from the original file, and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule.

[0075] In this embodiment, the original file of the design drawing can be automatically converted into an editable image template through the image editing platform, and the user can generate the required product display image based on the editable image template through the image editing platform. Since the data used by the image editing platform is different from the data used by the drawing software for generating the original file, it is necessary to perform data conversion on the original file of the design drawing to obtain the standard data that can be used by the image editing platform.

[0076] Since the original file is mainly composed of layers, and the content of the design drawing can be reflected by each layer; therefore, in this embodiment, the layer data in the original file is mainly converted to obtain the standard layer data that can be used by the image editing platform. The developers of the image editing platform can set the preset rules in advance according to the correspondence between the data format of the drawing software for generating the original file and the data format of the image editing platform, so that when the image editing platform receives the original file subsequently, the original layer data in the original file can be directly converted into the standard layer data required by the image editing platform according to the preset rules.

[0077] Step S103: Form an editable image template corresponding to the design drawing according to all the standard layer data; wherein, the image editing platform uses the editable image template for visual display.

[0078] In this embodiment, after converting the original data of each layer included in the original file into the corresponding standard layer data, an editable image template for users to use is formed according to all the standard layer data. When the user uses the editable image template on the image editing platform, the content of each layer can be visually displayed in the display area according to each standard layer data, so as to obtain an editable image corresponding to the design drawing. Since the standard layer data of each layer is included in the editable image template, after the standard layer data of each layer is displayed in the display area, the user can edit the content of each layer again respectively, so as to obtain the product display image required by the user.

[0079] In this embodiment, when the designer uploads the original file of the design drawing to the image editing platform, the original file of the design drawing can be automatically formed into an editable image template that can be used by the image editing platform, which can not only efficiently restore the design content of the design drawing, but also enable the image editing platform to have a large number of editable image templates for users to use; through this embodiment, the editable image templates in the image editing platform can be updated and maintained more efficiently, which is convenient for the use of designers and users.

[0080] Specifically, when implementing the step S101, the following steps may be included:

[0081] Step A1: Receive the original file uploaded by the designer in the form of multipart / form-data through the target interface at the back end of the image editing platform;

[0082] Step A2: Determine whether the file name suffix of the original file is a preset character. If so, execute step A3; if not, display a preset error message through the back end.

[0083] For example, determine whether the file name suffix of the original file is.psd;

[0084] Step A3: Convert the original file into original data in JSON format.

[0085] In this embodiment, a file upload button is set in the visualization operation interface at the back end. After a designer clicks the file upload button, the original file of the design draft can be uploaded to the back end in the form of multipart / form-data; among them, multipart / form-data is a transmission format of an HTTP request (when a page on a website sends a request to a server). In addition, a target interface is provided in the back-end server. After the original file is uploaded, this target interface will be requested. When the target interface receives the original file, it will first determine whether the file is a file of the target format. If not, the process will be directly ended, and an error message will be popped up in the visualization operation interface at the back end, such as an error message of "This file is not a PSD file"; if so, the original file will be converted into original data in JSON format.

[0086] Further, after the step S101 and before the step S102, the method further includes the following steps:

[0087] Parse the basic drawing information of the design draft from the original file; among them, the basic drawing information includes: drawing size and drawing position.

[0088] When the original file is a PSD file, when obtaining the original data in JSON format based on the PSD file, query the document field in the original data, and obtain the drawing size (drawing width and drawing height) and drawing position from the field value of the document field.

[0089] Specifically, when implementing the step S102, it may include the following steps:

[0090] Step B1: Obtain the preset rule corresponding to the layer type from the preset rule library according to the layer type of the layer;

[0091] Step B2: Convert the original data of the layer into the standard layer data used by the image editing platform according to the preset rule.

[0092] Further, when implementing the step of converting the original data of the layer into the standard layer data used by the image editing platform according to the preset rule in the step B2, it may include the following steps:

[0093] Step B21: When the original data of the image layer is parsed from the original file, obtain the layer content data and the layer basic data from the original data of the image layer; wherein, the layer basic data includes: layer position, layer size, and layer rotation angle;

[0094] Wherein, the layer content data is in Base64 format.

[0095] It should also be noted that when the original file is a PSD file, the image layer includes: two types, namely vector shape layer and picture layer; wherein, the vector shape layer is a graphic composed of geometric lines drawn by the user, and the picture layer is a photo, sticker, screenshot, etc.

[0096] Step B22: Store the layer content data in the cloud and obtain the corresponding cloud storage address;

[0097] Since the layer content data in Base64 format occupies a relatively large space, in order to reduce unnecessary space occupation, the layer content data in Base64 format needs to be stored in the cloud server, and only the cloud storage address is stored in the standard image layer data, thereby reducing the data size of the standard image layer data.

[0098] Step B23: Form the standard image layer data corresponding to the original data with the layer basic data and the cloud storage address.

[0099] It should be noted that since the data of the image layer in the original file is all in Base64 format, and the image editing platform can directly use the Base64 format data to obtain the image corresponding to the image layer; therefore, in practical applications, the original data of the image layer can also be directly used as the standard image layer data used by the image editing platform, without the need for additional data processing procedures in the manner of the above-mentioned steps B21 to B23.

[0100] Further, when implementing the conversion of the original data of the layer into the standard layer data used by the image editing platform according to the preset rules in step B2, the following steps may further be included:

[0101] Step B21': When the original data of the text layer is parsed from the original file, parse out the text font data, text position data, and text color data from the original data of the text layer;

[0102] Step B22': Input the text position data into a preset mapping function, and use the output of the preset mapping function as the standard position data;

[0103] Step B23': Generate standard text layer data corresponding to the original data based on the text font data, standard position data, and text color data.

[0104] In this embodiment, the image editing platform only includes the following two types of layers: text layers and image layers; that is, convert the original data of the text layer in the original file into standard text layer data, and convert the original data of the image layer in the original file into standard image layer data.

[0105] Preferably, the step B22' specifically includes:

[0106] Step C1: Parse the original position parameters from the text position data;

[0107] Step C2: Calculate the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameters;

[0108] Step C3: Calculate the standard position parameters in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template.

[0109] It should be noted that since the position parameters used to describe the text layer in the original file may vary for design drafts in different formats, in this application, the position parameters used to describe the text layer in the original file are converted into the position parameters used by the image editing platform to describe the text layer for unified management.

[0110] Among them, the step C1 specifically includes:

[0111] Parse the following original position parameters from the text position data: xx, xy, yy, yx, tx, ty, top, bottom, left, right;

[0112] Wherein, xx is the horizontal scaling parameter in the text position data, xy is the horizontal skew parameter in the text position data, yy is the vertical scaling parameter in the text position data, yx is the vertical skew parameter in the text position data, tx is the horizontal translation parameter in the text position data, ty is the vertical translation parameter in the text position data, top is the distance value from the upper boundary of the text outer bounding box in the design draft to the upper boundary of the design draft in the text position data, bottom is the distance value from the lower boundary of the text outer bounding box in the design draft to the lower boundary of the design draft in the text position data, left is the distance value from the left boundary of the text outer bounding box in the design draft to the left boundary of the design draft in the text position data, and right is the distance value from the right boundary of the text outer bounding box in the design draft to the right boundary of the design draft in the text position data.

[0113] The specific steps of step C2 include:

[0114] Calculate the upper left vertex position (tlx, tly) of the text outer bounding box in the editable image template, the upper right vertex position (trx, try) of the text outer bounding box in the editable image template, the lower left vertex position (blx, bly) of the text outer bounding box in the editable image template, and the lower right vertex position (brx, bry) of the text outer bounding box in the editable image template according to the following formula:

[0115] tlx = xx * left + xy * top + tx, tly = yx * left + yy * top + ty,

[0116] trx = yx * right + yy * top + tx, try = yx * right + yy * top + ty,

[0117] blx = xx * left + xy * bottom + tx, bly = yx * left + yy * bottom + ty,

[0118] brx = xx * right + xy * bottom + tx, bry = yx * right + yy * bottom + ty;

[0119] Determine the value of (-atan2(yx, xx) * 180 / π) as the rotation angle rotate of the text outer bounding box in the editable image template.

[0120] The specific steps of step C3 include:

[0121] Step C31: Determine the minimum value among tlx, trx, blx, and brx as the left parameter fl, and determine the maximum value as the right parameter fr;

[0122] Step C32: Determine the minimum value among tly, try, bly, and bry as the upper parameter ft, and determine the maximum value as the upper parameter fb;

[0123] Step C33: Determine the left parameter fl as the distance value x from the upper left vertex of the outer bounding box of the text in the standard position data to the left boundary of the template;

[0124] Step C34: Determine the upper parameter ft as the distance value y from the upper left vertex of the outer bounding box of the text in the standard position data to the upper boundary of the template;

[0125] Step C35: Determine the value of |fr - fl| as the width value w of the outer bounding box of the text in the standard position data;

[0126] Step C36: Determine the value of |fb - ft| as the height value h of the outer bounding box of the text in the standard position data;

[0127] Step C37: Determine the distance value x, the distance value y, the width value w, the height value h, and the rotation angle rotate as the standard position parameters in the standard position data.

[0128] Through the above steps, the following ten parameters in the text position data of the original file: xx, xy, yy, yx, tx, ty, top, bottom, left, right, are converted into the following 5 parameters in the standard position data of the editable image template: x, y, w, h, rotate.

[0129] In addition, in the original file, the artwork area corresponding to the design artwork can be defined by the upper boundary of the design artwork, the lower boundary of the design artwork, the left boundary of the design artwork, and the right boundary of the design artwork; in the original file, the area of the text layer can be defined by the upper boundary of the outer bounding box of the text, the lower boundary of the outer bounding box of the text, the left boundary of the outer bounding box of the text, and the right boundary of the outer bounding box of the text; that is, the area of the text layer is equal to the outer bounding box of the text. In the image editing platform, the template area corresponding to the editable image template can be defined by the upper boundary of the template, the lower boundary of the template, the left boundary of the template, and the right boundary of the template; in the image editing platform, the area of the text layer can be defined by the position of the upper left vertex of the outer bounding box of the text, the width of the outer bounding box of the text, the height of the outer bounding box of the text, and the rotation angle of the outer bounding box of the text; that is, the area of the text layer is equal to the outer bounding box of the text. Generally, the area of the text layer is smaller than the area of the artwork area or the template area.

[0130] Preferably, the step B23', specifically includes:

[0131] Step D1: Determine whether there is a font corresponding to the text font data in the font library of the image editing platform; if so, determine the text font data as the standard font data, and if not, determine the preset font data as the standard font data;

[0132] It should be noted that due to copyright reasons, the image editing platform has its own font library, and the font types in the font library of the image editing platform may be different from the font types used by the drawing software that generates the original file. Therefore, when the font used in the original file is not in the font library of the image editing platform, it needs to be converted to the standard font of the image editing platform.

[0133] Step D2: Determine whether there is a fill color in the text color data; if so, determine the fill color as the standard color data, and if not, determine the basic color in the text color data as the standard color data;

[0134] It should be noted that the values describing the font color in the original file include: basic color and fill color, and the priority of the fill color is greater than that of the basic color; that is, when the basic color of a text layer is black and the fill color is red, the text will be rendered as red at this time. Therefore, in the image editing platform, the fill color will be preferentially used as the standard color data.

[0135] Step D3: Form the standard text layer data with the standard font data, the standard color data, and the standard position data;

[0136] It should also be noted that when the font types used by the image editing platform and the drawing software that generates the original file are exactly the same and the font color determination rules are exactly the same, the text font data, the standard position data, and the text color data can be directly formed into the standard text layer data corresponding to the original data without the above Steps D1 to D3.

[0137] In addition, the original data for the text layer in the original file may also include additional data; where the additional data includes at least one of the following: font size, selection area size, whether it is bold, whether it is italic, whether it is vertically arranged, whether there is a middle line, whether there is an underline; if the original data of the text layer includes additional data, the additional data also needs to be directly added to the standard text layer data.

[0138] It should also be noted that the original file will also include group layers. Among them, the group layers are composed of multiple nested layers, that is, the group layers will include text layers, image layers, and / or vector shape layers; in actual applications, for the smallest unit layer that makes up the group layer, data parsing is still performed in the above manner, but it is also necessary to parse the nested relationship between each smallest unit layer in the group layer and store this nested relationship in the editable image template.

[0139] Specifically, when implementing the step S103, the following steps may be included:

[0140] Step E1: Render a thumbnail corresponding to the design draft according to all standard layer data;

[0141] Preferably, the step E1 specifically includes the following steps:

[0142] Step E11: Use Canvas in JavaScript to render all standard layer data to obtain a PNG (Portable Network Graphics) thumbnail;

[0143] Step E12: Convert the PNG thumbnail into thumbnail data in Base64 format and store the thumbnail data in the cloud; among them, the thumbnail is an uneditable image.

[0144] Step E2: Obtain the marking information configured for the design draft; among them, the marking information includes at least one of the following: usage classification, usage scenario, single image / series information;

[0145] In this embodiment, in order to enable the backend of the image editing platform to more efficiently manage each editable image template, and enable users to more conveniently query each editable image template through the front-end of the image editing platform, additional marking information will also be added to each editable image template to classify and manage each editable template; among them, when the designer designs the design draft, marking information can be configured for the design draft; preferably, the usage classification includes: product operation, marketing promotion, the usage scenario includes: medical beauty surgery projects, non-surgery projects, and the single image / series information includes: single image, series; for example, the user classification of a design draft is product operation, the usage scenario is a medical beauty surgery project, and it is a single image. It should also be noted that a single image means that an editable template only contains one image, while a series means that an editable template includes multiple images. In this embodiment, through the marking information, the editable image template has an indexing feature, which is convenient for designers or users to filter and query.

[0146] Step E3: Form an editable image template corresponding to the design draft with the thumbnail, the marking information, and all standard layer data.

[0147] In this embodiment, an editable image template includes: a thumbnail for front-end display to represent the template content, marking information for classifying and querying the template, and standard layer data for visualizing the template.

[0148] Further, after the step S103, the method further includes:

[0149] Step F1: When receiving an edit instruction, obtain a target editable image template corresponding to the edit instruction from a preset template library.

[0150] Step F2: Draw a template boundary corresponding to the draft basic information in the target editable image template in the editing interface of the image editing platform.

[0151] Step F3: Obtain each standard layer data in the target editable image template, and sequentially draw layer contents corresponding to each standard layer data within the template boundary; each layer content is editable content.

[0152] In this embodiment, when the user uses an editable image template through the image editing platform, the template content corresponding to the editable image template can be displayed in the editing interface of the image editing platform for the user to edit the template content in this editing interface to obtain a product display image required by the user.

[0153] Even further, before the step F1, the method further includes:

[0154] Step G1: Display the thumbnails of each editable image template in the preset template library in a preset arrangement manner in the display interface of the image editing platform.

[0155] Step G2: When a preset operation on a target thumbnail is detected in the display interface, trigger the edit instruction.

[0156] In this embodiment, the thumbnails of each editable image template can be displayed through the display interface of the image editing platform for the user to select; in addition, the user can screen the templates through the marking information of each editable image template to quickly find the target editable image template required by himself.

[0157] In addition, in practical applications, all functions of the front end and back end of the image editing platform can be implemented through the JavaScript language. Using the JavaScript language for both the front end and back end allows developers of the image editing platform to develop and maintain the image editing platform more efficiently.

[0158] Through this embodiment, designers only need to input the original file for describing the design draft into the image editing platform, and the image editing platform can automatically parse the original file and convert it into an editable image template that can be used by the image editing platform. This process greatly simplifies the work process of designers and improves work efficiency. In addition, this embodiment can be applied to various image editing platforms and e-commerce platforms, providing a more convenient and efficient product display method for merchants.

[0159] Embodiment 2

[0160] An embodiment of the present invention provides a device for obtaining an editable image template, which is applied to an image editing platform, as Figure 2 shown. The device specifically includes the following components:

[0161] An acquisition module 201, which acquires the original file for describing the design draft; wherein, the design draft includes multiple layers;

[0162] A conversion module 202, which is used to parse the original data of each layer from the original file and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule;

[0163] A formation module 203, which is used to form an editable image template corresponding to the design draft according to all the standard layer data; wherein, the image editing platform uses the editable image template for visual display.

[0164] Specifically, the device further includes:

[0165] An analysis module, which is used to parse the draft basic information of the design draft from the original file; wherein, the draft basic information includes: draft size and draft position.

[0166] Specifically, the conversion module 202 includes:

[0167] A search unit, which is used to obtain the preset rule corresponding to the layer type from a preset rule library according to the layer type of the layer;

[0168] A processing unit, which is used to convert the original data of the layer into the standard layer data used by the image editing platform according to the preset rule.

[0169] Further, the processing unit is specifically configured to:

[0170] When the original data of the image layer is parsed from the original file, obtain the layer content data and the layer basic data from the original data of the image layer; wherein, the layer basic data includes: layer position, layer size, and layer rotation angle;

[0171] Store the layer content data in the cloud and obtain the corresponding cloud storage address;

[0172] Form the standard image layer data corresponding to the original data of the image layer with the layer basic data and the cloud storage address.

[0173] Further, the processing unit is also configured to:

[0174] When the original data of the text layer is parsed from the original file, parse the text font data, text position data, and text color data from the original data of the text layer;

[0175] Input the text position data into a preset mapping function, and use the output of the preset mapping function as the standard position data;

[0176] Form the standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data.

[0177] Furthermore, when the processing unit implements the function of inputting the text position data into a preset mapping function and using the output of the preset mapping function as the standard position data, it is specifically configured to:

[0178] Parse the original position parameter from the text position data;

[0179] Calculate the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameter;

[0180] Calculate the standard position parameter in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template.

[0181] Still further, when the processing unit implements the function of calculating the standard position parameter in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template, it is specifically configured to:

[0182] Obtain the upper left vertex position (tlx, tly), upper right vertex position (trx, try), lower left vertex position (blx, bly), and lower right vertex position (brx, bry) of the bounding box outside the text in the editable image template;

[0183] Determine the minimum value among tlx, trx, blx, and brx as the left parameter fl, and determine the maximum value as the right parameter fr;

[0184] Determine the minimum value among tly, try, bly, and bry as the upper parameter ft, and determine the maximum value as the lower parameter fb;

[0185] Determine the left parameter fl as the distance value x in the standard position data, which represents the distance from the upper left vertex of the bounding box outside the text to the left boundary of the template;

[0186] Determine the upper parameter ft as the distance value y in the standard position data, which represents the distance from the upper left vertex of the bounding box outside the text to the upper boundary of the template;

[0187] Determine the value of |fr - fl| as the width value w in the standard position data, which represents the width of the bounding box outside the text;

[0188] Determine the value of |fb - ft| as the height value h in the standard position data, which represents the height of the bounding box outside the text;

[0189] Determine the distance value x, the distance value y, the width value w, the height value h, and the rotation angle as the standard position parameters in the standard position data.

[0190] Furthermore, when the processing unit implements the function of calculating the position information and rotation angle of the bounding box outside the text in the editable image template according to the original position parameters, it specifically is used for:

[0191] Calculate the upper left vertex position (tlx, tly), the upper right vertex position (trx, try), the lower left vertex position (blx, bly), and the lower right vertex position (brx, bry) according to the following formula:

[0192] tlx = xx * left + xy * top + tx, tly = yx * left + yy * top + ty,

[0193] trx = yx * right + yy * top + tx, try = yx * right + yy * top + ty,

[0194] blx = xx * left + xy * bottom + tx, bly = yx * left + yy * bottom + ty,

[0195] brx = xx * right + xy * bottom + tx, bry = yx * right + yy * bottom + ty;

[0196] Wherein, xx is the horizontal scaling parameter in the text position data, xy is the horizontal skew parameter in the text position data, yy is the vertical scaling parameter in the text position data, yx is the vertical skew parameter in the text position data, tx is the horizontal translation parameter in the text position data, ty is the vertical translation parameter in the text position data, top is the distance value from the upper boundary of the outer bounding box of the text in the design draft to the upper boundary of the design draft in the text position data, bottom is the distance value from the lower boundary of the outer bounding box of the text in the design draft to the lower boundary of the design draft in the text position data, left is the distance value from the left boundary of the outer bounding box of the text in the design draft to the left boundary of the design draft in the text position data, and right is the distance value from the right boundary of the outer bounding box of the text in the design draft to the right boundary of the design draft in the text position data;

[0197] Determine the value of (-atan2(yx, xx) * 180 / π) as the rotation angle of the outer bounding box of the text in the editable image template.

[0198] In addition, when the processing unit implements the function of forming the standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data, it specifically includes:

[0199] Judge whether there is a font corresponding to the text font data in the font library of the image editing platform; if so, determine the text font data as the standard font data, if not, determine the preset font data as the standard font data;

[0200] Judge whether there is a fill color in the text color data; if so, determine the fill color as the standard color data, if not, determine the basic color in the text color data as the standard color data;

[0201] Form the standard text layer data with the standard font data, the standard color data, and the standard position data.

[0202] Specifically, the forming module 203 is used for:

[0203] Render a thumbnail corresponding to the design draft according to all the standard layer data;

[0204] Obtain the marking information configured for the design draft; wherein, the marking information includes at least one of the following: usage classification, usage scenario, single drawing / series information;

[0205] Form an editable image template corresponding to the design draft with the thumbnail, the marking information, and all standard layer data.

[0206] Furthermore, the device further includes:

[0207] An editing module, configured to, when receiving an editing instruction, obtain a target editable image template corresponding to the editing instruction from a preset template library; draw a template boundary corresponding to the drawing basic information in the target editable image template in the editing interface of the image editing platform; obtain each standard layer data in the target editable image template, and sequentially draw layer contents corresponding to each standard layer data within the template boundary; wherein each layer content is editable content.

[0208] Even further, the device further includes:

[0209] A display module, configured to display the thumbnails of each editable image template in the preset template library in a preset arrangement manner in the display interface of the image editing platform; when a preset operation on a target thumbnail is detected in the display interface, trigger the editing instruction.

[0210] Embodiment III

[0211] This embodiment also provides a computer device, such as a smart phone, a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower server, or a cabinet server (including an independent server, or a server cluster composed of multiple servers) that can execute programs. As Figure 3 shown, the computer device 30 of this embodiment at least includes, but is not limited to: a memory 301 and a processor 302 that can communicate with each other through a system bus. It should be noted that, Figure 3 only the computer device 30 with components 301 - 302 is shown, but it should be understood that it is not required to implement all the shown components, and more or fewer components can be alternatively implemented.

[0212] In this embodiment, the memory 301 (i.e., the readable storage medium) includes flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disc, etc. In some embodiments, the memory 301 may be an internal storage unit of the computer device 30, such as the hard disk or memory of the computer device 30. In other embodiments, the memory 301 may also be an external storage device of the computer device 30, such as a plug-in hard disk equipped on the computer device 30, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. Of course, the memory 301 may also include both the internal storage unit and the external storage device of the computer device 30. In this embodiment, the memory 301 is generally used to store the operating system and various application software installed on the computer device 30. In addition, the memory 301 may also be used to temporarily store various data that have been output or will be output.

[0213] In some embodiments, the processor 302 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other chips that obtain editable image templates based on PSD files. The processor 302 is generally used to control the overall operation of the computer device 30.

[0214] Specifically, in this embodiment, the processor 302 is used to execute the program of the method for obtaining editable image templates stored in the memory 301. When the program of the method for obtaining editable image templates is executed, the following steps are implemented:

[0215] Obtain the original file for describing the design artwork; wherein, the design artwork includes multiple layers;

[0216] Parse the original data of each layer from the original file, and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule;

[0217] Form an editable image template corresponding to the design artwork according to all the standard layer data.

[0218] For the specific implementation process of the above method steps, reference can be made to Embodiment 1, and this embodiment will not be repeated here.

[0219] Embodiment 4

[0220] This embodiment also provides a computer-readable storage medium, such as a flash memory, a hard disk, a multimedia card, a card-type memory (e.g., SD or DX memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, an optical disk, a server, an App application store, etc., on which a computer program is stored. When the computer program is executed by a processor, the following method steps are implemented:

[0221] Obtain the original file for describing the design artwork; wherein, the design artwork includes multiple layers;

[0222] Parse the original data of each layer from the original file, and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule;

[0223] Form an editable image template corresponding to the design artwork according to all the standard layer data.

[0224] For the specific implementation process of the above method steps, reference can be made to Embodiment 1, and this embodiment will not be repeated here.

[0225] It should be noted that in this article, the terms "include", "comprise" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent to such process, method, article or device. Without more limitations, the element defined by the statement "including one..." does not exclude the existence of another identical element in the process, method, article or device including the element.

[0226] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0227] Through the description of the above embodiments, those skilled in the art can clearly understand that the above embodiment methods can be implemented by means of software plus a necessary general hardware platform. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method.

[0228] The above are only the preferred embodiments of the present invention, and do not limit the patent scope of the present invention accordingly. Any equivalent structure or equivalent process transformation made by using the specification and drawings of the present invention, or directly or indirectly applied in other related technical fields, shall be equally included in the patent protection scope of the present invention.

Claims

1. A method for obtaining an editable image template, characterized in that, Applied to an image editing platform, the method includes: Obtain the original file for describing the design artwork; wherein, the design artwork includes multiple layers; Parse the original data of each layer from the original file, and respectively convert the original data of each layer into the standard layer data used by the image editing platform according to a preset rule; Form an editable image template corresponding to the design artwork according to all the standard layer data.

2. The method for obtaining an editable image template according to claim 1, wherein The step of parsing the original data of each layer from the original file and respectively converting the original data of each layer into the standard layer data used by the image editing platform according to a preset rule specifically includes: Obtain the preset rule corresponding to the layer type from a preset rule library according to the layer type of the layer; Convert the original data of the layer into the standard layer data used by the image editing platform according to the preset rule.

3. The method for obtaining an editable image template according to claim 2, wherein, The step of converting the original data of the layer into the standard layer data used by the image editing platform according to the preset rule specifically includes: When parsing the original data of an image layer from the original file, obtain the layer content data and the layer basic data from the original data of the image layer; wherein, the layer basic data includes: layer position, layer size, and layer rotation angle; Store the layer content data in the cloud and obtain the corresponding cloud storage address; Form the standard image layer data corresponding to the original data of the image layer with the layer basic data and the cloud storage address.

4. The method for obtaining an editable image template according to claim 2, wherein, The step of converting the original data of the layer into the standard layer data used by the image editing platform according to the preset rule specifically includes: When parsing the original data of a text layer from the original file, parse the text font data, text position data, and text color data from the original data of the text layer; Input the text position data into a preset mapping function, and use the output of the preset mapping function as the standard position data; Form the standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data.

5. The method for obtaining an editable image template according to claim 4, wherein, The step of inputting the text position data into a preset mapping function and using the output of the preset mapping function as the standard position data specifically includes: Parse the original position parameter from the text position data; Calculate the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameter; Calculate the standard position parameter in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template.

6. The method for obtaining an editable image template according to claim 5, wherein The step of calculating the standard position parameter in the standard position data according to the position information and rotation angle of the outer bounding box of the text in the editable image template specifically includes: Obtain the upper left vertex position (tlx, tly), upper right vertex position (trx, try), lower left vertex position (blx, bly), and lower right vertex position (brx, bry) of the outer bounding box of the text in the editable image template; Determine the minimum value among tlx, trx, blx, and brx as the left parameter fl, and determine the maximum value as the right parameter fr; Determine the minimum value among tly, try, bly, and bry as the upper parameter ft, and determine the maximum value as the lower parameter fb; Determine the left parameter fl as the distance value x in the standard position data, which represents the distance from the upper left vertex of the outer bounding box of the text to the left boundary of the template; Determine the upper parameter ft as the distance value y in the standard position data, which represents the distance from the upper left vertex of the outer bounding box of the text to the upper boundary of the template; Determine the value of |fr - fl| as the width value w in the standard position data, which represents the width of the outer bounding box of the text; Determine the value of |fb - ft| as the height value h in the standard position data, which represents the height of the outer bounding box of the text; Determine the distance value x, the distance value y, the width value w, the height value h, and the rotation angle as the standard position parameters in the standard position data.

7. The method for obtaining an editable image template according to claim 6, wherein Calculating the position information and rotation angle of the outer bounding box of the text in the editable image template according to the original position parameters specifically includes; Calculate the upper left vertex position (tlx, tly), the upper right vertex position (trx, try), the lower left vertex position (blx, bly), and the lower right vertex position (brx, bry) according to the following formula: tlx = xx * left + xy * top + tx, tly = yx * left + yy * top + ty, trx = yx * right + yy * top + tx, try = yx * right + yy * top + ty, blx = xx * left + xy * bottom + tx, bly = yx * left + yy * bottom + ty, brx = xx * right + xy * bottom + tx, bry = yx * right + yy * bottom + ty; Where xx is the horizontal scaling parameter in the text position data, xy is the horizontal skew parameter in the text position data, yy is the vertical scaling parameter in the text position data, yx is the vertical skew parameter in the text position data, tx is the horizontal translation parameter in the text position data, ty is the vertical translation parameter in the text position data, top is the distance value from the upper boundary of the outer bounding box of the text in the design drawing to the upper boundary of the design drawing, bottom is the distance value from the lower boundary of the outer bounding box of the text in the design drawing to the lower boundary of the design drawing, left is the distance value from the left boundary of the outer bounding box of the text in the design drawing to the left boundary of the design drawing, and right is the distance value from the right boundary of the outer bounding box of the text in the design drawing to the right boundary of the design drawing; Determine the value of (-atan2(yx, xx) * 180 / π) as the rotation angle of the outer bounding box of the text in the editable image template.

8. The method for obtaining an editable image template according to claim 4, characterized in that, Forming standard text layer data corresponding to the original data of the text layer according to the text font data, the standard position data, and the text color data specifically includes: Determine whether there is a font corresponding to the text font data in the font library of the image editing platform; if so, determine the text font data as the standard font data, and if not, determine the preset font data as the standard font data; Determine whether there is a fill color in the text color data; if so, determine the fill color as the standard color data, and if not, determine the basic color in the text color data as the standard color data; Form the standard text layer data from the standard font data, the standard color data, and the standard position data.

9. The method for obtaining an editable image template according to any one of claims 1-8, characterized in that, After obtaining the original file for describing the design draft, the method further includes: Parse the draft basic information of the design draft from the original file; wherein, the draft basic information includes: draft size and draft position.

10. The method for obtaining an editable image template according to claim 9, characterized in that, Forming an editable image template corresponding to the design draft according to all the standard layer data specifically includes: Render a thumbnail corresponding to the design draft according to all the standard layer data; Obtain the marking information configured for the design draft; wherein, the marking information includes at least one of the following: usage classification, usage scenario, single picture / series information; Form an editable image template corresponding to the design draft from the thumbnail, the marking information, and all the standard layer data.

11. The method for obtaining an editable image template according to claim 10, wherein After forming an editable image template corresponding to the design draft according to all the standard layer data, the method further includes: When receiving an edit instruction, obtain a target editable image template corresponding to the edit instruction from a preset template library; Draw a template boundary corresponding to the draft basic information in the target editable image template on the edit interface of the image editing platform; Obtain each standard layer data in the target editable image template, and sequentially draw layer content corresponding to each standard layer data within the template boundary; wherein each layer content is editable content.

12. The method for obtaining an editable image template according to claim 11, wherein Before obtaining a target editable image template corresponding to the edit instruction from the preset template library when receiving the edit instruction, the method further includes: Display the thumbnails of each editable image template in the preset template library on the display interface of the image editing platform in a preset arrangement; When a preset operation on the target thumbnail is detected in the display interface, trigger the edit instruction.

13. An apparatus for obtaining an editable image template, characterized in that, Applied to an image editing platform, the device includes: An acquisition module, configured to acquire an original file for describing a design draft; wherein, the design draft includes multiple layers; A conversion module, configured to parse the original data of each layer from the original file, and respectively convert the original data of each layer into standard layer data used by the image editing platform according to a preset rule; A forming module, configured to form an editable image template corresponding to the design draft according to all the standard layer data.

14. A computer device, the computer device comprising: A memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor, when executing the computer program, implements the steps of the method according to any one of claims 1 to 12.

15. A computer-readable storage medium having a computer program stored thereon, characterized in that, The computer program, when executed by the processor, implements the steps of the method according to any one of claims 1 to 12.

Images