CN114791989A - Method, system and storage medium for analyzing PSD file based on browser - Google Patents

Abstract

The invention relates to a browser-based PSD file parsing method, system and storage medium. The method comprises the following steps: loading and parsing a PSD file to obtain binary data corresponding to the PSD file; The file structure of the PSD file is extracted from the binary data, the layer data is read from the file structure, and a layer list is constructed; according to the rendering rules of the browser, the corresponding content in the layer list is converted into The document object model DOM node described in the HTML+Cascading Style Sheet CSS format; the content corresponding to the PSD file is obtained by rendering the DOM node described in the HTML+Cascading Style Sheet CSS format by the browser . This solution processes the PDF file in the browser environment, directly outputs the corresponding HTML structure, and hands it to the browser for rendering without special software for parsing.

Description

A browser-based PSD file parsing method, system and storage medium

technical field

The invention relates to the field of browser application, in particular to a browser-based PSD file parsing method, system and storage medium.

Background technique

The PSD format (Photoshop Document) file is a graphic file format, which needs to be read and parsed by special software. The conventional method is to purchase Adobe Photoshop and install it on the computer, and then use Adobe Photoshop to open the corresponding PSD file. This is largely limited to the client-side environment, and it is difficult to run smoothly in some computer environments with low performance configurations, and when switching to another PSD files cannot be opened on a computer without the corresponding software installed.

Existing browsers have no prior art for implementing related functions.

The purpose of the present invention is to design a browser-based PSD file parsing method, system, and storage medium for the above-mentioned problems in the prior art.

SUMMARY OF THE INVENTION

Aiming at the problems existing in the above-mentioned prior art, the present invention provides a browser-based PSD file parsing method, system, and storage medium, which can effectively solve the existing problems in the above-mentioned prior art.

The technical scheme of the present invention is:

A browser-based PSD file parsing method, including the following steps:

Loading and parsing the PSD file to obtain binary data corresponding to the PSD file;

According to the PSD format rule, extract the file structure of the PSD file from the binary data, read the layer data from the file structure, and construct a layer list;

According to the rendering rules of the browser, the corresponding content in the layer list is converted into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format;

The content corresponding to the PSD file is obtained by rendering the content of the PSD file according to the document object model DOM node described in the HTML+Cascading Style Sheet CSS format by the browser.

Further, the loading and parsing of the PSD file to obtain binary data corresponding to the PSD file include:

Load the PSD file into the memory through the browser, call the FileReader.readAsArrayBuffer interface of the browser to read the PSD file, and obtain binary data corresponding to the PSD file.

Further, the layer data includes at least one or more of picture layer data, text layer data, and shape layer data.

Further, the step of reading layer data from the file structure and constructing a layer list includes:

If the layer data includes picture layer data, read one by one from the picture layer data according to the arrangement order of the layers;

If the layer data includes text layer data and/or shape layer data, the text layer data and/or shape layer data are directly read.

Further, the reading from the picture layer data one by one according to the arrangement order of the layers includes:

The picture data is read from the file structure, the ID of each picture is extracted from the picture data, and the pixel data of each picture is searched and read according to the ID of each picture.

Further, if the layer data includes image layer data, converting the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format includes:

Use the CanvasRenderingContext2D.putImageData interface of the browser to draw the picture layer data on the HTMLCanvasElement canvas of the browser according to the arrangement order of the layers, and call the HTMLCanvasElemen.toDataURL interface of the browser to obtain the picture image The Uniform Resource Locator URL of the layer data;

Convert the URL into the node type of the DOM node described in HTML, and convert the image attribute in the image layer data into description content in CSS format.

Further, if the layer data includes text layer data and/or shape layer data, converting the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format. include:

Convert the element type corresponding to the text layer data and/or the shape layer data to the node type of the DOM node described in HTML, and convert the information attributes in the text layer data and/or the shape layer data Description content in CSS format.

Further, the content rendered corresponding to the PSD file obtained by the browser according to the document object model DOM node described in the HTML+Cascading Style Sheet CSS format includes:

The HTMLElement.appendChild function of the browser is called to render the DOM node to the page of the browser to obtain the corresponding presented content of the PSD file.

A browser-based PSD file parsing system, including the following modules:

A binary conversion module for loading and parsing the PSD file to obtain binary data corresponding to the PSD file;

a layer list building module, configured to extract the file structure of the PSD file from the binary data according to the PSD format rule, read layer data from the file structure, and construct a layer list;

a web page format conversion module, configured to convert the corresponding content in the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format according to the rendering rules of the browser;

The rendering module is used for rendering the content corresponding to the PSD file through the browser rendering according to the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format.

A computer-readable storage medium storing a computer program, when the computer program is executed by a processor, implements the browser-based PSD file parsing method.

Accordingly, the present invention provides the following effects and/or advantages:

The present application reads the layer data from the file structure, constructs a layer list, and converts it into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format, which can be recognized and displayed by the browser. , allowing you to browse PSD files without Photoshop software. The present invention can make the user get away from the relevant software, so long as there is a browser, the PSD file can be browsed. This solution processes the PSD file in the browser environment, directly outputs the corresponding HTML structure, and hands it to the browser for rendering, which can save the trouble of installing software, and can better praise the device and cross-platform, as long as there is a browser Any device (mobile phone, Pad, etc.) can be opened.

According to the specific content in the PSD layer data, the application specifically divides the data to be converted into the content of the HTML+Cascading Style Sheet CSS format into pictures, graphics and text, and adopts different strategies to convert according to different data, which can get the corresponding effect. Specifically, use the CanvasRenderingContext2D.putImageData interface of the browser to draw the image layer data on the HTMLCanvasElement canvas of the browser according to the arrangement order of the layers, and call the HTMLCanvasElemen.toDataURL interface of the browser to get the result. Describe the Uniform Resource Locator URL of the picture layer data; convert the URL into the node type of the DOM node described in HTML, and convert the picture attribute in the picture layer data into the description content in CSS format. Convert the element type corresponding to the text layer data and/or the shape layer data to the node type of the DOM node described in HTML, and convert the information attributes in the text layer data and/or the shape layer data Description content in CSS format. The node and CSS format corresponding to the corresponding content can be obtained respectively.

It is to be understood that both the foregoing general description and the following detailed description of the present invention are exemplary and explanatory and are intended to provide further explanation of the invention as claimed.

Description of drawings

FIG. 1 is a schematic flow chart of the present invention.

Figure 2-3 is a schematic diagram of the structure of the PSD file.

Figure 4 is a rendering effect diagram of the PSD file to be parsed opened with Photoshop.

Figure 5 shows the renderings drawn by the CanvasRenderingContext2D.putImageData interface.

FIG. 6 is a schematic diagram of a browser processing process of the present invention.

Detailed ways

In order to facilitate the understanding of those skilled in the art, the present invention will now be further described in detail with reference to the accompanying drawings. their sequence, and can even be executed simultaneously or partially simultaneously,

Referring to Figures 1 and 6, a browser-based PSD file parsing method includes the following steps:

S1, load and parse the PSD file to obtain binary data corresponding to the PSD file;

In this step, the PSD file is loaded and parsed through the browser, and at this time, the PSD file is loaded into the memory, thereby obtaining binary data corresponding to the PSD file. The process that the browser loads the file into the memory and obtains the binary data is the prior art, which will not be described in detail here. In this embodiment, the format of the PSD file is a graphic file, the source of which is generated by Adobe's image processing software Photoshop, as shown in Figure 2 or 3, the file structure of the PSD format includes layers, channels, Information such as guides, annotations, and color modes. In the prior art, files in PSD format generally need to be viewed or edited through Photoshop software. It also includes the file structure of the PSD file and also includes the header file description information for some descriptions of the PSD file.

S2, according to the PSD format rule, extract the file structure of the PSD file from the binary data, read the layer data from the file structure, and construct a layer list.

Further, referring to FIG. 3 , the layer data includes at least one or more of picture layer data, text layer data, shape layer data, mask layer data, and the like.

A PSD file is an image data that is superimposed by multiple, multi-layered images. The PSD format specification not only specifies that the PSD file can contain information such as layers, channels, reference lines, annotations, and color modes as shown in Figure 2, but also specifies the location where these data are stored, the storage compression specification, and the description of the stored content. Etc., the existing technology is to use Photoshop software to read according to this specification, so as to obtain the corresponding file structure, and then extract information such as layers, channels, reference lines, annotations and color modes from the file structure. The content is displayed, synthesized, blocked, etc., so as to obtain the corresponding content.

Next, build the layer list.

The PSD file contains multiple layers, each layer corresponds to an image, which can be an image, text, etc. In this step, by reading each layer, and then summarizing the relevant information of each layer, for example, the font, size, color and other related information of the text layer can be obtained, and the format, size, and color of the image layer can be obtained. width, height, etc. After summarizing this information, arrange and summarize into a layer list.

Further, the step of reading layer data from the file structure and constructing a layer list includes:

If the layer data includes picture layer data, read one by one from the picture layer data according to the arrangement order of the layers;

If the layer data includes text layer data and/or shape layer data, the text layer data and/or shape layer data are directly read.

Because in the PSD file structure, the picture layers are saved in sequence. At the same time, the layer data may also include others, such as text and shapes (vector graphics). In this step, different reading strategies are selected for different layer data. If it is a picture layer, it will be read in the order of layers, and if it is text layer data and/or shape layer data, it will directly read text layer data and/or shape layer data.

For example, according to the content of Figure 4, Figure 4 includes a blank background as a graphic layer, a cat picture smaller than the background as a picture, and a line of text "I am a cat" as text. The list of layers summarized following the steps above looks like this:

S3, according to the rendering rule of the browser, the corresponding content in the layer list is converted into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format;

Specifically, in S3.1, if the layer data includes image layer data, converting the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format includes:

Use the CanvasRenderingContext2D.putImageData interface of the browser to draw the picture layer data on the HTMLCanvasElement canvas of the browser according to the arrangement order of the layers, and call the HTMLCanvasElemen.toDataURL interface of the browser to obtain the picture image The Uniform Resource Locator URL of the layer data;

Convert the URL into the node type of the DOM node described in HTML, and convert the image attribute in the image layer data into description content in CSS format.

In this step, CanvasRenderingContext2D.putImageData is the method used by the Canvas 2D API to draw data from an existing ImageData object to a bitmap. For example, the drawing area, drawing path, drawing style, etc. of the picture can be set in the browser. For example, referring to FIG. 5 , a rectangle, line, number, etc. with a width of w and a height of h as shown in FIG. 5 can be drawn through the CanvasRenderingContext2D.putImageData interface. The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of the <canvas> element. Through the CanvasRenderingContext2D.putImageData interface, a corresponding rectangle can be drawn on the HTMLCanvasElement canvas according to the canvas size of the layer list and other information, and the rectangle is used to fill the corresponding layer.

The HTMLCanvasElemen.toDataURL interface is used to return a data URI containing an image display. You can use the type parameter to set its type, which defaults to PNG format. In this step, a URL corresponding to the image is obtained through the HTMLCanvasElemen.toDataURL interface of the image obtained by the analysis in the above steps. The URL address is called by the browser as a subsequent image address, so that the browser can read the corresponding image.

By calling CanvasRenderingContext2D.putImageData of the browser, the pixel data is drawn to the HTMLCanvasElement canvas, and then HTMLCanvasElement.toDataURL is called to obtain the image address (base64URL).

In this step, the image obtained by the image conversion in FIG. 4 is converted into the corresponding DOM node:

<imgsrc="image address"/>

The corresponding CSS styles are:

S3.2, if the layer data includes text layer data and/or shape layer data, converting the layer list into a document object model DOM described in the HTML+Cascading Style Sheet CSS format Nodes include:

Convert the element type corresponding to the text layer data and/or the shape layer data to the node type of the DOM node described in HTML, and convert the information attributes in the text layer data and/or the shape layer data Description content in CSS format.

In this step, the text layer data or shape layer data can be directly converted in the browser. For text, according to the information in the layer list, directly call the browser's document.createElement interface to create a span HTML element, and convert the text The content can be filled in the span element. After adding the CSS style corresponding to the text, adjust the size, font, color and other attributes of the text. For vector layers, you can also directly draw a corresponding graphic, such as a rectangle, through the interface for drawing canvas in the browser. According to the information in the layer list, adjust the parameters such as the size and deformation of the rectangle to obtain the corresponding CSS style.

For example, in this step, the text in Figure 4 is converted into the corresponding DOM node:

<span>I am a cat</span>

The corresponding CSS styles are:

S4 , rendering the content corresponding to the PSD file by the browser according to the document object model DOM node described in the HTML+Cascading Style Sheet CSS format.

Specifically, further, the content corresponding to the PSD file rendered by the browser according to the document object model DOM node described in the HTML+Cascading Style Sheet CSS format includes:

The HTMLElement.appendChild function of the browser is called to render the DOM node to the page of the browser to obtain the corresponding presented content of the PSD file.

The HTMLElement.appendChild interface can change the runtime content of an HTML file in a number of ways through the HTML Document Object Model (DOM). Use AppendChild to add new elements to an existing document, or to move elements on the page. Finally, in the browser, the same rendering effect as Figure 4 is obtained.

Further, the loading and parsing of the PSD file to obtain binary data corresponding to the PSD file include:

Load the PSD file into the memory through the browser, call the FileReader.readAsArrayBuffer interface of the browser to read the PSD file, and obtain binary data corresponding to the PSD file.

Further, the reading from the picture layer data one by one according to the arrangement order of the layers includes:

The picture data is read from the file structure, the ID of each picture is extracted from the picture data, and the pixel data of each picture is searched and read according to the ID of each picture.

Since the data volume of the pixel data of the picture is relatively large, it is stored in the picture data section by reference. If it is a picture layer, there will be an ID of the picture data on the layer data. You can search the picture data section according to this ID. to the corresponding image pixel data. The corresponding picture pixel data is read from the picture data in FIG. 3 .

Further provide a browser-based PSD file parsing system, including the following modules:

A binary conversion module for loading and parsing the PSD file to obtain binary data corresponding to the PSD file;

a layer list building module, configured to extract the file structure of the PSD file from the binary data according to the PSD format rule, read layer data from the file structure, and construct a layer list;

a web page format conversion module, configured to convert the corresponding content in the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format according to the rendering rules of the browser;

The rendering module is used for rendering the content corresponding to the PSD file through the browser rendering according to the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format.

The working principle of a browser-based PSD file parsing system is the same as that of a browser-based PSD file parsing method notebook, which will not be repeated here.

A computer-readable storage medium is further provided, storing a computer program, wherein the computer program implements the browser-based PSD file parsing method when the computer program is executed by the processor.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block in the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to the processor of a general purpose computer, special purpose computer, embedded processor or other programmable data processing device to produce a machine such that the instructions executed by the processor of the computer or other programmable data processing device produce Means for implementing the functions specified in a flow or flow of a flowchart and/or a block or blocks of a block diagram.

These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory result in an article of manufacture comprising instruction means, the instructions The apparatus implements the functions specified in the flow or flow of the flowcharts and/or the block or blocks of the block diagrams.

These computer program instructions can also be loaded on a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process such that The instructions provide steps for implementing the functions specified in the flow or blocks of the flowcharts and/or the block or blocks of the block diagrams.

Although the preferred embodiments of the present invention have been described, additional changes and modifications to these embodiments may occur to those skilled in the art once the basic inventive concepts are known. Therefore, the appended claims are intended to be construed to include the preferred embodiment and all changes and modifications that fall within the scope of the present invention.

It will be apparent to those skilled in the art that various modifications and variations can be made in the present invention without departing from the spirit and scope of the invention. Thus, provided that these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims (10)

1. a browser-based PSD file analysis method, is characterized in that: comprise the following steps: Loading and parsing the PSD file to obtain binary data corresponding to the PSD file; According to the PSD format rule, extract the file structure of the PSD file from the binary data, read the layer data from the file structure, and construct a layer list; According to the rendering rules of the browser, the corresponding content in the layer list is converted into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format; The content corresponding to the PSD file is obtained by rendering the content of the PSD file according to the document object model DOM node described in the HTML+Cascading Style Sheet CSS format by the browser. 2. a kind of browser-based PSD file parsing method according to claim 1, is characterized in that: described loading and parsing PSD file, obtain the binary data corresponding to described PSD file comprises: Load the PSD file into the memory through the browser, call the FileReader.readAsArrayBuffer interface of the browser to read the PSD file, and obtain binary data corresponding to the PSD file. 3. A browser-based PSD file parsing method according to claim 1, wherein the layer data comprises at least one of picture layer data, text layer data, and shape layer data or variety. 4. a kind of browser-based PSD file parsing method according to claim 3, is characterized in that: described reading layer data from described file structure, constructing layer list comprises: If the layer data includes picture layer data, read one by one from the picture layer data according to the arrangement order of the layers; If the layer data includes text layer data and/or shape layer data, the text layer data and/or shape layer data are directly read. 5. A browser-based PSD file parsing method according to claim 4, wherein the reading from the picture layer data one by one according to the arrangement order of the layers comprises: The picture data is read from the file structure, the ID of each picture is extracted from the picture data, and the pixel data of each picture is searched and read according to the ID of each picture. 6. A browser-based PSD file parsing method according to claim 4, wherein if the layer data includes image layer data, the layer list is converted into a hypertext markup The Document Object Model DOM nodes described in the language HTML + Cascading Style Sheets CSS format include: Use the CanvasRenderingContext2D.putImageData interface of the browser to draw the picture layer data on the HTMLCanvasElement canvas of the browser according to the arrangement order of the layers, and call the HTMLCanvasElemen.toDataURL interface of the browser to obtain the picture image The Uniform Resource Locator URL of the layer data; Convert the URL into the node type of the DOM node described in HTML, and convert the image attribute in the image layer data into description content in CSS format. 7. A browser-based PSD file parsing method according to claim 4, wherein if the layer data includes text layer data and/or shape layer data, the layer The list is converted to a Document Object Model DOM node described in the HTML + Cascading Style Sheet CSS format including: Convert the element type corresponding to the text layer data and/or the shape layer data to the node type of the DOM node described in HTML, and convert the information attributes in the text layer data and/or the shape layer data Description content in CSS format. 8. a kind of browser-based PSD file parsing method according to claim 1, is characterized in that: described by browser according to the document object model DOM node described with hypertext markup language HTML+Cascading Style Sheet CSS format rendering to obtain The corresponding presented content of the PSD file includes: The HTMLElement.appendChild function of the browser is called to render the DOM node to the page of the browser to obtain the corresponding presented content of the PSD file. 9. a browser-based PSD file parsing system, is characterized in that: comprise the following modules: A binary conversion module for loading and parsing the PSD file to obtain binary data corresponding to the PSD file; a layer list building module, configured to extract the file structure of the PSD file from the binary data according to the PSD format rule, read layer data from the file structure, and construct a layer list; a web page format conversion module, configured to convert the corresponding content in the layer list into a document object model DOM node described in the HTML+Cascading Style Sheet CSS format according to the rendering rules of the browser; The rendering module is used for rendering the content corresponding to the PSD file through the browser rendering according to the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format. 10. A computer-readable storage medium storing a computer program, characterized in that, when the computer program is executed by a processor, a browser-based PSD file parsing according to any one of claims 1 to 8 is realized method.

Images