Detailed Description
In order to make those skilled in the art better understand the technical solutions in the present application, the technical solutions in the embodiments of the present application will be described in detail below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all embodiments. All other embodiments that can be derived from the embodiments given herein by a person of ordinary skill in the art are intended to be within the scope of the present disclosure.
In order to solve the problem that the image display function of the existing lightweight markup language is inconvenient to use, the application provides a method for displaying an image by using a markup language, and as shown in fig. 1, the method may include the following steps:
s101, obtaining a code text to be analyzed;
the obtaining mode of the code text to be analyzed can be to obtain the code text which is instantly written by the user and input into the computer, or to read the code text which is written in advance and stored. The code text to be analyzed is mainly written by using a certain general markup language (such as Markdown, txt2tags), and the difference from the prior art is that the scheme of the application allows the code text to be analyzed to contain a self-defined image drawing statement.
Because the native grammar of the markup language only supports adding static images in the document, the scheme of the application expands a new grammar on the basis of the native grammar to support the dynamic drawing function of the images, and the self-defined image drawing statement is an image drawing statement written by utilizing the expanded grammar, and has the basic functions of: since the image is dynamically generated based on information such as the type of image, the size of the image, and the color of the image specified in the sentence, it is not necessary for the user to prepare an image file in advance by linking or local uploading.
S102, extracting a custom image drawing statement in the code text to be analyzed, and drawing an image according to the extracted image drawing statement;
because the custom image drawing statement in the application is not written by the native grammar of the markup language, the custom image drawing statement cannot be directly analyzed by the native grammar analyzer. Therefore, in order to realize the image drawing function, the custom sentences need to be processed separately. The scheme provided by the application is as follows: after the code text to be analyzed is obtained, firstly, the text content is scanned, the user-defined image drawing sentences in the text are extracted according to the grammatical features of the user-defined image drawing sentences, then the user-defined image drawing sentences are analyzed by utilizing the user-defined analysis, and corresponding images are drawn according to the requirements of the sentences.
Because the grammar and the custom analysis are self-defined, the grammar format of the self-defined image drawing statement has no special requirement and can be defined according to the actual requirement. For example, a basic custom image drawing statement syntax format may be:
function name (parameter 1, parameter 2, parameter 3,. parameter n)
The "function name" is used to describe the type of the drawn image, and the image type may be a common geometric line or shape, such as a straight line, a curve, a rectangle, a circle, and the like, or may be a statistical chart, such as a bar chart, a broken line chart, a pie chart, a scatter chart, and the like. The "parameter" is used to describe a specific feature of the image to be rendered, such as image size, image position, image color, and the like.
Of course, the above syntax format is only for illustrative purpose and should not be construed as limiting the scheme of the present application. According to actual drawing requirements, parameters with different meanings and different quantities can be defined for different types of image drawing functions, and the parameters are not listed in the embodiment of the application. It should be noted that, when drawing an image of a statistical chart type, a data source for drawing the statistical chart needs to be specified in a parameter, the data source may be specified in a sentence in an actual number manner, or may point to a certain data source in a linked manner (for example, an excel table, or other form of database, etc.), and in an actual application, the pointed data source may have a certain specific data structure so as to be correctly identified in a parsing process.
In addition, in the custom image drawing sentence, an image description text can be further specified, and the specific effects are as follows: the user is allowed to specify a segment of text by himself, and the segment of text can be displayed together with the image as explanatory information of the image when the image is displayed.
After the drawing requirements of the user-defined image drawing statements are obtained through analysis, a corresponding image drawing engine is called to draw the image, the specific drawing implementation mode can refer to the prior art, and the method is not further limited. The image drawing result can be temporarily stored in the memory, and can also be stored in a persistent mode in the form of an image file.
S103, replacing the custom image drawing statement in the code text to be analyzed with a native image adding statement of a markup language, and taking an image drawing result as an adding object specified by the image adding statement;
the purpose of the scheme of the application is not to simply realize the instant drawing and display of the image, but to expand the self-defined sentence in the markup language mainly used for processing the text format document so as to increase the function of the instant drawing and display of the image. That is to say, in general cases, the text of the code to be analyzed still uses the native code as the main constituent part, and in order not to affect the analysis of the whole code, the scheme adopted in the present application is as follows: and replacing the custom image drawing statement in the code text to be analyzed with a native image adding statement.
Since the syntax of the native image addition statement of the markup language is generally simple, only one image addition object needs to be specified, and the addition object can be a locally uploaded image file or an image link on a network, so that in the replacement process, information such as function types and specific parameters in the custom image drawing statement does not need to be considered, and only the image drawing result obtained in S102 needs to be taken as the addition object and corresponding information is written into the replaced native image addition statement.
If the custom image drawing statement carries image description text information and the native image adding statement also supports the user to specify an image description text, the statement replacement process may further include: and writing the image description text specified in the custom image drawing statement into the replaced original image adding statement as the image description text specified in the original image adding statement. That is to say, the image description text can be directly used without other additional processing.
And S104, analyzing the code text obtained after the replacement, and displaying and outputting an analysis result.
And S103, replacing the processed code text to be processed, wherein the custom image drawing statement is replaced by the original image adding statement, so that the replaced code text can be analyzed by directly calling a native grammar analyzer of the markup language, and an analysis result is displayed and output. The specific parsing method is subject to the native rules of the markup language used, and is not described in detail in this application.
In addition, in a specific embodiment of the present application, the code text obtained after the replacement may be converted into an HTML text or an XML text, and since the browser generally has an HTML or XML parsing function, the HTML or XML text obtained after the conversion may be directly displayed in the form of an HTML page or an XML page in the browser. The browser may be a web browser application in a general sense, such as IE, Firefox, Chrome, or other application having a web browsing function built therein, and the present application is not limited thereto.
Therefore, although the scheme of the application realizes the dynamic generation of the image, the operation mechanism of the markup language is not changed. The user-defined image drawing sentences are only used for facilitating the description of requirements of users, after the images are dynamically generated, each dynamically generated image is still added into the text in a static mode through sentence replacement, the subsequent markup language parsing process is not affected, and the final display effect is not different from the code completely written by using the original sentences.
The above scheme provided by the application can be implemented on independent equipment, such as a PC, a mobile phone, a tablet computer and the like, and under the condition, the corresponding equipment is required to have the functions of code input, code analysis and result display at the same time. For example, as shown in fig. 2, a user inputs a code text by using a client, the client provides the content input by the user as a code text to be analyzed to a server, the server performs operations such as custom image drawing statement extraction, image drawing, statement replacement, code analysis and the like, then provides an analysis result to the client, and finally displays and outputs the analysis result by the client.
The method for displaying an image using a markup language provided in the present application is described below with reference to a specific example applied to a Markdown language.
Markdown is a lightweight markup language, can be written by using an editor of ordinary text, and can display ordinary text contents in a certain format through simple markup syntax.
According to the native grammar of Markdown, if an image needs to be inserted into an article, the user needs to input | in the Markdown editor! [](). The editor creates an image upload interface in the preview pane and the user can select an image file (png, gif, jpg, etc. format) to upload from the local computer. If the user wants to use an image for which the network already exists, a "link" function may be selected on the image upload interface, and then the URL of the image file is further input. In the finally generated image addition code, parentheses are used for specifying the storage path of the image file, and brackets are used for specifying the image description text.
For example, the user needs to display the effect shown in fig. 3 in the document, where the line graph is the image to be added, the "growth" is the explanatory text of the image, assuming that the image is stored on the network, and the URL of the image is "http:// a.tbcdn.cn/xxx/a.jpg", the finally generated Markdown code text is as follows:
sales for the first four months of the year! [ increase ] (http:// a.tbcdn.cn/xxx/a.jpg) situation
It can be seen that, with the existing Markdown image adding method, the user must prepare the image file in advance, and if the small chart needs to be modified, the following complicated operations are required:
a) reproducing the picture, for example, drawing and screenshot by using Excel;
b) uploading the picture and obtaining the URL of the new picture;
c) replacing the URL of the original picture in the code with the URL of the new picture;
in view of the above problems, the present application provides a simple markdown extended syntax for dynamically generating a statistical chart embedded in a text, where the basic syntax is as follows:
| A [ image description text ] (chartType (v1, v2, v3, v4 … vn))
chartType is a function name used to specify different statistical charting types, such as line (line graph), bar (bar graph), pie (pie graph), etc.;
v1, v2, v3 … vn are parameters for specifying the data source used to generate the statistical chart.
For example, with the scheme of the present application, if the effect shown in fig. 3 needs to be displayed in the document, the user only needs to input the following code text:
sales for the first four months of the year! [ growth ] (line (0,5,5,10,12)) situation
After the user inputs the code text at the client, the client provides the content input by the user as the code text to be analyzed to the server;
the server side determines the'!according to the characteristics of the user-defined image drawing statement! [ growth ] (line (0,5,5,10,12)) "is a custom image drawing statement from which the image drawing engine is called to draw a line graph as shown in FIG. 3 and save the image. Suppose the saved URL is http:// a.tbcdn.cn/xxx/a.jpg;
after the server side obtains the drawing result, the self-defined image in the code text to be analyzed is further drawn into a statement part, namely! [ growth ] (line (0,5,5,10,12)) "is replaced according to the rules of the native grammar and the custom grammar in the following way:
drawing identifier portion, i.e. "! "remain unchanged;
the image description is kept unchanged for this portion, i.e. [ grow ] ";
"(line (0,5,5,10, 12))" portion is replaced with the URL of the image addition target, that is, with (http:// a.tbcdn.cn/xxx/a.jpg)
The finally obtained code text after replacement is as follows:
sales for the first four months of the year! [ increase ] (http:// a.tbcdn.cn/xxx/a.jpg) situation
The code text is analyzed by directly calling a Markdown native grammar parser, for example, the code text is converted into an HTML text, and then the converted HTML text is transmitted back to the client, so that the client can directly display the effect shown in fig. 3 in the browser.
It can be seen that, by applying the scheme of the application, the user does not need to prepare the image file in advance. In addition, the user can generate images of various styles as required by simply adjusting the code, for example, if the user wants to display the effect of a pie chart in a document, the following contents can be directly written in the code text:
the proportion of male and female in the class is not adjusted! [ Male and female comparison ] (pie (0.2,0.8) accounts for 20% of male students and 80% of female students
Thereby realizing the pie chart display effect of male and female proportion in the document. Compared with the mode of re-uploading the image files or modifying the image links, the operation mode is more flexible and the use is more convenient.
Corresponding to the above method embodiment, the present application further provides an apparatus for displaying an image using a markup language, and as shown in fig. 4, the apparatus may include:
the input module 110 is configured to obtain a code text to be parsed, where the code text to be parsed is written by using a markup language, and the code text to be parsed is allowed to include a custom image drawing statement;
the image drawing module 120 is configured to extract a custom image drawing statement in the code text to be analyzed, and draw an image according to the extracted image drawing statement;
the code replacing module 130 is configured to replace the custom image drawing statement in the code text to be analyzed with a native image adding statement of the markup language, and use an image drawing result as an added object specified by the image adding statement;
and the display output module 140 is configured to analyze the code text obtained after the replacement, and display and output an analysis result.
In a specific embodiment of the application, the custom image drawing statement may carry chart type information and data source information;
accordingly, the image rendering module 120 may be specifically configured to: and drawing the data source specified in the image drawing sentence into a chart of the corresponding type.
In a specific embodiment of the application, the custom image drawing sentence can also carry image description text information;
accordingly, the code replacement module 120 may also be configured to: the image specification text specified in the image drawing sentence is taken as the image specification text specified in the image adding sentence.
In an embodiment of the present application, the display output module 140 may be specifically configured to:
and converting the code text obtained after replacement into an HTML or XML text so as to display a corresponding HTML or XML page in the browser.
In addition, in an embodiment of the present application, the input module 110 may be configured in a distributed manner at the server and the client, so that the server obtains the code text to be parsed provided by the client;
correspondingly, the display output module 140 may also be configured in a distributed manner at the server and the client, so that the server analyzes the code text obtained after the replacement, provides the analysis result to the client, and the client displays and outputs the analysis result.
From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present application may be essentially or partially implemented in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments of the present application.
The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the apparatus embodiment, since it is substantially similar to the method embodiment, it is relatively simple to describe, and reference may be made to some descriptions of the method embodiment for relevant points. The above-described apparatus embodiments are merely illustrative, and the modules described as separate components may or may not be physically separate, and the functions of the modules may be implemented in one or more software and/or hardware when implementing the solution of the present application. And part or all of the modules can be selected according to actual needs to achieve the purpose of the scheme of the embodiment. One of ordinary skill in the art can understand and implement it without inventive effort.
The foregoing is directed to embodiments of the present application and it is noted that numerous modifications and adaptations may be made by those skilled in the art without departing from the principles of the present application and are intended to be within the scope of the present application.