A method for generating posters in batches based on a Photoshop file

Abstract

The application discloses a method for generating posters in batches based on Photoshop files, and comprises the following steps: S1, converting Photoshop source file design drawings into browser html display elements in batches; S2, modifying the html display elements of each design drawing in batches; S3, converting each html display element into a base64 picture; and S4, downloading the base64 pictures in batches. The method has the advantages that: through analysis and assembly of source file data, grouping, layering, size and other related data of the source file, the related data can be accurately positioned to the size and position of each element, and the design drawing can be completely restored. Through color integration processing of the source file data, the color can be normally rendered and displayed, the background color of the design drawing can be normally restored, and the user can obtain the style and design of the original design drawing without distortion. Through data driving and algorithm combination, the design drawing elements can be modified in batches, and after modification, all the modified pictures can be downloaded at one time, thereby improving the modification efficiency.

Description

Technical Field

[0001] The present invention relates to the technical field of poster design, and in particular to a method for batch generating posters based on Photoshop files. Background Art

[0002] Currently, a variety of products and methods have emerged for parsing Photoshop source files to generate posters. These products and technologies mainly focus on areas such as restoring front-end design drawings, converting Photoshop design drawings into images, and Photoshop design parsing plug-ins.

[0003] In the field of parsing Photoshop files, there are the following problems:

[0004] 1. When uploading Photoshop files for parsing, current similar products may cause the design's aspect ratio to be inconsistent with the original design. For example, the original design file's width and height are 375*700 pixels, but after uploading it using similar products, it may be parsed as 500*1000 pixels.

[0005] 2. The color of the gradient of the background image will be distorted. For example, a background color with a gradient from red to blue may be resolved as light yellow, which greatly affects the restoration effect from the design drawing to the picture.

[0006] 3. After converting the design drawing into a picture, usually only a single picture can be modified, and batch modification and batch downloading cannot be achieved, which significantly reduces work efficiency. Summary of the Invention

[0007] The purpose of the present invention is to provide a method for batch generating posters based on Photoshop files, thereby solving the above-mentioned problems existing in the prior art.

[0008] In order to achieve the above object, the technical solution adopted by the present invention is as follows:

[0009] A method for batch generating posters based on Photoshop files, comprising the following steps:

[0010] S1. Batch convert Photoshop source file design drawings into browser HTML display elements;

[0011] S2. Batch modify the HTML display elements of each design drawing;

[0012] S3. Convert each HTML display element into a base64 image;

[0013] S4. Batch download base64 images.

[0014] Preferably, step S1 specifically includes parsing the Photoshop source file design drawing, obtaining the data structure, analyzing the data structure, finding the relevant data required for rendering the layer, and obtaining readable and usable preliminary data after disassembling and assembling the relevant data; copying and assembling the preliminary data again according to the number of design drawings that need to be modified in batches, and after the assembly is completed, performing browser rendering according to the characteristics of each data to obtain the html display elements of each design drawing in the browser.

[0015] Preferably, the data structure includes layer, psd, and child;

[0016] The layer stores text and font data;

[0017] The psd file stores the basic data of the source file;

[0018] The _ch il dren stores sublayer data.

[0019] Preferably, the relevant data required for rendering the layer includes layer, text, picture, color, font, sub-weight, text size, and line height.

[0020] Preferably, step S2 is specifically as follows: when multiple design drawings have been rendered in the browser, by clicking on a certain html display element, a corresponding number of input boxes will appear on the right side of the design drawing. Each input box corresponds to a modification item of the html display element of each design drawing. When the modification in the input box is completed, click OK to complete the batch modification of the html display elements of the design drawing.

[0021] Preferably, step S3 specifically includes obtaining the HTML display element name of each design drawing, obtaining all HTML display elements based on the HTML display element name, and then converting these HTML display elements one by one into base64 images through the HTML 2Canvas dependency library, thereby converting each design drawing into a base64 image.

[0022] Preferably, step S4 specifically includes obtaining base64 images converted from all design drawings, compressing the base64 images of all design drawings by setting the image format and resolution, and compressing them into a zip suffix format, and using saveAs to download the compressed files.

[0023] The beneficial effects of the present invention are: 1. Complete restoration of the source file design drawing: by analyzing the source file data and assembling the data as well as the source file's grouping, layers, size and other related data, parsing and classifying the related data can accurately locate the size and position of each element, and completely restore the design drawing. 2. Solve the problem of background color distortion: by integrating the colors of the source file data, the colors can be rendered and displayed normally, and the background color of the design drawing can be restored normally, so that the user can obtain the style and design of the original design drawing without distortion. 3. Batch modification and batch download: through the combination of data-driven and algorithmic, the design drawing elements can be modified in batches. After the modification, all modified pictures can be downloaded with one click, thereby improving the modification efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 Schematic diagram of the method in the embodiment of the present invention. DETAILED DESCRIPTION

[0025] In order to make the purpose, technical solutions and advantages of the present invention more clearly understood, the present invention will be further described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0026] like Figure 1 As shown, in this embodiment, in order to solve the problems of high communication cost and low efficiency in traditional poster design (which usually requires manual modification based on the text and pictures provided by three parties, and the process is cumbersome and time-consuming), the present invention provides a method for batch generating posters based on Photoshop files. When a designer completes a Photoshop file, the method of the present invention can be used to upload the original Photoshop file to the cloud. The business party can then customize and modify the text, pictures and other contents in batches based on the Photoshop file template uploaded to the cloud, thereby easily generating personalized poster pictures. This method reduces the communication cost and design cost between business and design, while improving the efficiency of poster production. The method of the present invention includes the following contents:

[0027] 1. Batch convert Photoshop source file design drawings into browser HTML display elements

[0028] Specifically, the Photoshop source file design diagram is parsed to obtain layer, psd, _child, and other data structures (layer stores text, font, and other data, _child stores sub-layer data, and psd stores basic data of the source file), the data structures need to be analyzed, and relevant data such as layers, texts, pictures, colors, fonts, font weights, font sizes, lines, and the like required for rendering layers are searched from the data, the relevant data is disassembled and assembled to obtain readable and usable preliminary data; the preliminary data is copied and assembled again according to the number of design diagrams that need to be modified in batches, and after assembly, each data is rendered according to its characteristics to obtain html display elements (complete restoration effect of the design diagram) of each design diagram in the browser.

[0029] In the embodiment, by deeply analyzing the grouping, layer, size, and other data of the source file, the related data is parsed and classified, the size and position information of each group and layer can be accurately obtained, with the aid of the data, layer drawing and position positioning can be performed, and thus complete restoration of the source file design diagram is realized.

[0030] In the embodiment, by deeply analyzing the color attribute of each layer in the source file, it is found that the background color attribute in the source file data cannot be directly used. Therefore, the present application displays the real background color by combining and arranging colors, thereby solving the problem of color distortion.

[0031] In the embodiment, by analyzing the source file data, encapsulation processing is performed based on the required data results, and after processing, the data can be directly rendered to the web page, thereby simplifying the intermediate processing process.

[0032] II. Batch modifying html display elements of each design diagram

[0033] Specifically, when multiple design diagrams have been rendered in the browser, by clicking an html display element, a corresponding number of input boxes appear on the right side of the design diagram, each input box corresponds to an html display element modification item of each design diagram, and when the modification in the input box is completed, the html display element batch modification of the design diagram can be completed by clicking OK.

[0034] In the embodiment, by copying the source data of the source file, the data is driven, multiple design diagrams can be displayed on the browser, the data is modified, the data drives the view, and the batch modification purpose is achieved; by data driving, the design diagram is converted into a picture format, thereby achieving the purpose of batch downloading, and further improving the efficiency.

[0035] This invention combines data-driven and algorithmic approaches to allow batch modification of design elements. By arranging and modifying input boxes in the editor, you can flexibly modify any one or more elements in the design. This design simplifies the process and operation of modifying elements, greatly improving modification efficiency.

[0036] 3. Convert each HTML display element into a base64 image

[0037] Specifically: Get the HTML display element name of each design drawing, get all HTML display elements based on the HTML display element name, and then convert these HTML display elements one by one into base64 images through the HTML 2Canvas dependency library, thereby converting each design drawing into a base64 image.

[0038] 4. Batch download base64 images

[0039] Specifically, obtain the base64 images converted from all design drawings, compress the base64 images of all design drawings by setting the image format and resolution, and compress them into a zip suffix format. Use saveAs to download the compressed files.

[0040] In this embodiment, the browser page elements are converted into base64 image format by using the html2Canvas dependency library, and all the design elements of the page are packaged and compressed through a loop algorithm, so that the operator can download all the page design element images with one click.

[0041] By adopting the above technical solution disclosed in the present invention, the following beneficial effects are obtained:

[0042] The present invention provides a method for batch generating posters based on Photoshop files, which can completely restore the source file design drawing: by analyzing the source file data and assembling the data as well as the grouping, layer, size and other related data of the source file, the relevant data is parsed and classified and sorted, so that the size and position of each element can be accurately located, and the design drawing can be completely restored. It can solve the problem of background color distortion: by integrating the colors of the source file data, the colors can be rendered and displayed normally, and the background color of the design drawing can be restored normally, so that the user can obtain the style and design of the original design drawing without distortion. It can be modified and downloaded in batches: by combining data-driven and algorithmic methods, the design drawing elements can be modified in batches. After the modification, all modified pictures can be downloaded with one click, thereby improving the modification efficiency.

[0043] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. A method for batch generating posters based on Photoshop files, characterized by: The following steps are included: S1. Batch convert Photoshop source file design drawings into browser HTML display elements; Step S1 specifically includes parsing the Photoshop source file design drawing, obtaining the data structure, analyzing the data structure, finding the relevant data required for rendering the layer, and disassembling and assembling the relevant data to obtain readable and usable preliminary data; The prepared data is copied and assembled again according to the number of design drawings that need to be modified in batches. After the assembly is completed, the browser is rendered according to the characteristics of each data to obtain the HTML display elements of each design drawing in the browser; The data structure includes layer, psd, and _children; The layer stores text and font data; The psd file stores the basic data of the source file; The _children stores the sub-layer data; The relevant data required for rendering the layer includes layer, text, image, color, font, sub-weight, text size, and line height; S2. Batch modify the HTML display elements of each design drawing; Step S2 is specifically as follows: when multiple design drawings have been rendered in the browser, by clicking on a certain HTML display element, a corresponding number of input boxes will appear on the right side of the design drawing. Each input box corresponds to a modification item of the HTML display element of each design drawing. After the modification is completed in the input box, click OK to complete the batch modification of the HTML display elements of the design drawing; S3. Convert each HTML display element into a base64 image; Step S3 specifically includes obtaining the HTML display element name of each design drawing, obtaining all HTML display elements based on the HTML display element name, and then converting these HTML display elements one by one into base64 images through the html2Canvas dependency library, thereby converting each design drawing into a base64 image; S4. Batch download base64 images.

2. The method for batch generating posters based on Photoshop files according to claim 1, characterized in that: Step S4 specifically obtains the base64 images converted from all design drawings, compresses the base64 images of all design drawings by setting the image format and resolution, and compresses them into a zip suffix format, and uses saveAs to download the compressed files.

Images