CN114296610A

CN114296610A - Chart saving method and device and electronic equipment

Info

Publication number: CN114296610A
Application number: CN202111631883.2A
Authority: CN
Inventors: 王飞婷; 陈旭涛; 肖建平; 刘冬冬
Original assignee: Weimin Insurance Agency Co Ltd
Current assignee: Weimin Insurance Agency Co Ltd
Priority date: 2021-12-28
Filing date: 2021-12-28
Publication date: 2022-04-08

Abstract

The embodiment of the application discloses a graph saving method, a graph saving device and electronic equipment, wherein the method comprises the steps that a terminal responds to first user operation input aiming at a target graph on a target webpage and converts the target graph into a first picture; displaying the first picture; further, in response to a second user operation input for the first picture, the first picture is saved. According to the method, the chart in the webpage can be saved, and the logic conflict with the existing logic for saving the picture in the terminal can be avoided.

Description

Chart saving method and device and electronic equipment

Technical Field

The invention relates to the technical field of computers, in particular to a chart saving method and device and electronic equipment.

Background

In the current terminal, when a user accesses a webpage by using the terminal, such as a mobile phone, pictures in the webpage can be saved. For example, when some mobile phones access a web page through a browser, a prompt box is displayed by long-pressing a picture in the web page, the prompt box includes an option for saving the picture, and when a user selects the option, the mobile phone saves the picture.

However, a saving method for a chart in a web page has not appeared in the prior art.

Disclosure of Invention

The embodiment of the invention provides a method and a device for saving a chart and electronic equipment, which can save the chart in a webpage and do not conflict with the saving logic of an existing picture.

In a first aspect, an embodiment of the present application provides a method for saving a graph, including:

in response to a first user operation input aiming at a target graph on a target webpage, converting the target graph into a first picture;

displaying the first picture;

and responding to a second user operation input aiming at the first picture, and saving the first picture.

With reference to the first aspect, in one possible implementation, the method further includes:

converting the target chart into a second picture; the second picture is an incomplete thumbnail of the target chart;

the displaying the first picture comprises: displaying the second picture on a first picture layer and displaying the first picture on a second picture layer, wherein the second picture layer is a transparent picture layer, the second picture layer is positioned on the first picture layer, and the displayed first picture covers the second picture in position.

With reference to the first aspect, in a possible implementation manner, the target graph is a table with N rows and M columns, the second picture is generated according to contents of a preceding P rows and a preceding Q column of the target picture, N, M are positive integers greater than 1, P, Q are positive integers, P is smaller than N, and Q is smaller than M.

With reference to the first aspect, in one possible implementation, before responding to the first user operation on the target graph input on the target webpage, the method further includes:

sending a chart generation request to a server of the target webpage, wherein the chart generation request carries at least one picture, and the request is used for requesting the server to generate the target chart based on the content of the at least one picture;

receiving the target chart sent by the server.

Optionally, the target webpage includes a first control, and the first user operation is a user operation for the first control, and the method further includes:

receiving program information sent by the server;

the converting the target graph into a first picture comprises: and responding to a first user operation input aiming at a target graph on a webpage, and converting the target graph into a first picture by running the program information.

With reference to the first aspect, in a possible implementation manner, the converting the target diagram into the first picture includes:

drawing each element of the plurality of elements on a canvas according to an attribute of the each element, the element comprising at least one of text, a line, a rectangular box, and a picture, the attribute comprising at least one of a position, a font, a line style, a line thickness, a line length, a size, a fill color, and a background color.

With reference to the first aspect, in a possible implementation manner, the operating by the second user is a long-press operation, and the saving the first picture specifically includes:

in response to the long press operation input for the first picture, displaying a prompt box, wherein the prompt box comprises a second control;

and responding to a third user operation input aiming at the second control, and saving the first picture to an album.

Optionally, the prompt box further includes a third control, and the method further includes:

in response to a fourth user operation input with respect to the third control, the first picture is shared to a target contact.

In a second aspect, an embodiment of the present application provides a device for saving a chart, including:

the conversion unit is used for responding to a first user operation input aiming at a target graph on a target webpage and converting the target graph into a first picture;

the display unit is used for displaying the first picture;

a saving unit configured to save the first picture in response to a second user operation input for the first picture.

With reference to the second aspect, in a possible implementation manner, the conversion unit is further configured to convert the target diagram into a second picture; the second picture is an incomplete thumbnail of the target chart;

the display unit is specifically configured to: displaying the second picture on a first picture layer and displaying the first picture on a second picture layer, wherein the second picture layer is a transparent picture layer, the second picture layer is positioned on the first picture layer, and the displayed first picture covers the second picture in position.

With reference to the second aspect, in one possible implementation, the target graph is a table with N rows and M columns, the second picture is generated according to contents of a preceding P rows and a preceding Q column of the target picture, N, M are positive integers greater than 1, P, Q are positive integers, P is smaller than N, and Q is smaller than M.

With reference to the second aspect, in one possible implementation, the apparatus further includes:

a sending unit, configured to send a chart generation request to a server of the target webpage, where the chart generation request carries at least one picture, and the request is used to request the server to generate the target chart based on content of the at least one picture;

and the receiving unit is used for receiving the target chart sent by the server.

the receiving unit is further used for receiving program information sent by the server;

the conversion unit is specifically configured to: and responding to a first user operation input aiming at a target graph on a webpage, and converting the target graph into a first picture by running the program information.

With reference to the second aspect, in a possible implementation manner, the target graph includes a plurality of elements and an attribute of each of the plurality of elements, and the conversion unit is specifically configured to:

drawing each element of the plurality of elements on a canvas according to an attribute of the each element, the element comprising at least one of text, a line, a rectangular box, and a picture, the attribute comprising at least one of a position, a font color, a font size, a line type, a line thickness, a line length, a size, a fill color, and a background color.

In one possible embodiment, in combination with the second aspect, the second user operation is a long press operation,

the display unit is further used for responding to the long press operation input aiming at the first picture, and displaying a prompt box, wherein the prompt box comprises a second control;

the saving unit is specifically configured to, in response to a third user operation input for the second control, save the first picture to an album.

Optionally, the prompt box further includes a third control, and the apparatus further includes:

and the sharing unit is used for responding to a fourth user operation input aiming at the third control element and sharing the first picture to the target contact person.

In a third aspect, an embodiment of the present application provides an electronic device, including: a processor and a memory; the memory has stored therein a computer program; the processor is configured to load the computer program to implement the graph saving method according to the first aspect or any one of the possible implementation manners of the first aspect.

In a fourth aspect, the present application provides a computer-readable storage medium, where a computer program is stored, where the computer program includes program instructions, and when the program instructions are executed by a processor, the processor is caused to execute the graph saving method according to the first aspect or any one of the possible implementation manners of the first aspect.

In a fifth aspect, embodiments of the present application provide a computer program product, which includes computer instructions stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the graph saving method according to the first aspect or any one of the possible implementation manners of the first aspect.

According to the embodiment of the invention, the graph in the webpage is converted into the picture, and then the graph in the webpage is saved in a picture saving mode supported by an application program such as a browser or a social application, and the logic conflict with the existing logic for saving the picture in the browser or the social application is avoided.

Further, by displaying two layers of layers, namely a first layer and a second layer, an incomplete thumbnail of a target chart is displayed through the first layer, a complete picture of the target chart is displayed through the second layer, the second layer positioned on the upper layer is set to be a transparent layer, so that the complete picture displayed on the second layer is invisible, and further, the operation for displaying the picture in the lower first layer is a user operation which is substantially acted on the picture of the upper second layer, so that the user is prompted about the chart to be saved, and the complete picture of the target chart is saved.

Drawings

In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to the drawings without creative efforts.

Fig. 1A is a diagram illustrating an architecture of a system according to an embodiment of the present application.

Fig. 1B is a diagram illustrating a software architecture of a terminal according to an embodiment of the present application.

Fig. 2 is a schematic flowchart of a chart saving method according to an embodiment of the present application.

Fig. 3A is a schematic illustration of a user interface provided by an embodiment of the present application.

Fig. 3B is a schematic illustration of a first picture provided in an embodiment of the present application.

Fig. 3C is a schematic illustration of yet another user interface provided by an embodiment of the present application.

Fig. 3D is a schematic illustration of yet another user interface provided by an embodiment of the present application.

Fig. 4 is a schematic flowchart of a chart saving method according to an embodiment of the present application.

Fig. 5A is a schematic illustration of further user interfaces provided by embodiments of the present application.

Fig. 5B is a schematic illustration of further user interfaces provided by embodiments of the present application.

Fig. 5C is a schematic illustration of further user interfaces provided by embodiments of the present application.

Fig. 6 is a schematic structural diagram of a chart storage apparatus according to an embodiment of the present application.

Fig. 7 is a schematic structural diagram of a terminal according to an embodiment of the present application.

Detailed Description

The technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.

In describing embodiments of the present invention, the terms "include" and its derivatives should be interpreted as being open-ended, i.e., "including but not limited to. The term "based on" should be understood as "based at least in part on". The terms "first," "second," "target," and the like may refer to different or the same object. Without being limited to the above terms, embodiments of the present invention may also include other explicit and implicit definitions.

First, key terms related to the embodiments of the present invention will be described.

1. Applet

The applet is an mvvm (model View controller) architecture implemented by itself, is a program running inside the social application, and can have the capability of calling an Application Programming Interface (API) by relying on a social application kernel. The applet can be used without downloading and installation, and the user can open the application by scanning or searching, and does not need to uninstall.

2. Incomplete thumbnail

A full thumbnail is understood to mean a thumbnail that is a picture that has been reduced but has not changed content, such as a photograph, all of which have been reduced to a certain scale. Incomplete thumbnails are relative to full thumbnails, and have less content than full thumbnails, containing only a partial content of one picture.

The saved chart is typically larger in size, and may be a picture approximately 3 times wider and 2 times longer than the cell phone screen. When a user needs to save a diagram, in order to enable the user to confirm a picture to be saved, the picture to be saved is generated based on the saved diagram after the user inputs an operation for saving, for example, a save button is clicked, but the picture can be saved to an album only by calling up a general picture saving popup window of a social application after the picture is pressed for a long time in the small program, and a prompt box (or popup window) for displaying thumbnails is displayed above the popup window of the social application.

3. Graph table

A chart is not a picture, and a chart is a visualization way to show data, which can be drawn by a table, a bar graph, a line graph, and the like. The data that is drawn into the chart is generally composed of a plurality of fields that include at least one object and the contents of each field. Taking a table as an example, the first row of the chart may fill in the names of multiple objects and the first column of the chart may fill in the names of multiple fields.

In the embodiment of the application, the first picture is a picture drawn by a complete diagram of the target diagram. The second picture is a picture obtained by drawing an incomplete chart of the target chart.

4. Hypertext Markup Language (HTML), HTML5

HyperText Markup Language (HTML) is a standard Markup Language for creating web pages. The HTML runs on the browser, which parses it. HTML5 is the latest revision of HTML.

The HTML5 has a new < canvas > tag, which is an HTML element in which a picture can be drawn using a script (usually JavaScript). It can be used to make photo collections or animations and even real-time video processing and rendering.

Referring to fig. 1A, fig. 1A is a system architecture diagram provided in an embodiment of the present application, and the system may include a terminal 10 and a server 20 of a web page, where the terminal 10 may run a plurality of application programs, such as a browser 101, a social application 102, an album 103, and the like. The terminal 10 may also run other applications such as cameras, maps, music, etc., without limitation.

Browser 101 or social application 102, or a program running in browser 101 or social application 102 (also referred to as an "applet" in social application 102) may communicate with server 20 to access a web page provided by server 20.

For example, an application program such as the browser 101 or the social application 102, or a program running in the browser 101 or the social application 102 (also referred to as an "applet" in the social application 102) may send a request to the server 20, the request requesting access to the target web page. The server 20 transmits the target web page to the terminal 10 in response to the access request. The target web page contains a target graph.

For another example, the browser 101 or the social application 102, or a program running in the browser 101 or the social application 102 may send a chart generation request to the server 20, where the request may carry at least one file, such as a picture. The server 20 generates a graph, i.e., a target graph, based on the content of the received at least one picture in response to the request, and transmits a web page including the generated graph, i.e., a target web page, to the terminal 10.

In one scenario, an applet in a social application, containing "how xx buy" may be a picture of a comparison quotation for multiple products in the same category. The target chart is a comparison report of a plurality of product quotations.

After the browser 101 or the social application 102, or the applet accesses the web page, a picture may be generated based on a graph in the web page, and the generated picture may be saved to the album 103.

The terminal may include an application layer, an application architecture layer, an operating system layer, a kernel layer, etc., and fig. 1B shows only the application layer and the operating system layer.

The application layer may include a browser 101, a social application 102, an album 103, and the like, where the browser 101 or the social application 102 may include a plurality of Application Programming Interfaces (APIs), and implement corresponding functions by calling each API. One or more applets may also be run in the social application 102.

In this embodiment, the functional units that the browser 101 or the social application 102 may include or execute the program information include, but are not limited to: a text drawing unit, a rectangle drawing unit, a line drawing unit, a picture drawing unit, a drawing point moving unit, a rectangle color filling unit, a line color filling unit, a picture deriving unit, or the like.

For example, the text drawing unit is configured to call fillText to implement text drawing, the rectangle drawing unit is configured to call rect to implement rectangle drawing, the line drawing unit is configured to call lineTo to implement line drawing, the picture drawing unit is configured to call drawImage to implement picture drawing, the drawing point moving unit is configured to call moveTo to implement movement of the drawing point, the rectangle color filling unit is configured to call fillStyle to implement color filling of the rectangle, the line color filling unit is configured to call strokes type to implement line color filling, and the picture deriving unit is configured to call todataURL to derive the drawn picture.

It is to be understood that not limited to the above listed functional units, more or less functional units may be included, and are not limited thereto.

The operating system layer may include a system library that may include some library functions, including, for example, a picture save unit, implemented by calling an API for implementing a picture save to album function.

After receiving the web page, the browser 101/social application 102 may obtain attributes of each element in the graph, and then draw a picture on a canvas by calling a function unit included in the graph, to generate a picture, and then save the generated picture to the album 103 by calling an API in the operating system that realizes the function of saving the picture to the album.

It should be appreciated that a program (i.e., an "applet") running inside a social application relies on the kernel of the social application so that it can invoke the system native APIs.

If the chart is required to be saved or shared, the chart needs to be converted into a picture. Generally, a picture obtained by converting a complete chart is large, and if the picture generated by previewing the complete chart is generated, a user can hardly clearly distinguish the content of the picture. At this time, during previewing, a picture generated by the incomplete graph, namely, an incomplete thumbnail of the graph, may be displayed, and the picture generated by the complete graph is set on the upper layer of the preview interface and is set as a transparent layer, so that operations on the display screen are all operations on pictures which are not displayed on the upper layer in sequence, and then the picture of the complete graph is saved or shared.

Fig. 2 shows a graph saving method provided in an embodiment of the present application, where the method may be executed by an application program that can access a web page, such as a terminal, a browser in the terminal, or a social application, or an applet in the application program, where the embodiment of the present application is described by taking the applet as an example, the method includes, but is not limited to, the following partial or all steps:

s11: in response to a first user operation input for a target graph on a target webpage, the target graph is converted into a first picture.

The target web page includes a target graph, and may be a web page requested and loaded from a server of the target web page by a terminal through a target application (e.g., a browser or a social application), or by an applet running inside the target application (e.g., a social application). Optionally, the application program for loading the target webpage may call other applications in the terminal, such as a camera, to store the content in the target webpage into an album.

In one implementation, the terminal sends a request to the server through the applet, and the server sends a web page to be requested, i.e., a target web page, including the graph, i.e., the target graph, to the terminal in response to the request.

In another specific implementation, a terminal sends a chart generation request to a server through a applet, wherein the request carries at least one file, the file can be a picture, a document and the like, one file corresponds to one object, each file comprises a plurality of fields and the content of each field, the server responds to the request, identifies the fields and the content in each picture or document, and generates a chart, namely a target chart, based on the identified fields and the content; and further, a target webpage including the target graph is sent to the terminal.

In some embodiments, the target webpage sent by the server to the terminal may further include program information, and the program information may be used to implement chart conversion, for example, when an applet in the terminal receives a user operation for a target chart input or an operation for a control input on the webpage, the program information may be loaded, and then the target chart in the target webpage is converted into the first picture.

Referring to the user interface 300 shown in fig. 3A, the user interface displayed after the web page is loaded includes a target chart 301, a save control 302, and a share control 303. When receiving a first user operation input for a first control, such as the save control 302 or the share control 303, the terminal loads and runs program data of a target webpage in response to the first user operation to convert a target chart into a first picture.

In other embodiments, the save control 302 and the share control 303 may also be provided by an application running an applet.

Optionally, the first control may also be an option in a menu, and the terminal may display the menu when receiving a right click operation, a long press operation, and the like for the target chart, where the menu may include an option for instructing to save or share, and when receiving a user operation, such as a click operation, for the option to save or share, the target chart may be converted into the first picture.

The first picture includes the target chart, including all rows and all columns of the target chart, that is, an image generated based on the complete target chart, and the first picture displays the contents of all rows and all columns in the target chart. The method of converting the target chart into the first picture is described as follows.

The target graph may be a table with N rows and M columns, wherein the first column may include N-1 fields, the first row may include M-1 objects, and the ith row and jth column are the contents of the ith-1 field of the jth-1 object, i.e., the attribute indicated by the ith-1 field of the jth-1 object. Wherein N, M, i and j are positive integers more than 1.

The target chart includes a line, a rectangular frame, a picture, and the like, in addition to a plurality of fields and the contents of each object for each field. The content of each field may be in the form of text, pictures, etc. The text, the picture, the line, the rectangular box, etc. included in the target chart may be all referred to as one element, and the target chart includes attributes of the respective elements, for example, at least one of a position, a font color, a font size, a line type, a line thickness, a line length, a size, a fill color, a background color, etc.

The applet in the terminal may draw each element of the target diagram in turn according to the attribute of each element in the target diagram, where the turn may be according to a position order, such as from top to bottom and from left to right; or may be drawn sequentially element by element.

In one implementation, the applet in the terminal may implement the drawing of the picture by adding a canvas tag in the HTML5, where the canvas tag is a piece of canvas and provides a series of APIs for drawing, and the APIs can be used to draw information such as graphics and text on the canvas. In other embodiments, these APIs may exist in social applications, which the applet may call to implement the drawing. In still other embodiments, the APIs are program information for the target web page, and the applet implements the drawing by loading the program information.

Specifically, the following sequence of drawing a table, drawing text, drawing pictures, and finally deriving pictures is illustrated in S11a-S11 d. It is to be understood that the drawings may be drawn in other orders and are not limited thereto.

S11 a: the terminal draws a table in advance based on the positions, sizes, lengths, filling colors, background colors and the like of a rectangular frame, a line and the like in a target chart: drawing a rectangle by calling rect; filling the rectangle color by calling fillStyle; moving the drawing point to a specified position by calling moveTo; a line is drawn by calling lineTo from the drawing point to the point specified by lineTo.

S11 b: and the terminal draws the text by calling the fillText based on the position, the font color, the font size and the like of the text in the target diagram.

S11 c: the terminal draws the picture by calling drawImage based on the position, size, etc. of the picture in the target chart. Optionally, the terminal may further generate a picture, such as a two-dimensional code, based on target information, where the target information may be an access address of a target webpage where the target diagram is located, a home page of a product described by the webpage, and the like. Information such as trademarks can be drawn on the canvas to protect the copyright of the generated pictures.

S11 d: after the terminal finishes drawing, all contents drawn on the canvas can be exported into a picture through a TODataURL method provided by the canvas label, and the picture is stored by the user.

Fig. 3B is a diagram illustrating a first picture provided in an embodiment of the present application. The target graph is a 6-row 7-column graph comprising five fields and 7 objects, and is a comparison graph of the 5 fields for the 7 objects. Besides the image comprising the target chart, the two-dimensional code and information such as company brands and trademarks which directly reach the home page of the tool product are generated at the bottom of the target chart by the first picture, and therefore the tool product is convenient for a user to share the information with friends and the friends can use the tool product by scanning the codes. And company brands, trademarks, such as trademark 1 and trademark 2, owner information, etc. may protect the copyright of the first picture, etc.

It should be understood that the above APIs may be provided by the application program where the applet operates, by the applet itself, or by program information sent by the server.

S12: and displaying the first picture.

S13: and responding to a second user operation input aiming at the first picture, and saving the first picture.

Before saving the first picture, the first picture may be displayed to prompt the user about the picture to be saved. As with the user interface shown in fig. 3C, the user interface may include a prompt box 304, the prompt box 304 including a first picture and indication information 305. The indication information is used for indicating a user to save the first picture.

An application program in the terminal, such as a social application or a browser, responds to a second user operation input by the user for the first picture, such as a long press operation or a re-press operation of the user on the first picture, and the terminal displays a user interface as shown in fig. 3D, where the user interface includes a prompt box 307, and the prompt box 307 includes a plurality of options, for example, in the applet application and the social application, as shown in fig. 3D, including "forward to friend", "collect", "save picture", "search for one" and "cancel". And responding to a third user operation, such as a short press operation, input by the user aiming at the second control, such as an option 'save picture', and saving the first picture to the album.

In some embodiments, the terminal responds to a second user operation input for the first picture, such as a long press operation or a re-press operation of the user on the first picture, and the terminal saves the first picture to the album.

Optionally, sending the first picture to the selected contact may be implemented in response to a fourth user operation, such as a short press operation, entered by the user with respect to a third control in the prompt box 304, such as the option "forward to friend".

It should be understood that the second control or the third control may also be displayed in other ways, such as being set in a menu bar of a browser, or being set in a menu that pops up in response to a user operation, such as a right click or a long press.

In the embodiment shown in fig. 2, the graph in the web page is converted into the picture, and then the graph in the web page is saved in a picture saving mode supported by the browser or the social application, and the logic conflict with the existing logic for saving the picture in the browser or the social application is avoided.

When the size of the first picture is large, and the first picture is displayed in a small prompt box or a small display screen, if the first picture is displayed completely, a user can hardly distinguish whether the currently displayed image is the image which the user needs to store. As shown in fig. 4, another graph saving method provided in the embodiment of the present application may be executed by an application program that can access a web page, such as a terminal, a browser in the terminal, or a social application, or an applet in the application program, where the embodiment of the present application is described by taking the applet as an example, the method may include, but is not limited to, the following partial or all steps:

s21: in response to a first user operation input for a target graph on a target webpage, the target graph is converted into a first picture. For specific implementation, reference may be made to the related description of step S11 in the method embodiment shown in fig. 2, which is not described herein again.

S22: and generating a second picture which is an incomplete thumbnail of the target chart.

Alternatively, the second picture may be a screenshot of the first picture, which may be a top left part, a top right part, a bottom left part, a bottom right part, etc. of the first picture, for example, a region of the top left corner of the first picture is taken, or the contents of the top Q columns of the top P rows of the target diagram are taken. P, Q are all positive integers, P is less than N and Q is less than M. Further, the size of the second picture is not larger than the screen of the user terminal, for example, 1/2 which is the screen size, may also be smaller than 1/2 which is the screen size, and may also be calculated in an adaptive size according to the screen of the user terminal.

Optionally, the second picture may also be drawn based on the target diagram, specifically, drawn based on the content of the first P rows and the first Q columns of the target diagram, P, Q are positive integers, P is smaller than N, and Q is smaller than M. Regarding the method for drawing the second picture and the above-mentioned method for drawing the first picture, refer to the above-mentioned method for generating the first picture in step S11 in fig. 2, and are not described herein again.

S23: and displaying a second picture on the first picture layer and displaying the first picture on the second picture layer, wherein the second picture layer is a transparent picture layer, the second picture layer is positioned on the first picture layer, and the displayed second picture covers the first picture in position.

S24: and responding to a second user operation input aiming at the first picture, and saving the first picture.

Because the second layer is a transparent layer, that is, the content displayed by the second layer is invisible to the user. At this time, the user substantially performs operations on the first picture displayed on the second layer, such as a saving operation or a sharing operation, and the saved or shared pictures are all the first pictures, that is, pictures including the complete target diagram.

After the above fig. 3A is displayed, a first picture and a second picture may be generated, and then a user interface as shown in fig. 5A is displayed, where the user interface includes a first layer including a prompt box 501, and the prompt box 501 includes the second picture and prompt information 305, where fig. 5A exemplifies that the second picture is drawn based on the contents of the first 3 rows and the first 3 columns of the target chart (i.e., an incomplete target chart). The first picture 503 on the second layer is located above the second picture on the first layer, and it should be understood that the second layer is a transparent layer, and the content displayed on the transparent layer is not actually visible to the user, as shown in fig. 5B. In this embodiment of the application, the user interface shown in fig. 5A is to set the second layer to be semi-transparent in order to explain a positional relationship between the first layer and the second layer. As can be seen from fig. 5A and 5B, the first picture in the second layer blocks the second picture in the first layer at a position, and the first picture is transparent on the display, so that the user can only observe the content on the first layer, that is, can see the second picture, but cannot see the first picture.

Optionally, the first picture on the second layer is displayed in a full screen, so that the user operation for any position on the screen is the operation for the first picture, and even if the user operation appears to be the operation for the second picture, the user operation is actually the operation for the first picture.

As shown in fig. 5A, in response to an operation on the first picture, such as a long press operation of the user on the first picture, the terminal may display a user interface as shown in fig. 5C, where the user interface further includes a prompt box 503, and the prompt box 503 includes a plurality of options, for example, in the applet application and social application, as shown in fig. 5C, including "forward to friend", "favorite", "save picture", "search for one" and "cancel". These are functions of the social application, and details about specific implementation of each function are not described herein. And responding to a user operation, such as a short press operation, input by a user aiming at the first control, such as an option 'save picture', and saving the first picture to the album.

Optionally, sending the first picture to the selected contact may be implemented in response to a user operation, such as a short press operation, entered by the user with respect to a second control, such as the option "forward to friend".

In the embodiment shown in fig. 4, by displaying two layers, a first layer and a second layer, an incomplete thumbnail of a target chart is displayed by the first layer, a complete picture of the target chart is displayed by the second layer, and the second layer located on the upper layer is set to be a transparent layer, so that the complete picture displayed by the second layer is invisible.

In other embodiments, an application program running the applet, such as a browser or a social application, includes a control or a menu for implementing chart conversion into a picture, and in response to a user operation input for the control or the menu, the application program performs an operation of converting the target chart into the first picture or the second picture, and at this time, the application program or the terminal includes an API for implementing drawing of the target chart by the user.

The first user operation, the second user operation, the third user operation, the fourth user operation, or any one of the mentioned user operations may be the same or different, and may be a click, a double click, a right click, a long press or a short press, a heavy press, a light press, or the like.

In one application scenario, a small program is run in the social application, and the small program is used for interacting with a corresponding server to realize purchase, settlement and the like of insurance such as car insurance, medical insurance and the like. Illustratively, the applet includes a functional unit for instructing the car owner to purchase the car insurance, which is called a tool "how to buy the car insurance", and mainly solves the problem that the car owner can select a car insurance quotation suitable for the car owner based on the received or searched car insurance quotation when the car owner's car insurance is due and enters a warranty period or the car owner needs to select the car insurance. It can be understood that the present application is also applicable to other product comparisons, and in a scenario where a comparison report displayed in a chart needs to be shared or saved.

When the system is used, the car insurance quotations which are quoted in the database are obtained based on user information, after a privacy policy is checked by a car owner, a plurality of car insurance quotations which need to be compared and analyzed can be uploaded, then the car insurance quotations are sent to the server, after the server receives the car insurance quotations, the situation of each dangerous type and cost (field) of each car insurance quotation (namely an object) is identified, then a comparison report of the car insurance quotations is generated, the comparison report is displayed in a graph form, the display area of the graph is larger than that of a terminal, and a user can check the complete comparison report displayed in the graph in a left-right sliding mode.

The server can analyze the car insurance quotations which are most favorite to buy for the user, the dangerous types bought by most people, the dangerous types bought by part of people and the like based on historical purchase information of various car insurance quotations, and can also provide a recommendation index for indicating the car insurance quotations so that the user can select the car insurance quotations suitable for the user based on the information.

When the car owner can not understand the comparison report, the comparison report in the form of the chart can be stored into a high-definition picture, and then the picture is shared to friends; it can also be analyzed to new friends so that the new friends can select the car insurance quotations suitable for themselves based on the comparison report.

The application can provide real valuable service for car insurance potential users, improve user stickiness, and enable a tool of 'how to buy car insurance' to break the boundary of equipment through sharing, and create a social environment of car insurance user fission by using a car insurance selective purchasing scene, thereby achieving the goals of backflow, activity and conversion of car insurance business.

The following describes apparatuses and devices related to embodiments of the present application.

As shown in fig. 6, for a chart saving apparatus provided in this embodiment of the present application, the apparatus may be the terminal or a unit or module in the terminal, and the apparatus 60 may include:

a conversion unit 601, configured to convert a target graph on a target web page into a first picture in response to a first user operation input for the target graph;

a display unit 602, configured to display the first picture;

a saving unit 603 configured to save the first picture in response to a second user operation input for the first picture.

In a possible implementation, the conversion unit 601 is further configured to convert the target diagram into a second picture; the second picture is an incomplete thumbnail of the target chart;

the display unit 602 is specifically configured to: displaying the second picture on a first picture layer and displaying the first picture on a second picture layer, wherein the second picture layer is a transparent picture layer, the second picture layer is positioned on the first picture layer, and the displayed first picture covers the second picture in position.

In a possible embodiment, the target graph is a table with N rows and M columns, the second picture is generated according to the content of the first P rows and the first Q columns of the target picture, N, M are all positive integers greater than 1, P, Q are all positive integers, P is less than N, and Q is less than M.

In a possible embodiment, the device 60 further comprises:

Optionally, the target webpage includes a first control, the first user operation is a user operation for the first control, and the receiving unit is further configured to receive program information sent by the server;

the conversion unit 601 is specifically configured to: and responding to a first user operation input aiming at a target graph on a webpage, and converting the target graph into a first picture by running the program information.

In a possible implementation manner, the target diagram includes a plurality of elements and an attribute of each of the plurality of elements, and the conversion unit 601 is specifically configured to: drawing each element of the plurality of elements on a canvas according to an attribute of the each element, the element comprising at least one of text, a line, a rectangular box, and a picture, the attribute comprising at least one of a position, a font color, a font size, a line type, a line thickness, a line length, a size, a fill color, and a background color.

In one possible embodiment, the second user operation is a long press operation,

the display unit 602 is further configured to display a prompt box in response to the long press operation input for the first picture, where the prompt box includes a second control;

the saving unit 603 is specifically configured to, in response to a third user operation input for the second control, save the first picture to an album.

Optionally, the prompt box further includes a third control, and the apparatus 60 further includes:

It should be noted that the sending unit and the receiving unit in fig. 6 may be implemented by the network interface 704 in fig. 7, and the converting unit 501 and the display unit 507 in fig. 6 may be implemented by the processor 701 and the display screen in fig. 7.

It should be understood that the apparatus 60 described in the embodiment of the present invention can perform the description of the graph saving method in the method embodiment corresponding to fig. 2 and fig. 4, which is not described herein again. In addition, the beneficial effects of the same method are not described in detail.

Fig. 7 is a schematic structural diagram of a terminal according to an embodiment of the present invention. The terminal 70 may specifically be the terminal 10 in fig. 1A or fig. 1B, and may include: the processor 701, the network interface 704, and the memory 605, and the terminal 70 may further include: a user interface 703, and at least one communication bus 702.

Wherein a communication bus 902 is used to enable connective communication between these components.

The user interface 703 may include a Display screen (Display) and a Keyboard (Keyboard), and the optional user interface 703 may also include a standard wired interface and a standard wireless interface.

The network interface 704 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface).

The processor 701 may be a Central Processing Unit (CPU), and the processor 701 may also be other general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), an off-the-shelf programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.

The memory 705 may be a high-speed RAM (random Access memory), a RAM random Access memory, an NVRAM, or a non-volatile memory (NVM), such as a rom (read Only memory), a flash memory, a hard disk, or the like. As shown in fig. 7, the storage 705, which is a computer-readable storage medium, may include an operating system, a network communication module, a user interface module, and a device control application program, which may be loaded into the memory to implement various functions of the apparatus 60 or the terminal 70 when the apparatus 60 or the terminal 70 runs.

The display screen may be a touch display screen, and may display a user interface provided in each embodiment of the present application, so as to implement interaction between the terminal 70 and a user.

Not limited to the various components described above, the terminal 70 may also include more or fewer components, e.g., the terminal 70 may also include sensors, transceivers, etc.

The processor 701 invokes the data and computer instructions stored in the memory 705 to perform the following:

displaying the first picture through a display screen;

In one possible implementation, the processor 701 is further configured to perform:

the processor 701 displays a first picture through a display screen, including: displaying the second picture on a first picture layer and displaying the first picture on a second picture layer, wherein the second picture layer is a transparent picture layer, the second picture layer is positioned on the first picture layer, and the displayed first picture covers the second picture in position.

In one possible implementation, the target chart is a table with N rows and M columns, the second picture is generated according to the content of the first P rows and the first Q columns of the target chart, N, M are all positive integers greater than 1, P, Q are all positive integers, P is less than N, and Q is less than M.

In one possible implementation, before the processor 701 responds to the first user operation on the target graph input on the target webpage, the processor 701 is further configured to perform:

sending a chart generation request to a server of the target webpage through a network interface 704, wherein the chart generation request carries at least one picture, and the request is used for requesting the server to generate the target chart based on the content of the at least one picture;

the target graph sent from the server is received through a network interface 704.

In one possible implementation, the target web page includes a first control, the first user operation is a user operation for the first control, and the processor is further configured to perform:

receiving program information sent by the server through a network interface 704;

the processor 701 performs the converting the target graph into the first picture, including performing: and responding to a first user operation input aiming at a target graph on a webpage, and converting the target graph into a first picture by running the program information.

In a possible implementation, the target diagram includes a plurality of elements and an attribute of each of the plurality of elements, and the processor 701 performs the converting the target diagram into the first picture, specifically includes performing: drawing each element of the plurality of elements on a canvas according to an attribute of the each element, the element comprising at least one of text, a line, a rectangular box, and a picture, the attribute comprising at least one of a position, a font color, a font size, a line type, a line thickness, a line length, a size, a fill color, and a background color.

In a possible implementation, the second user operation is a long-press operation, and the processor executes the saving of the first picture, specifically including executing:

responding to the long press operation input aiming at the first picture, and displaying a prompt box through a display screen, wherein the prompt box comprises a second control;

In one possible implementation, the prompt box further includes a third control, and the processor is further configured to perform: in response to a fourth user operation input with respect to the third control, the first picture is shared to a target contact.

It should be understood that the terminal 70 described in the embodiment of the present invention may perform the description of the chart saving method in the method embodiment corresponding to fig. 2 and fig. 4, which is not described herein again. In addition, the beneficial effects of the same method are not described in detail.

It should also be understood that the terminal 10 or the device 60 may be an electronic device such as a mobile phone, a tablet computer, a notebook computer, a desktop computer, a smart television, and the like.

Further, here, it is to be noted that: an embodiment of the present invention further provides a computer-readable storage medium, where the computer program executed by the aforementioned apparatus 600 or terminal 700 is stored in the computer-readable storage medium, and the computer program includes program instructions, and when the processor 701 executes the program instructions, the method for saving the graph shown in any one of fig. 2 and fig. 4 can be implemented, so that details are not repeated here. In addition, the beneficial effects of the same method are not described in detail. For technical details not disclosed in the embodiments of the computer-readable storage medium according to the present invention, reference is made to the description of the method embodiments of the present invention.

It should be understood that reference to "a plurality" herein means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship. In addition, the step numbers described herein only exemplarily show one possible execution sequence among the steps, and in some other embodiments, the steps may also be executed out of the numbering sequence, for example, two steps with different numbers are executed simultaneously, or two steps with different numbers are executed in a reverse order to the order shown in the figure, which is not limited by the embodiment of the present application.

It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by a computer program, which can be stored in a computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. The storage medium may be a magnetic disk, an optical disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), or the like.

The above disclosure is only for the purpose of illustrating the preferred embodiments of the present invention, and it is therefore to be understood that the invention is not limited by the scope of the appended claims.

Claims

1. A method for preserving a chart, comprising:

displaying the first picture;

2. The method of claim 1, further comprising:

3. The method of claim 2, wherein the target graph is a table with N rows and M columns, wherein the second picture is generated according to contents of a first P rows and a first Q columns of the target graph, wherein N, M are positive integers greater than 1, P, Q are positive integers, P is less than N, and Q is less than M.

4. The method of claim 1, wherein prior to responding to the first user operation on the target graph input on the target web page, the method further comprises:

receiving the target chart sent by the server.

5. The method of claim 3, wherein the target web page includes a first control, and wherein the first user operation is a user operation directed to the first control, the method further comprising:

receiving program information sent by the server;

6. The method according to any one of claims 1 to 5, wherein the target diagram includes a plurality of elements and attributes of each of the plurality of elements, and the converting the target diagram into the first picture specifically includes:

7. The method according to claims 1 to 5, wherein the second user operation is a long press operation, and the saving the first picture specifically comprises:

8. The method of claim 7, wherein the prompt box further comprises a third control, the method further comprising:

9. An electronic device, comprising: a processor and a memory; the memory has stored therein a computer program; the processor, which is used for loading the computer program to realize the chart saving method according to any one of claims 1-8.

10. A computer-readable storage medium, characterized in that the computer-readable storage medium stores a computer program comprising program instructions that, when executed by a processor, cause the processor to execute the preservation method of a chart according to any one of claims 1 to 8.