CN111199511A - Graph generation method and device and computer readable storage medium - Google Patents
Graph generation method and device and computer readable storage medium Download PDFInfo
- Publication number
- CN111199511A CN111199511A CN201811371609.4A CN201811371609A CN111199511A CN 111199511 A CN111199511 A CN 111199511A CN 201811371609 A CN201811371609 A CN 201811371609A CN 111199511 A CN111199511 A CN 111199511A
- Authority
- CN
- China
- Prior art keywords
- target area
- generating
- processed
- canvas container
- image
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 32
- 238000004590 computer program Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 12
- 230000000694 effects Effects 0.000 description 3
- 239000007787 solid Substances 0.000 description 3
- 230000006870 function Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Classifications
-
- G06T3/08—
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T17/00—Three dimensional [3D] modelling, e.g. data description of 3D objects
Abstract
The disclosure relates to a method and a device for generating a graph and a computer readable storage medium, and relates to the technical field of computer graphics. The method comprises the following steps: intercepting the image to be processed in a target area in a page; generating a canvas container with a corresponding size on a target area according to a three-dimensional model to be generated; generating the stereoscopic model in a canvas container; the images to be processed are arranged on respective faces of the stereoscopic model to generate a stereoscopic image. The technical scheme of the disclosure can reduce development cost and improve development efficiency.
Description
Technical Field
The present disclosure relates to the field of computer graphics technologies, and in particular, to a method and an apparatus for generating a graphic, and a computer-readable storage medium.
Background
When the network is faster and faster, the page effect is more and more complex. For example, a stereoscopic effect may be added to a website to improve the expressiveness of the page.
In the related art, a container accommodating a stereoscopic graphic is previously set at a fixed position before generating a page, and a page having a stereoscopic effect is generated from a previously set picture.
Disclosure of Invention
The inventors of the present disclosure found that the following problems exist in the above-described related art: once the page is generated, the position and content of the stereo graph cannot be changed, and if the page needs to be changed, the page needs to be redeveloped, so that the development cost is high and the efficiency is low.
In view of this, the present disclosure provides a technical scheme for generating a graph, which can reduce development cost and improve development efficiency.
According to some embodiments of the present disclosure, there is provided a method of generating a graph, including: intercepting the image to be processed in a target area in a page; generating a canvas container with a corresponding size on the target area according to the three-dimensional model to be generated; generating the stereoscopic model in the canvas container; and arranging the images to be processed on each surface of the three-dimensional model to generate a three-dimensional graph.
In some embodiments, the location information of the target area and the URL (uniform resource Locator) of the page are obtained; and intercepting the image to be processed by utilizing node.js according to the position information and the URL.
In some embodiments, the location information of the target area is sent to a browser, so that the browser generates an opaque background of a corresponding size and overlays the opaque background on the target area.
In some embodiments, the size of the canvas container is greater than the size of the target area; the canvas container is a transparent canvas container.
In some embodiments, the stereoscopic model is generated using a WebGL web graphics library according to the location information of the target area.
According to still further embodiments of the present disclosure, there is provided a graphic generation apparatus including: the intercepting unit is used for intercepting the image to be processed in a target area in a page; and the generating unit is used for generating a canvas container with a corresponding size on the target area according to the three-dimensional model to be generated, generating the three-dimensional model in the canvas container, and arranging the image to be processed on each surface of the three-dimensional model to generate a three-dimensional graph.
In some embodiments, the intercepting unit acquires the location information of the target area and the URL of the page, and intercepts the image to be processed by node.
In some embodiments, the generating means further comprises: and the sending unit is used for sending the position information of the target area to a browser so that the browser generates an opaque background with a corresponding size and covers the opaque background on the target area.
In some embodiments, the size of the canvas container is greater than the size of the target area; the canvas container is a transparent canvas container.
In some embodiments, the generating unit generates the stereoscopic model using a WebGL web graphic library according to the position information of the target area.
According to still further embodiments of the present disclosure, there is provided a graphic generation apparatus including: a memory; and a processor coupled to the memory, the processor configured to perform the method of generating a graph in any of the above embodiments based on instructions stored in the memory device.
According to still further embodiments of the present disclosure, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the method of generating a graphic in any of the above embodiments.
In the embodiment, the picture is directly intercepted from the page, and the canvas is set, so that the stereoscopic graph in the page can be quickly generated. Therefore, the two-dimensional image can be converted into the three-dimensional image in the desired area without redeveloping the page, so that the development cost is reduced, and the development efficiency is improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments of the disclosure and together with the description, serve to explain the principles of the disclosure.
The present disclosure may be more clearly understood from the following detailed description, taken with reference to the accompanying drawings, in which:
FIG. 1 illustrates a flow diagram of some embodiments of a method of generating a graph of the present disclosure;
FIG. 2 illustrates a flow diagram of some embodiments of step 110 in FIG. 1;
3a-3c show schematic diagrams of some embodiments of a method of generating a graph of the present disclosure;
FIG. 4 illustrates a block diagram of some embodiments of a graphics generation apparatus of the present disclosure;
FIG. 5 shows a block diagram of further embodiments of a graphics generation apparatus of the present disclosure;
fig. 6 illustrates a block diagram of still further embodiments of a graphics generation apparatus of the present disclosure.
Detailed Description
Various exemplary embodiments of the present disclosure will now be described in detail with reference to the accompanying drawings. It should be noted that: the relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present disclosure unless specifically stated otherwise.
Meanwhile, it should be understood that the sizes of the respective portions shown in the drawings are not drawn in an actual proportional relationship for the convenience of description.
The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the disclosure, its application, or uses.
Techniques, methods, and apparatus known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate.
In all examples shown and discussed herein, any particular value should be construed as merely illustrative, and not limiting. Thus, other examples of the exemplary embodiments may have different values.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, further discussion thereof is not required in subsequent figures.
Fig. 1 illustrates a flow diagram of some embodiments of a method of generating a graph of the present disclosure.
As shown in fig. 1, the method includes: step 110, intercepting an image to be processed; step 120, generating a canvas container; step 130, generating a three-dimensional model; and step 140, generating a three-dimensional graph.
In step 110, the image to be processed is intercepted within the target area in the page. For example, the target region is a region in which a two-dimensional image is to be converted into a three-dimensional image, and the two-dimensional image contained in the region is the image to be processed. In some embodiments, the image to be processed may be intercepted by the steps in fig. 2.
FIG. 2 illustrates a flow diagram for some embodiments of step 110 in FIG. 1.
As shown in fig. 2, step 110 includes: step 1110, acquiring location information and a URL; step 1120, intercepting the image to be processed.
In step 1110, the location information of the target area and the URL of the page are acquired. For example, the location information may include location coordinates and area size. The position coordinates may be coordinates of the top left vertex of the target region, and the region size may be the width and height of the target region.
In step 1120, the image to be processed is intercepted by node.
In some embodiments, the URL, the coordinates of the top left vertex, the width, and the height are saved and then sent to the node. Js backend may treat the page as a module of a program (e.g., dynamic ads in the target area as different pictures that are refreshed 60 times per second), thereby implementing the screenshot function. Js can solve the problem that the browser cannot directly capture the page, so that an image source and an area which want to generate the three-dimensional graph can be customized without redeveloping a new page, page forming efficiency is improved, and page generating cost is reduced.
In some embodiments, the location information of the target area may also be sent to the browser so that the browser generates an opaque background of a corresponding size and overlays the opaque background on the target area. For example, a two-dimensional image may be generated in which a white background of the same size as the target area obscures the target area.
After the image to be processed is obtained, the stereoscopic image can be generated through the remaining steps in fig. 1.
In step 120, a canvas container of a corresponding size is generated on the target area according to the stereoscopic model to be generated. For example, the size of the canvas container is larger than the size of the target area, and the canvas container is a transparent canvas container. The size of the canvas container may be set according to the size of the stereoscopic model.
Since the solid figure may have a rotation function, the solid figure may exceed the range of the target region during the rotation. Therefore, the size of the canvas container is larger than that of the target area, and the completeness of the display of the stereoscopic graphics can be ensured.
In step 130, a stereoscopic model is generated in the canvas container. For example, a stereoscopic model is generated using a WebGL web graphic library according to the position information of the target area.
In step 140, images to be processed are disposed on respective faces of the stereoscopic model to generate a stereoscopic graphic.
Fig. 3a-3c show schematic diagrams of some embodiments of a method of generating a graph of the present disclosure.
As shown in fig. 3a, page 3 includes area 31, area 32, and area 33. For example, the two-dimensional image 34 is processed with the region 31 as a target region. Patterns 341 and 342 may be included in image 34. Js to node. is sent the left vertex coordinates, width, length of area 31, and the URL of page 3. Js intercepts the image 34 according to the location information.
As shown in fig. 3b, the browser may generate a white background having the same size as the area 31 according to the location information returned by the server, and overlay the white background on the area 31. A transparent canvas container (not shown) is created over the area 31, the size of the canvas container being larger than the area 31 in case the generated solid model 35 exceeds the area 31. The stereoscopic model 35 is generated in the canvas container using WebGL.
As shown in fig. 3c, the images 34 are arranged on respective sides of a stereoscopic model 35 to form a stereoscopic graphical substitute image 34.
In the embodiment, the picture is directly intercepted from the page, and the canvas is set, so that the three-dimensional graph in the page can be quickly generated. Therefore, the two-dimensional image can be converted into the three-dimensional image in the desired area without redeveloping the page, so that the development cost is reduced, and the development efficiency is improved.
Fig. 4 illustrates a block diagram of some embodiments of a generation apparatus of a graph of the present disclosure.
As shown in fig. 4, the graph generation apparatus 4 includes: interception means 41 and generation means 42.
The clipping unit 41 clips an image to be processed within a target area in a page. The generating unit 42 generates a canvas container of a corresponding size on the target area according to the stereoscopic model to be generated, generates the stereoscopic model in the canvas container, and sets the images to be processed on respective sides of the stereoscopic model to generate the stereoscopic picture.
In some embodiments, the capturing unit 41 obtains the location information of the target area and the URL of the page, and captures the image to be processed by node.
In some embodiments, the generating device 4 of the graph further comprises a sending unit 43. The transmitting unit 43 transmits the position information of the target area to the browser so that the browser generates an opaque background of a corresponding size and overlays the opaque background on the target area.
In some embodiments, the size of the canvas container is larger than the size of the target area, the canvas container being a transparent canvas container.
In some embodiments, the generating unit 42 generates the stereoscopic model using the WebGL web graphic library according to the position information of the target area.
In the embodiment, the picture is directly intercepted from the page, and the canvas is set, so that the three-dimensional graph in the page can be quickly generated. Therefore, the two-dimensional image can be converted into the three-dimensional image in the desired area without redeveloping the page, so that the development cost is reduced, and the development efficiency is improved.
FIG. 5 illustrates a block diagram of further embodiments of an apparatus for generating a graph of the present disclosure.
As shown in fig. 5, the graph generation apparatus 5 of this embodiment includes: a memory 51 and a processor 52 coupled to the memory 51, the processor 52 being configured to execute the method for generating a graph in any one of the embodiments of the present disclosure based on instructions stored in the memory 51.
The memory 51 may include, for example, a system memory, a fixed nonvolatile storage medium, and the like. The system memory stores, for example, an operating system, an application program, a Boot Loader (Boot Loader), a database, and other programs.
Fig. 6 illustrates a block diagram of still further embodiments of a graphics generation apparatus of the present disclosure.
As shown in fig. 6, the graph generation apparatus 6 of this embodiment includes: a memory 610 and a processor 620 coupled to the memory 610, the processor 620 being configured to execute the method for generating a graph in any of the foregoing embodiments based on instructions stored in the memory 610.
The memory 610 may include, for example, system memory, fixed non-volatile storage media, and the like. The system memory stores, for example, an operating system, an application program, a Boot Loader (Boot Loader), and other programs.
The generation apparatus 6 of the figure may further include an input-output interface 630, a network interface 640, a storage interface 650, and the like. These interfaces 630, 640, 650 and the connections between the memory 610 and the processor 620 may be through a bus 660, for example. The input/output interface 630 provides a connection interface for input/output devices such as a display, a mouse, a keyboard, and a touch screen. The network interface 640 provides a connection interface for various networking devices. The storage interface 650 provides a connection interface for external storage devices such as an SD card and a usb disk.
As will be appreciated by one skilled in the art, embodiments of the present disclosure may be provided as a method, system, or computer program product. Accordingly, the present disclosure may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present disclosure may take the form of a computer program product embodied on one or more computer-usable non-transitory storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.
Up to this point, a method of generating a graphic, a device for generating a graphic, and a computer-readable storage medium according to the present disclosure have been described in detail. Some details that are well known in the art have not been described in order to avoid obscuring the concepts of the present disclosure. It will be fully apparent to those skilled in the art from the foregoing description how to practice the presently disclosed embodiments.
The method and system of the present disclosure may be implemented in a number of ways. For example, the methods and systems of the present disclosure may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order for the steps of the method is for illustration only, and the steps of the method of the present disclosure are not limited to the order specifically described above unless specifically stated otherwise. Further, in some embodiments, the present disclosure may also be embodied as programs recorded in a recording medium, the programs including machine-readable instructions for implementing the methods according to the present disclosure. Thus, the present disclosure also covers a recording medium storing a program for executing the method according to the present disclosure.
Although some specific embodiments of the present disclosure have been described in detail by way of example, it should be understood by those skilled in the art that the foregoing examples are for purposes of illustration only and are not intended to limit the scope of the present disclosure. It will be appreciated by those skilled in the art that modifications may be made to the above embodiments without departing from the scope and spirit of the present disclosure. The scope of the present disclosure is defined by the appended claims.
Claims (12)
1. A method of generating a graph, comprising:
intercepting the image to be processed in a target area in a page;
generating a canvas container with a corresponding size on the target area according to the three-dimensional model to be generated;
generating the stereoscopic model in the canvas container;
and arranging the images to be processed on each surface of the three-dimensional model to generate a three-dimensional graph.
2. The generation method according to claim 1, wherein said intercepting the image to be processed within a target area in a page comprises:
acquiring the position information of the target area and a Uniform Resource Locator (URL) of the page;
and intercepting the image to be processed by utilizing node.js according to the position information and the URL.
3. The generation method of claim 1, further comprising, prior to generating the canvas container:
and sending the position information of the target area to a browser so that the browser generates an opaque background with a corresponding size and covers the opaque background on the target area.
4. The generation method according to any one of claims 1 to 3,
the size of the canvas container is larger than the size of the target area;
the canvas container is a transparent canvas container.
5. A generation method according to any one of claims 1 to 3, wherein the generating the stereoscopic model in the canvas container comprises:
and generating the three-dimensional model by utilizing a WebGL network graphic library according to the position information of the target area.
6. An apparatus for generating a graphic, comprising:
the intercepting unit is used for intercepting the image to be processed in a target area in a page;
and the generating unit is used for generating a canvas container with a corresponding size on the target area according to the three-dimensional model to be generated, generating the three-dimensional model in the canvas container, and arranging the image to be processed on each surface of the three-dimensional model to generate a three-dimensional graph.
7. The generation apparatus of claim 6,
and the intercepting unit acquires the position information of the target area and the Uniform Resource Locator (URL) of the page, and intercepts the image to be processed by using node.
8. The generation apparatus of claim 6, further comprising:
and the sending unit is used for sending the position information of the target area to a browser so that the browser generates an opaque background with a corresponding size and covers the opaque background on the target area.
9. The generation apparatus according to any one of claims 6 to 8,
the size of the canvas container is larger than the size of the target area;
the canvas container is a transparent canvas container.
10. The generation apparatus according to claims 6 to 8,
and the generating unit generates the three-dimensional model by utilizing a WebGL network graphic library according to the position information of the target area.
11. An apparatus for generating a graphic, comprising:
a memory; and
a processor coupled to the memory, the processor configured to perform the method of generating a graphic of any of claims 1-5 based on instructions stored in the memory device.
12. A computer-readable storage medium on which a computer program is stored, which program, when executed by a processor, implements the graphics generation method of any of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811371609.4A CN111199511A (en) | 2018-11-19 | 2018-11-19 | Graph generation method and device and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811371609.4A CN111199511A (en) | 2018-11-19 | 2018-11-19 | Graph generation method and device and computer readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111199511A true CN111199511A (en) | 2020-05-26 |
Family
ID=70747188
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811371609.4A Pending CN111199511A (en) | 2018-11-19 | 2018-11-19 | Graph generation method and device and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111199511A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112330772A (en) * | 2020-11-03 | 2021-02-05 | 平安普惠企业管理有限公司 | Radar map generation method, device, equipment and storage medium |
| CN112631703A (en) * | 2020-12-25 | 2021-04-09 | 北京百度网讯科技有限公司 | Method, device and equipment for generating graphic frame and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6741242B1 (en) * | 2000-03-23 | 2004-05-25 | Famotik Kabushikikaisha | Multimedia documents integrating and displaying system |
| CN102289486A (en) * | 2011-08-08 | 2011-12-21 | 深圳超多维光电子有限公司 | Picture display method and system based on browser |
| CN102377875A (en) * | 2010-08-18 | 2012-03-14 | Lg电子株式会社 | Mobile terminal and image display method thereof |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN107393000A (en) * | 2017-08-24 | 2017-11-24 | 广东欧珀移动通信有限公司 | Image processing method, device, server and computer-readable recording medium |
-
2018
- 2018-11-19 CN CN201811371609.4A patent/CN111199511A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6741242B1 (en) * | 2000-03-23 | 2004-05-25 | Famotik Kabushikikaisha | Multimedia documents integrating and displaying system |
| CN102377875A (en) * | 2010-08-18 | 2012-03-14 | Lg电子株式会社 | Mobile terminal and image display method thereof |
| CN102289486A (en) * | 2011-08-08 | 2011-12-21 | 深圳超多维光电子有限公司 | Picture display method and system based on browser |
| CN104834753A (en) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | Webpage screenshot generating method and device |
| CN107393000A (en) * | 2017-08-24 | 2017-11-24 | 广东欧珀移动通信有限公司 | Image processing method, device, server and computer-readable recording medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112330772A (en) * | 2020-11-03 | 2021-02-05 | 平安普惠企业管理有限公司 | Radar map generation method, device, equipment and storage medium |
| CN112631703A (en) * | 2020-12-25 | 2021-04-09 | 北京百度网讯科技有限公司 | Method, device and equipment for generating graphic frame and storage medium |
| CN112631703B (en) * | 2020-12-25 | 2023-08-01 | 北京百度网讯科技有限公司 | Method, device, equipment and storage medium for generating graphic frame |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102215766B1 (en) | Method and apparatus for generating synthetic picture | |
| US10127327B2 (en) | Cloud-based image processing web service | |
| EP2782027A1 (en) | Apparatus and method providing augmented reality contents based on web information structure | |
| CN111354063B (en) | Three-dimensional element rendering method, desktop cloud server and desktop cloud system | |
| US8897598B1 (en) | Mosaicing documents for translation using video streams | |
| US9697581B2 (en) | Image processing apparatus and image processing method | |
| CN110032314B (en) | Long screen capture method and device, storage medium and terminal equipment | |
| US10642590B2 (en) | Method and electronic device for rendering scalable vector graphics content | |
| JP6140904B2 (en) | Terminal marking method, terminal marking device, program, and recording medium | |
| CN111199511A (en) | Graph generation method and device and computer readable storage medium | |
| CN108364324B (en) | Image data processing method and device and electronic terminal | |
| KR20150106846A (en) | Improvements in and relating to rendering of graphics on a display device | |
| US8854368B1 (en) | Point sprite rendering in a cross platform environment | |
| CN112711729A (en) | Rendering method and device based on page animation, electronic equipment and storage medium | |
| CN110069254B (en) | Text display method, text display device and server | |
| CN113538502A (en) | Picture clipping method and device, electronic equipment and storage medium | |
| CN110636105B (en) | Tree graph obtaining method and device, storage medium and electronic equipment | |
| JP6168872B2 (en) | Image processing apparatus, image processing method, and program | |
| CN113987242A (en) | File picture visualization method, device, equipment and medium | |
| KR102131650B1 (en) | Apparatus and method for data processing | |
| JP5842029B2 (en) | Information processing support apparatus, information processing apparatus, and information processing support program for caching image data | |
| CN110955854A (en) | Thermodynamic diagram generation method and device | |
| KR102599525B1 (en) | Method, device and system for displaying screen by improving visibility of image of interest | |
| JP6818517B2 (en) | Location information management device and location information management method | |
| CN108093004B (en) | Method and device for pushing graphs in report |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |