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

Abstract

The present 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; extracting the file structure of the PSD file from the binary data according to PSD format rules, reading layer data from the file structure, and constructing a layer list; converting the corresponding content in the layer list into a Document Object Model (DOM) node described in the Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the browser's rendering rules; and rendering the Document Object Model (DOM) node described in the Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format by the browser to obtain the content corresponding to the PSD file. This solution processes the PDF file in a browser environment, directly outputting the corresponding HTML structure, and handing it over to the browser for rendering, without the need for dedicated software to perform parsing.

Description

Technical Field

[0001] The present invention relates to the field of browser applications, and in particular to a browser-based PSD file parsing method, system, and storage medium. Background Art

[0002] PSD (Photoshop Document) files are a graphic file format that requires specialized software to read and parse. The conventional method involves purchasing and installing Adobe Photoshop on a computer, then using it to open the corresponding PSD file. This approach is highly limited to the client's environment and struggles to run smoothly on some computers with lower performance configurations. Furthermore, if the file is switched to another computer that doesn't have the corresponding software installed, the PSD file will not open.

[0003] Existing browsers do not have existing technologies to implement related functions.

[0004] The purpose of this invention is to design a browser-based PSD file parsing method, system, and storage medium to address the problems existing in the above-mentioned prior art. Summary of the Invention

[0005] In view of 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 problems existing in the above-mentioned prior art.

[0006] The technical solution of the present invention is:

[0007] A browser-based PSD file parsing method includes the following steps:

[0008] Load and parse the PSD file to obtain binary data corresponding to the PSD file;

[0009] According to PSD format rules, extracting the file structure of the PSD file from the binary data, reading layer data from the file structure, and constructing a layer list;

[0010] Converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rules of the browser;

[0011] The content presented corresponding to the PSD file is obtained by rendering the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format through the browser.

[0012] Furthermore, the loading and parsing of the PSD file to obtain binary data corresponding to the PSD file includes:

[0013] The PSD file is loaded into the memory through the browser, and the FileReader.readAsArrayBuffer interface of the browser is called to read the PSD file to obtain binary data corresponding to the PSD file.

[0014] Furthermore, the layer data includes at least one or more of picture layer data, text layer data, and shape layer data.

[0015] Furthermore, the reading of layer data from the file structure and constructing a layer list includes:

[0016] If the layer data includes picture layer data, reading the picture layer data one by one according to the arrangement order of the layers;

[0017] 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.

[0018] Furthermore, the reading the image layer data one by one according to the arrangement order of the layers includes:

[0019] The image data is read from the file structure, the ID of each image is extracted from the image data, and the pixel data of each image is searched and read according to the ID of each image.

[0020] Furthermore, if the layer data includes image layer data, converting the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes:

[0021] Use the browser's CanvasRenderingContext2D.putImageData interface to draw the image layer data on the browser's HTMLCanvasElement canvas according to the order of the layers, and call the browser's HTMLCanvasElemen.toDataURL interface to obtain the uniform resource locator URL of the image layer data;

[0022] The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image layer data are converted into description content in CSS format.

[0023] Furthermore, 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 a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes:

[0024] The element type corresponding to the text layer data and / or shape layer data is converted into the node type of the DOM node described in HTML, and the information attributes in the text layer data and / or shape layer data are converted into description content in CSS format.

[0025] Furthermore, the content corresponding to the PSD file rendered by the browser according to the Document Object Model DOM node described in the Hypertext Markup Language HTML+Cascading Style Sheet CSS format includes:

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

[0027] A browser-based PSD file parsing system includes the following modules:

[0028] A binary conversion module is used to load and parse the PSD file to obtain binary data corresponding to the PSD file;

[0029] A layer list construction module is used to extract the file structure of the PSD file from the binary data according to PSD format rules, read the layer data from the file structure, and construct a layer list;

[0030] 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 a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rules of the browser;

[0031] The rendering module is used to render the content corresponding to the PSD file through the browser according to the Document Object Model DOM node described in the Hypertext Markup Language HTML+Cascading Style Sheet CSS format.

[0032] A computer-readable storage medium stores a computer program, which implements the browser-based PSD file parsing method when executed by a processor.

[0033] Therefore, the present invention provides the following effects and / or advantages:

[0034] This 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 hypertext markup language HTML + cascading style sheet CSS format, which can be recognized and displayed by the browser, so that the PSD file can be browsed without the need for Photoshop software. The present invention allows users to browse PSD files without related software as long as there is a browser. This solution processes the PSD file in the browser environment, directly outputs the corresponding HTML structure, and lets the browser render it, which can save the trouble of installing software, and can also better cross devices and platforms. As long as there is a device with a browser (mobile phone, Pad, etc.), it can be opened.

[0035] This application specifically divides the data to be converted into the Hypertext Markup Language HTML+Cascading Style Sheet CSS format into pictures, graphics, and text according to the specific content in the PSD layer data, and adopts different strategies for conversion according to different data, so as to obtain content with corresponding effects. Specifically, the browser's CanvasRenderingContext2D.putImageData interface is used to draw the image layer data on the browser's HTMLCanvasElement canvas according to the arrangement order of the layers, and the browser's HTMLCanvasElemen.toDataURL interface is called to obtain the uniform resource locator URL of the image layer data; the URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image layer data are converted into description content in CSS format. The element type corresponding to the text layer data and / or shape layer data is converted into the node type of the DOM node described in HTML, and the information attributes in the text layer data and / or shape layer data are converted into description content in CSS format. The nodes and CSS formats corresponding to the corresponding content can be obtained respectively.

[0036] 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. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 It is a schematic diagram of the process of the present invention.

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

[0039] Figure 4 The rendering effect of opening the PSD file to be parsed with Photoshop.

[0040] Figure 5This is the effect diagram drawn for the CanvasRenderingContext2D.putImageData interface.

[0041] Figure 6 Schematic diagram of the browser processing process of the present invention. DETAILED DESCRIPTION

[0042] To facilitate understanding by those skilled in the art, the present invention will now be described in further detail with reference to the accompanying drawings. It should be understood that the steps mentioned in this embodiment, unless otherwise specified, can be adjusted in sequence according to actual needs, and can even be performed simultaneously or partially simultaneously.

[0043] refer to Figure 1 、 6 , a browser-based PSD file parsing method, comprising the following steps:

[0044] S1, loading and parsing a PSD file to obtain binary data corresponding to the PSD file;

[0045] In this step, the PSD file is loaded and parsed by the browser. At this time, the PSD file is loaded into the memory, thereby obtaining binary data corresponding to the PSD file. The process of the browser loading the file into the memory and obtaining the binary data is a prior art and will not be described in detail here. In this embodiment, the format of the PSD file is a graphic file, which is generated by Adobe's image processing software Photoshop, such as Figure 2 As shown in Figure 3, the PSD file structure includes information such as layers, channels, guides, annotations, and color modes. In the prior art, PSD files are generally viewed or edited using Photoshop. The file structure of the PSD file also includes header file description information, which is used to describe the PSD file.

[0046] S2. According to PSD format rules, 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.

[0047] Further, refer to Figure 3 The layer data includes at least one or more of picture layer data, text layer data, shape layer data, mask layer data, etc.

[0048] A PSD file is an image data composed of multiple, multi-layered images. In addition to the PSD format specification, the PSD file can also contain Figure 2The information such as layers, channels, reference lines, annotations and color modes shown also specifies the storage location of these data, storage compression specifications, description of the stored content, etc. The existing technology uses Photoshop software to read according to this specification to obtain the corresponding file structure, and then extracts the layers, channels, reference lines, annotations and color modes and other information from the file structure, and then performs display, synthesis, masking and other operations according to the edited content to obtain the corresponding content.

[0049] Next, build the layer list.

[0050] A PSD file contains multiple layers, each corresponding to an image, such as an image or text. This step reads each layer and summarizes its related information. For example, for a text layer, you can obtain its font, size, color, and other related information; for an image layer, you can obtain its format, width, height, and other information. After summarizing this information, it is arranged and compiled into a layer list.

[0051] Furthermore, the reading of layer data from the file structure and constructing a layer list includes:

[0052] If the layer data includes picture layer data, reading the picture layer data one by one according to the arrangement order of the layers;

[0053] 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.

[0054] Because image layers are stored in a sequential order in the PSD file structure, and layer data may also include other data, such as text and shapes (vector graphics), this step selects different read strategies for different layer data. If it is an image layer, it is read according to the order in which the layers are arranged. If it is text layer data and / or shape layer data, the text layer data and / or shape layer data is read directly.

[0055] For example, according to Figure 4 content, Figure 4 It contains a blank background as the graphics layer, a cat picture that is smaller than the background as the image, and a line of text that reads "I am a cat" as the text. The layer list compiled according to the above steps is as follows:

[0056]

[0057]

[0058]

[0059] S3, converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rule of the browser;

[0060] Specifically, in step S3.1, if the layer data includes image layer data, converting the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes:

[0061] Use the browser's CanvasRenderingContext2D.putImageData interface to draw the image layer data on the browser's HTMLCanvasElement canvas according to the order of the layers, and call the browser's HTMLCanvasElemen.toDataURL interface to obtain the uniform resource locator URL of the image layer data;

[0062] The URL is converted into the node type of the DOM node described in HTML, and the image attributes in the image layer data are converted into description content in CSS format.

[0063] In this step, CanvasRenderingContext2D.putImageData is the method of the Canvas 2D API to draw data from an existing ImageData object to a bitmap. For example, you can set the drawing area, drawing path, drawing style, etc. of the image in the browser. For example, refer to Figure 5 You can use the CanvasRenderingContext2D.putImageData interface to draw an image such as Figure 5 The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of the <canvas> element. Using the CanvasRenderingContext2D.putImageData interface, you can draw a rectangle on the HTMLCanvasElement canvas based on the layer list's canvas size and other information. This rectangle is then used to fill the corresponding layer.

[0064] The HTMLCanvasElement.toDataURL method returns a data URI containing an image display. The type parameter specifies the data type; the default format is PNG. In this step, the image parsed in the previous step is passed to the HTMLCanvasElement.toDataURL method to obtain the URL corresponding to the image. This URL is subsequently used by the browser as the image address, allowing the browser to retrieve the corresponding image.

[0065] Draw the pixel data onto the HTMLCanvasElement canvas by calling the browser's CanvasRenderingContext2D.putImageData, and then call HTMLCanvasElement.toDataURL to get the image address (base64URL).

[0066] In this step, Figure 4 The image converted into the corresponding DOM node is:

[0067] <imgsrc="image address" / >

[0068] The corresponding CSS style is:

[0069]

[0070]

[0071] 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) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes:

[0072] The element type corresponding to the text layer data and / or shape layer data is converted into the node type of the DOM node described in HTML, and the information attributes in the text layer data and / or shape layer data are converted into description content in CSS format.

[0073] In this step, text layer data or shape layer data can be directly converted in the browser. For text, based on the information in the layer list, directly call the browser's document.createElement interface to create a span HTML element. Fill the span element with the text content, then add the text's corresponding CSS style to adjust the text's size, font, color, and other attributes. For vector layers, you can also directly draw a corresponding shape, such as a rectangle, using the browser's canvas drawing interface. Based on the information in the layer list, adjust the rectangle's size, deformation, and other parameters to obtain the corresponding CSS style.

[0074] For example, in this step, Figure 4 The text in the DOM node is converted into:

[0075] I am a cat

[0076] The corresponding CSS style is:

[0077]

[0078]

[0079] S4, obtaining the content corresponding to the PSD file by rendering the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format through the browser.

[0080] Specifically, further, the content corresponding to the PSD file rendered by the browser according to the Document Object Model DOM node described in the Hypertext Markup Language HTML+Cascading Style Sheet CSS format includes:

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

[0082] The HTMLElement.appendChild interface can be used to change the runtime content of an HTML file in a variety of ways through the HTML Document Object Model (DOM). AppendChild is used to add new elements to an existing document or to move elements on the page. Figure 4 The same screen presentation effect.

[0083] Furthermore, the loading and parsing of the PSD file to obtain binary data corresponding to the PSD file includes:

[0084] The PSD file is loaded into the memory through the browser, and the FileReader.readAsArrayBuffer interface of the browser is called to read the PSD file to obtain binary data corresponding to the PSD file.

[0085] Furthermore, the reading the image layer data one by one according to the arrangement order of the layers includes:

[0086] The image data is read from the file structure, the ID of each image is extracted from the image data, and the pixel data of each image is searched and read according to the ID of each image.

[0087] Since the pixel data of an image is large, it is stored in the image data section as a reference. If it is an image layer, there will be an image data ID on the layer data. You can use this ID to find the corresponding image pixel data in the image data section. Figure 3 Read the corresponding image pixel data from the image data in .

[0088] A browser-based PSD file parsing system is further provided, comprising the following modules:

[0089] A binary conversion module is used to load and parse the PSD file to obtain binary data corresponding to the PSD file;

[0090] A layer list construction module is used to extract the file structure of the PSD file from the binary data according to PSD format rules, read the layer data from the file structure, and construct a layer list;

[0091] 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 a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rules of the browser;

[0092] The rendering module is used to render the content corresponding to the PSD file through the browser according to the Document Object Model DOM node described in the Hypertext Markup Language HTML+Cascading Style Sheet CSS format.

[0093] 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.

[0094] 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 executed by a processor.

[0095] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0096] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0097] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0098] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.

[0099] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0100] Obviously, those skilled in the art may make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if such changes and modifications fall within the scope of the claims and their equivalents, the present invention is intended to include such changes and modifications.

Claims

1. A browser-based PSD file parsing method, characterized by: The following steps are involved: Load and parse the PSD file to obtain binary data corresponding to the PSD file; According to PSD format rules, extracting the file structure of the PSD file from the binary data, reading layer data from the file structure, and constructing a layer list; The layer data includes at least one or more of image layer data, text layer data, and shape layer data; If the layer data includes picture layer data, reading the picture layer data one by one according to the arrangement order of the layers; If the layer data includes text layer data and / or shape layer data, directly reading the text layer data and / or shape layer data; Converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rules of the browser; If the layer data includes image layer data, converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes: Use the browser's CanvasRenderingContext2D.putImageData interface to draw the image layer data on the browser's HTMLCanvasElement canvas according to the order of the layers, and call the browser's HTMLCanvasElemen.toDataURL interface to obtain the uniform resource locator URL of the image layer data; Convert the URL into the node type of the DOM node described in HTML, and convert the image attributes in the image layer data into description content in CSS format; If the layer data includes text layer data and / or shape layer data, converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes: Converting the element type corresponding to the text layer data and / or shape layer data into the node type of the DOM node described in HTML, and converting the information attributes in the text layer data and / or shape layer data into description content in CSS format; The content presented corresponding to the PSD file is obtained by rendering the document object model DOM node described in the hypertext markup language HTML+cascading style sheet CSS format through the browser.

2. A browser-based PSD file parsing method according to claim 1, characterized in that: The loading and parsing of the PSD file to obtain binary data corresponding to the PSD file includes: The PSD file is loaded into the memory through the browser, and the FileReader.readAsArrayBuffer interface of the browser is called to read the PSD file to obtain binary data corresponding to the PSD file.

3. A browser-based PSD file parsing method according to claim 1, characterized in that: The step of reading the image layer data one by one according to the arrangement order of the layers includes: The image data is read from the file structure, the ID of each image is extracted from the image data, and the pixel data of each image is searched and read according to the ID of each image.

4. The browser-based PSD file parsing method according to claim 1, wherein: The content corresponding to the PSD file rendered by the browser according to the Document Object Model DOM node described in the Hypertext Markup Language 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 content presented corresponding to the PSD file.

5. A browser-based PSD file parsing system, characterized by: Includes the following modules: A binary conversion module is used to load and parse the PSD file to obtain binary data corresponding to the PSD file; A layer list construction module is used to extract the file structure of the PSD file from the binary data according to PSD format rules, read the layer data from the file structure, and construct a layer list; The layer data includes at least one or more of image layer data, text layer data, and shape layer data; If the layer data includes picture layer data, reading the picture layer data one by one according to the arrangement order of the layers; If the layer data includes text layer data and / or shape layer data, directly reading the text layer data and / or shape layer data; 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 a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format according to the rendering rules of the browser; If the layer data includes image layer data, converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes: Use the browser's CanvasRenderingContext2D.putImageData interface to draw the image layer data on the browser's HTMLCanvasElement canvas according to the order of the layers, and call the browser's HTMLCanvasElemen.toDataURL interface to obtain the uniform resource locator URL of the image layer data; Convert the URL into the node type of the DOM node described in HTML, and convert the image attributes in the image layer data into description content in CSS format; If the layer data includes text layer data and / or shape layer data, converting the corresponding content in the layer list into a Document Object Model (DOM) node described in a Hypertext Markup Language (HTML) + Cascading Style Sheet (CSS) format includes: Converting the element type corresponding to the text layer data and / or shape layer data into the node type of the DOM node described in HTML, and converting the information attributes in the text layer data and / or shape layer data into description content in CSS format; The rendering module is used to render the content corresponding to the PSD file through the browser according to the Document Object Model DOM node described in the Hypertext Markup Language HTML+Cascading Style Sheet CSS format.

6. A computer-readable storage medium storing a computer program, characterized in that: When the computer program is executed by a processor, the browser-based PSD file parsing method according to any one of claims 1 to 4 is implemented.

Images