CN117076811A - Webpage export method, device, equipment and storage medium - Google Patents
Webpage export method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN117076811A CN117076811A CN202311322555.3A CN202311322555A CN117076811A CN 117076811 A CN117076811 A CN 117076811A CN 202311322555 A CN202311322555 A CN 202311322555A CN 117076811 A CN117076811 A CN 117076811A
- Authority
- CN
- China
- Prior art keywords
- webpage
- target
- canvas
- node
- page
- 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 68
- 238000003860 storage Methods 0.000 title claims abstract description 24
- 238000004590 computer program Methods 0.000 claims description 20
- 230000008569 process Effects 0.000 claims description 12
- 238000004364 calculation method Methods 0.000 claims description 5
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 claims description 5
- 238000009795 derivation Methods 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 24
- 230000006870 function Effects 0.000 description 12
- 238000004891 communication Methods 0.000 description 11
- 238000012545 processing Methods 0.000 description 7
- 230000003287 optical effect Effects 0.000 description 6
- 230000000694 effects Effects 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 238000009877 rendering Methods 0.000 description 3
- 230000005236 sound signal Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 229910044991 metal oxide Inorganic materials 0.000 description 1
- 150000004706 metal oxides Chemical class 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 238000005096 rolling process Methods 0.000 description 1
- 238000004088 simulation Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000010561 standard procedure Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Abstract
The application relates to the technical field of networks, in particular to a webpage export method, device, equipment and storage medium, wherein the method comprises the following steps: obtaining the scaling of the target webpage based on the original webpage size and the canvas size upper limit of the target webpage; drawing each webpage element in the target webpage into a target canvas based on the scaling; and finally, obtaining a page picture corresponding to the target webpage based on the drawn target canvas. In this way, the scaling corresponding to the webpage content is calculated through the original page size of the webpage and the canvas size upper limit of the canvas, and the drawing proportion is reduced under the condition that the webpage content exceeds the canvas size upper limit, so that the upper webpage content can be completely drawn on the canvas, further, the page picture is successfully derived, and the rapidness and applicability of webpage derivation are improved.
Description
Technical Field
The present application relates to the field of network technologies, and in particular, to a method, an apparatus, a device, and a storage medium for exporting a web page.
Background
The webpage export is an effective means for recording and sharing webpage information by webpage browsing objects, and is particularly common in various interest tests, service popularization and other active pages.
Currently, a common method for exporting web pages is to use a third party screenshot tool to save the web pages as long shots. However, when the content contained in the webpage is more, the roller is required to be continuously dragged to perform the screenshot, so that the screenshot speed is too slow, the operation complexity is high, the intercepted picture is not easy to keep the definition of the original picture, and the picture watching effect is affected.
In order to solve the problem of the dependence of the webpage export process on the third party tool, under the related technology, the attribute and the content of each HTML element in the webpage can be obtained by traversing the hypertext markup language (Hyper Text Markup Language, HTML) element, then each HTML element is drawn on a canvas through a drawing interface provided by a canvas tool based on a browser, and finally, a picture export interface of the canvas is used for exporting the webpage picture to the local.
However, when the method is adopted, because different devices and different browsers have different limits on the maximum size of canvas, when the webpage content exceeds the limit on the maximum size of canvas, drawing cannot be performed, and further, a webpage picture cannot be obtained smoothly.
Disclosure of Invention
The application provides a webpage export method, device, equipment and storage medium, which are used for improving the rapidness and applicability of webpage export.
In a first aspect, an embodiment of the present application provides a method for exporting a web page, where the method includes:
acquiring an original page size of a target webpage, and acquiring a canvas size upper limit of a target browser, wherein the target browser is used for presenting the target webpage;
obtaining the scaling of the target webpage based on the original webpage size and the canvas size upper limit of the target webpage;
drawing each webpage element in the target webpage into a target canvas based on the scaling;
and obtaining a page picture corresponding to the target webpage based on the drawn target canvas.
In a second aspect, an embodiment of the present application further provides a web page exporting apparatus, where the apparatus includes:
the acquisition module is used for acquiring the original page size of the target webpage and acquiring the canvas size upper limit of the target browser, wherein the target browser is used for presenting the target webpage;
the calculation module is used for obtaining the scaling of the target webpage based on the original webpage size and the canvas size upper limit of the target webpage;
the drawing module is used for drawing each webpage element in the target webpage into the target canvas based on the scaling;
and the export module is used for obtaining the page picture corresponding to the target webpage based on the drawn target canvas.
In one possible implementation, the original page size includes: page length, page width, and page area; the canvas upper size limit includes: an upper length limit, an upper width limit, and an upper area limit;
the calculation module is configured to, when obtaining the scaling of the target webpage based on the original page size and the canvas size upper limit of the target webpage:
if the page area is larger than the upper area limit, determining that the scaling of the target webpage is the ratio of the upper area limit to the page area;
if the page area is not greater than the area upper limit, the scaling of the target webpage is obtained based on the page length and page width of the target webpage, and the length upper limit and the width upper limit.
In one possible implementation, when obtaining the scaling of the target web page based on the page length and page width of the target web page, and the upper length limit and the upper width limit, the computing module is configured to:
if the page length is not greater than the length upper limit and the page width is greater than the width upper limit, determining the scaling ratio as: the ratio of the upper width limit to the page width;
if the page length is greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: the ratio of the upper length limit to the page length;
If the page length is not greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: 1.
in one possible implementation, before each webpage element in the target webpage is drawn into the target canvas based on the scaling, the drawing module is further configured to:
traversing nodes corresponding to all webpage elements in the target webpage in a node tree generated based on source codes corresponding to the target webpage, wherein in the traversing process, the following operations are executed:
when one node is a Document Object Model (DOM) node, acquiring and storing node content and node attribute of the DOM node, wherein the node attribute of the DOM node at least comprises: the position, width and height of DOM nodes and background color;
when one node is a canvas node, converting the webpage element corresponding to the canvas node into a picture in a character string format and storing, wherein the webpage element corresponding to the canvas node is drawn on other canvases except the target canvas provided by the target browser.
In one possible implementation, when each webpage element in the target webpage is drawn into the target canvas based on the scaling, the drawing module is configured to:
For each traversed webpage element, the following operations are respectively executed:
if the node corresponding to one webpage element is a DOM node and the scaling ratio is 1, drawing the one webpage element into the target canvas based on the node content of the DOM node and the original pixel bit corresponding to the node attribute;
if the node corresponding to one webpage element is a DOM node and the scaling ratio is not 1, scaling is performed on the node content of the DOM node and the original pixel bit corresponding to the node attribute based on the scaling ratio, and the scaled corresponding one webpage element is drawn into the target canvas;
if the node corresponding to one webpage element is a canvas node and the scaling ratio is 1, drawing a picture in a character string format corresponding to one webpage element into a target canvas;
if the node corresponding to one webpage element is a canvas node and the scaling ratio is not 1, adjusting the pixel density for the picture in the character string format corresponding to one webpage element based on the scaling ratio, and drawing the picture in the character string format after adjustment into a target canvas.
In one possible implementation, after each webpage element in the target webpage is drawn into the target canvas based on the scaling, the drawing module is further configured to:
And adding target watermark data in the target canvas based on the watermark adding requirement of the target object for the target webpage.
In one possible implementation, the web page elements include at least one or any combination of the following:
a text element;
an image element;
a form element;
an audio element;
video elements.
In a third aspect, an embodiment of the present application provides an electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method according to any one of the first aspects when executing the computer program.
In a fourth aspect, embodiments of the present application provide a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the method according to any of the first aspects.
In a fifth aspect, embodiments of the present application provide a computer program product which, when invoked by a computer, causes the computer to perform the method according to the first aspect.
The beneficial effects of the application are as follows:
in the embodiment of the application, a webpage export method, device, equipment and storage medium are provided, and a server obtains the scaling of a target webpage based on the original webpage size and the canvas size upper limit of the target webpage; drawing each webpage element in the target webpage into a target canvas based on the scaling; and finally, obtaining a page picture corresponding to the target webpage based on the drawn target canvas.
In this way, before the webpage content is drawn on the canvas so as to be exported as an image, the scaling corresponding to the webpage content is calculated through the original page size of the webpage and the canvas size upper limit of the canvas, and the drawing proportion is reduced under the condition that the webpage content exceeds the canvas size upper limit, so that the upper webpage content can be completely drawn on the canvas so as to successfully export the webpage picture, and especially for documents with ultra-long content, normal export can be realized.
Additional features and advantages of the application will be set forth in the description which follows, and in part will be obvious from the description, or may be learned by practice of the application. The objectives and other advantages of the application will be realized and attained by the structure particularly pointed out in the written description and claims thereof as well as the appended drawings.
Drawings
Fig. 1 is a schematic diagram of an application scenario according to an embodiment of the present application;
FIG. 2 is a flowchart of a method for exporting a web page according to an embodiment of the present application;
FIG. 3 is a schematic diagram of the upper limit of the canvas size corresponding to different browsers in different devices according to the summary of the present application;
FIG. 4 is a flow chart of a method of calculating a scale of a target web page;
FIG. 5 is a flowchart of a method for traversing nodes corresponding to web page elements in a target web page according to an embodiment of the present application;
FIG. 6 is a logic diagram of storing node content and node properties of DOM nodes in an embodiment of the present application;
FIG. 7 is a logical diagram of a save canvas node in an embodiment of the present application;
FIG. 8 is a flowchart of a method for drawing web page elements to a target canvas in accordance with an embodiment of the present application;
FIG. 9 is a logical diagram of drawing various webpage elements to a target canvas in accordance with an embodiment of the present application;
FIG. 10 is a schematic diagram of a first scenario for web page exporting according to an embodiment of the present application;
FIG. 11 is a schematic diagram of a second scenario for web page exporting according to an embodiment of the present application;
FIG. 12 is a diagram illustrating a third scenario for web page exporting according to an embodiment of the present application;
FIG. 13 is a diagram illustrating a process of a service completion web page exporting flow according to an embodiment of the present application;
FIG. 14 is a logic diagram of a web page exporting process performed by a server according to an embodiment of the present application;
FIG. 15 is a diagram showing the comparison of the page exporting effect of the present embodiment with that of the conventional embodiment;
FIG. 16 is a schematic diagram illustrating a configuration of a web page exporting apparatus according to an embodiment of the present application;
FIG. 17 is a schematic diagram of a hardware component of a computing device according to an embodiment of the application;
FIG. 18 is a schematic diagram of a hardware architecture of another computing device according to an embodiment of the application.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the embodiments of the present application more apparent, the technical solutions of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the technical solutions of the present application, but not all embodiments. All other embodiments, based on the embodiments described in the present document, which can be obtained by a person skilled in the art without any creative effort, are within the scope of protection of the technical solutions of the present application.
The terms first, second and the like in the description and in the claims and in the above-described figures, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used may be interchanged where appropriate such that the embodiments of the application described herein may be capable of operation in sequences other than those illustrated or otherwise described.
Some terms in the embodiments of the present application are explained below to facilitate understanding by those skilled in the art.
(1) Base64: one of the most common encoding schemes on networks for transmitting 8Bit byte codes is a method of representing binary data based on 64 printable characters.
(2) HTML: a markup language is disclosed, which includes a series of labels by which document formats on a network can be unified, so that distributed Internet resources are connected into a logical whole. HTML text is descriptive text composed of HTML commands that can specify words, graphics, animations, sounds, tables, links, etc.
(3) Canvas: is a new tag in HTML5 for generating images in real time on a web page and can manipulate the image content, and the Canvas API can export the image content into a binary object of one picture type using its toBlob interface, or convert the picture into Base64 code through the toDataURL interface.
(4) A document object model (Document Object Model, DOM), which is a standard method of expressing HTML documents as a tree structure, defining access and manipulation of HTML documents;
the following briefly describes the design concept of the embodiment of the present application:
HTML, which is a standard web page production language, is widely used for designing and producing web pages because of its advantages such as simplicity and convenience in typesetting. On this basis, in order to enable the webpage information to be conveniently shared and spread, the requirement of converting the HTML webpage into pictures is generated in many application scenes.
The common method for converting the webpage into the picture comprises the following two steps:
the method comprises the following steps: and selecting an area needing screenshot in the webpage by using a screenshot tool, or dragging a roller to scroll the screenshot, so as to acquire a picture corresponding to the whole webpage.
The second method is as follows: the HTML page is rendered into a picture using a code development tool and then output. For example, the attribute and content of each HTML element in the web page are traversed, each HTML element is drawn on a canvas through a drawing interface provided by a browser-based canvas tool, and finally, a web page picture is exported to the local using a picture export interface of the canvas.
However, when the method is adopted, the roller is continuously dragged to perform the rolling screenshot, so that the screenshot speed is too slow, the operation complexity is higher, the intercepted picture is not easy to keep the definition of the original picture, and the picture watching effect is affected.
When the method II is adopted, because different devices and different browsers have different limits on the maximum size of canvas, when a WeChat document with more text content needs to be processed, the contained content exceeds the maximum size limit of canvas, drawing cannot be performed, and corresponding pictures cannot be obtained smoothly.
In view of this, in an embodiment of the present application, a method, an apparatus, a device, and a storage medium for exporting a web page are provided.
In the embodiment of the application, a server firstly acquires the original page size of a target webpage and the upper limit of the canvas size of a target browser, and secondly acquires the scaling of the target webpage based on the original page size and the upper limit of the canvas size of the target webpage; drawing each webpage element in the target webpage into a target canvas based on the scaling; and finally, obtaining a page picture corresponding to the target webpage based on the drawn target canvas.
Therefore, before the webpage content is drawn on the canvas, the scaling of the webpage content is calculated based on the size of the webpage and the maximum size of the canvas, so that when the webpage content exceeds the maximum size of the canvas, the complete drawing of the webpage content can be realized by reducing the drawing proportion, further, the page picture corresponding to the webpage is successfully obtained, and the ultralong document can be normally exported.
The preferred embodiments of the present application will be described below with reference to the accompanying drawings of the specification, it being understood that the preferred embodiments described herein are for illustration and explanation only, and not for limitation of the present application, and embodiments of the present application and features of the embodiments may be combined with each other without conflict.
Fig. 1 is a schematic diagram of a possible application scenario in an embodiment of the present application.
The application scenario includes a terminal device 110 (including a terminal device 1101 and a terminal device 1102 …, and a terminal device 110 n) and a server 120, where the terminal device 110 and the server 120 may communicate through a communication network.
In an alternative embodiment, the communication network may be a wired network or a wireless network. Accordingly, the terminal device 110 and the server 120 may be directly or indirectly connected through wired or wireless communication. For example, the terminal device 110 may be indirectly connected to the server 120 through a wireless access point, or the terminal device 110 may be directly connected to the server 120 through the internet, which is not limited herein.
In the embodiment of the present application, the terminal device 110 includes, but is not limited to, a mobile phone, a tablet computer, a notebook computer, a desktop computer, an electronic book reader, an intelligent voice interaction device, an intelligent home appliance, a vehicle-mounted terminal, and the like; the terminal device can be provided with various clients, and the clients can be application programs (such as a browser, game software and the like) supporting functions of video preview, video playing and the like, web pages, applets and the like;
The server 120 is a backend server corresponding to a client installed in the terminal apparatus 110. The server 120 may be an independent physical server, a server cluster or a distributed system formed by a plurality of physical servers, or may be a cloud server providing cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, a content delivery network (Content Delivery Network, CDN), basic cloud computing services such as big data and an artificial intelligence platform.
It should be noted that, the method for exporting the web page in the embodiment of the present application may be performed by a computing device, which may be the server 120 or the terminal device 110, that is, the method may be performed by the server 120 or the terminal device 110 separately, or may be performed by both the server 120 and the terminal device 110 together.
In the following, the server alone is mainly used as an example, and the present application is not limited thereto.
It should be noted that, the number of the terminal devices 110 and the servers 120 is not limited in practice, and is not particularly limited in the embodiment of the present application, which is shown in fig. 1 for illustration only.
In the embodiment of the present application, when the number of servers 120 is plural, plural servers 120 may be formed into a blockchain, and the servers 120 are nodes on the blockchain.
Referring to fig. 2, a flowchart of a web page exporting method according to an embodiment of the present application is shown, and the following details of the steps executed with reference to fig. 2 are described below:
step S201: the original page size of the target webpage is obtained, and the canvas size upper limit of the target browser is obtained.
The target browser is used for presenting a target webpage.
Specifically, in the embodiment of the application, the server responds to the export operation of the user on the target webpage in the target browser, acquires the page length of the target webpage through document. Body. Scroll height, acquires the page width of the target webpage through document. Body. Scroll width, and acquires the canvas size upper limit of canvas corresponding to the preset target browser.
When the original page size of the target webpage is obtained, for the dynamically loaded webpages such as the document, the subsequent operation can be performed after all page contents of the document are required to be loaded in sequence.
On the other hand, referring to fig. 3, the size upper limit diagram of canvas corresponding to different browsers in different devices provided in the embodiment of the present application is shown, where, under a Mac operating system and a Windows operating system, the length upper limit and the width upper limit of the canvas corresponding to a google browser with version number greater than or equal to 73 are 65535 pixel bits, the area upper limit is 16384× 16384 (268435456) pixel bits, under a Mac operating system, the length upper limit and the width upper limit of the canvas corresponding to a Safari browser with version number greater than or equal to 5 are 4194303 pixel bits and 8388607 pixel bits, the area upper limit is 16348× 16384 (268435456) pixel bits, and the size upper limits of the canvas corresponding to the other devices and the browser are shown in fig. 3, which are not repeated herein.
The upper limit of the canvas area is not the product of the upper limit of the length and the upper limit of the width due to the drawing rules related to the canvas.
Step S202: and obtaining the scaling of the target webpage based on the original webpage size and the canvas size upper limit of the target webpage.
Specifically, in the embodiment of the present application, the original page size of the target webpage includes: page length, page width, and page area, canvas size upper limits include: an upper length limit, an upper width limit, and an upper area limit.
For example, the page length of the server acquisition target web page is denoted as H a， The page width is denoted as W a The page area is recorded as S a Acquiring the length upper limit of canvas corresponding to the operating system and the target browser of the current device as H max The upper limit of the width is W max The upper limit of the area is S max 。
The server firstly compares the page area of the target webpage with the upper area limit in the upper canvas size limit, and if the page area is larger than the upper area limit, the server determines that the scaling ratio of the target webpage is the ratio of the upper area limit to the page area.
For example, ifThe scaling of the target web page +.>。
It should be noted that, when the page area of the target webpage is greater than the upper area limit of the canvas, the page length and page width of the target webpage may still be less than the upper length limit and the upper width limit of the canvas.
Further, if the page area is not greater than the upper area limit, the server obtains the scaling of the target webpage based on the page length and page width of the target webpage, and the upper length limit and the upper width limit of the canvas.
Referring to fig. 4, a flowchart of a method for calculating a scaling of a target web page according to an embodiment of the present application is shown, and the following details of the steps performed in conjunction with fig. 4 are described below:
step S401: if the page length is not greater than the length upper limit and the page width is greater than the width upper limit, determining the scaling ratio as: the ratio of the upper width limit to the page width.
For example, ifAnd->The server determines the scaling of the target web page as。
Step S402: if the page length is greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: the ratio of the upper length limit to the page length.
For example, ifAnd->The server determines the scaling of the target web page as。
Step S403: if the page length is not greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: 1.
for example, ifAnd->The server determines that the scaling of the target web page is m=1.
Further, after obtaining the scaling of the target webpage, the server first traverses each webpage element in the target webpage and stores node information corresponding to each webpage element in order to draw each webpage element into a new canvas.
Referring to fig. 5, a flowchart of a method for traversing nodes corresponding to each web page element in a target web page according to an embodiment of the present application is shown, and the following details of the steps executed with reference to fig. 5 are described below:
step S501: and traversing nodes corresponding to the webpage elements in the target webpage in a node tree generated based on the source codes corresponding to the target webpage.
Specifically, in the embodiment of the present application, a server sequentially traverses nodes corresponding to each web page element from a root node by using a depth-first manner based on a node tree generated by a source code corresponding to a target web page, where the web page elements included in the target web page include at least one or any combination of the following:
(1) Text elements.
(2) Image elements.
(3) Form elements.
(4) Audio elements.
(5) Video elements.
Besides the above web page elements, elements such as animation, hyperlink, navigation bar, etc. may be included, which is not limited in the present application.
The server performs the following operations during one traversal:
step S502: when one node is a Document Object Model (DOM) node, acquiring and storing node contents and node attributes of the DOM node.
Wherein, the node attribute of DOM node includes at least: the position, width and height of the DOM node, and the background color.
Specifically, in the embodiment of the application, when traversing to the DOM node, the server calculates and stores the node content and the node attribute of the DOM node.
For example, referring to fig. 6, a logic diagram of saving node content and node attributes of a DOM node in an embodiment of the present application is shown, where a current node is a DOM node corresponding to a key element, and a server acquires and saves the node content of the node, that is, the text content "collection" of the corresponding key, and the node attribute of the node, that is, the position of the corresponding key: top:0; left:0, width and height: height= "200px"; width= "200px", background color: light gray #cdcdcd, and the like.
Step S503: when one node is a canvas node, converting the webpage element corresponding to the canvas node into a picture in a character string format and storing the picture.
The webpage elements corresponding to the canvas nodes are drawn on other canvases except the target canvases provided by the target browser.
For example, referring to fig. 7, a logic diagram of a canvas node is shown in an embodiment of the present application, where when traversing to the canvas node, a server obtains a webpage element corresponding to the canvas node, and converts the webpage element corresponding to the canvas node into a picture in a base64 format by using a canvas.
In another alternative embodiment, besides using canvas.todataurl () interface to convert the webpage element corresponding to the canvas node into the picture in base64 format, canvas.toblob interface may be used to convert the webpage element corresponding to the canvas node into binary data and then into the picture, which is not limited in this application.
The server circulates the steps until all DOM nodes in the target webpage are accessed, and stores node contents and node attributes of all DOM nodes and pictures converted by canvas nodes into corresponding sequence tables.
Because the target webpage possibly comprises the nodes corresponding to the webpage elements rendered by the HTML and the canvas at the same time, the webpage rendered based on the HTML and the canvas can be successfully exported as the picture by adopting the mode.
Step S203: and drawing each webpage element in the target webpage into the target canvas based on the scaling.
Further, in the embodiment of the present application, after the server traverses the nodes corresponding to the web page elements, the server invokes the target browser program interface to create a target canvas, that is, a new canvas, and then draws the web page elements into the target canvas according to the scaling ratio.
Specifically, referring to fig. 8, a flowchart of a method for drawing each webpage element to a target canvas according to an embodiment of the present application is shown, where the server performs the following operations for each traversed webpage element:
step S801: if the node corresponding to one webpage element is a DOM node and the scaling ratio is 1, drawing the one webpage element into the target canvas based on the node content of the DOM node and the original pixel bit corresponding to the node attribute.
The server accesses the node information corresponding to each node in the sequence table stored in advance according to the sequence of each webpage element in the target webpage, and when the DOM node is encountered and the scaling ratio is 1, the server directly draws the node content and the node attribute corresponding to the DOM node onto a newly built canvas by using a drawing interface of the canvas, namely the ratio of the current webpage element is not changed.
Step S802: if the node corresponding to one webpage element is a DOM node and the scaling ratio is not 1, scaling is performed on the node content of the DOM node and the original pixel bit corresponding to the node attribute based on the scaling ratio, and the scaled corresponding one webpage element is drawn into the target canvas.
When a DOM node is encountered and the scaling ratio is not 1, the server performs scaling on the original pixel bit corresponding to the node content and the node attribute of the DOM node based on the scaling ratio, and draws the webpage element corresponding to the scaled DOM node into a newly built canvas.
For example, when the scale is 0.5, the server draws a text of 14 pixels as 7 pixels.
Step S803: and if the node corresponding to one webpage element is a canvas node and the scaling ratio is 1, drawing the picture in the character string format corresponding to one webpage element into the target canvas.
When encountering a canvas node and the scaling ratio is 1, the server reads a picture in a character string format corresponding to the current webpage element from a sequence table stored in advance, and draws the picture into a newly built canvas.
Step S804: if the node corresponding to one webpage element is a canvas node and the scaling ratio is not 1, adjusting the pixel density for the picture in the character string format corresponding to one webpage element based on the scaling ratio, and drawing the picture in the character string format after adjustment into a target canvas.
When a canvas node is encountered and the scaling ratio is not 1, the server reads the picture in the character string format corresponding to the current webpage element in a sequence table stored in advance, adjusts the pixel density according to the scaling ratio, and then draws the adjusted picture into a newly-built canvas.
Referring to fig. 9, in the embodiment of the present application, when a server encounters a DOM node, node content and node attribute of the DOM node are read, and when the server encounters a canvas node, a canvas drawing interface is used to draw the DOM node into the target canvas, and when the server encounters a canvas node, a corresponding picture encoded by base64 is read, and a canvas image method is used to draw canvas elements on the original webpage in the form of pictures.
In another alternative embodiment, based on the definition requirement of the target object for the page picture led out by the target canvas, when the scaling is 1, the scaling can be properly increased on the basis of not exceeding the upper limit of the size of the canvas, namely, the size of each webpage element is enlarged, so that the definition of the page picture is improved; in addition, no matter the scaling ratio is 1 or not 1, the scaling ratio can be selected to be continuously reduced on the current basis, namely the size of each webpage element is reduced, so that the definition of the page picture is reduced, and the storage space occupied by the page picture is reduced.
Furthermore, after the server draws all the webpage elements in the target webpage, the target watermark data can be added into the target canvas based on the watermark adding requirement of the target object for the target webpage.
Notably, the size of the canvas after rendering is scaled adaptively with the size of each webpage element rendered therein, or the final size of the target canvas may be set in advance by canvas. Scale (M, M) prior to rendering.
Step S204: and obtaining a page picture corresponding to the target webpage based on the drawn target canvas.
Specifically, in the embodiment of the application, the server uses the toDataURL interface of canvas to export the content on the canvas into the picture in the base64 format, and stores the picture on the user equipment, thus completing the export flow of the target webpage.
Based on the above embodiment, a specific application scenario is adopted below to further describe the process of the webpage export method in the embodiment of the present application in detail:
referring to fig. 10, a schematic diagram of a first scenario derived from a web page according to an embodiment of the present application is shown, in which a user clicks a menu key at the upper right corner of the page after opening a document or the web page through a browser, and finds a "derive" function in a drop-down menu.
Further, referring to fig. 11, a second scene diagram of a web page export is shown in an embodiment of the present application, in which a user clicks a "picture" option, that is, intends to export the current web page as a picture, and in addition, the user may preview the picture to be exported and set functions such as watermark switch, watermark content, and picture definition for the picture to be exported.
Fig. 12 is a schematic diagram of a third scenario of web page export in an embodiment of the present application, in which after the user completes setting, clicking the export button, the server enters the web page export function, obtains the page picture corresponding to the current web page or document, and stores the page picture on the local device.
Fig. 13 is a schematic diagram of a process of completing a web page exporting procedure by a server according to an embodiment of the present application, which specifically includes:
step S1301: the original page size and canvas size upper limit of the target webpage are obtained.
Step S1302: and calculating the drawing proportion of the target webpage.
Step S1303: and drawing each webpage element in the target webpage based on the drawing scale.
Step S1304: the page picture is derived based on the target canvas.
Fig. 14 is a schematic logic diagram of a process of completing a webpage export by a server according to an embodiment of the present application, specifically, the server obtains an original page size of a target webpage based on an interface provided by a browser, calculates a scaling corresponding to the target webpage based on the original page size and an upper limit of a canvas size, traverses a node tree generated by a source code of the target webpage, sequentially draws nodes of different types into a target canvas according to the scaling, and finally exports the target canvas as a page picture based on the browser interface and stores the page picture in a local storage device.
In summary, in the embodiment of the application, before the webpage content is drawn on the canvas so as to export the webpage into the image, the scaling corresponding to the webpage content is calculated through the original page size of the webpage and the canvas size upper limit of the canvas, and the drawing proportion is reduced under the condition that the webpage content exceeds the canvas size upper limit, so that the upper webpage content can be completely drawn on the canvas, and further, the page picture is successfully exported, especially, the normal export can be realized for the document with the ultra-long content.
For example, referring to fig. 15, a comparison diagram of a page export effect of the present scheme and a conventional scheme is provided in the embodiment of the present application, where when the number of text words of a document exceeds 3000 words, the conventional scheme cannot export such document as a picture, and when the present scheme is used, the number of text words of the document can reach 6000 words, i.e. when the present scheme exports an ultralong document, the present scheme has a better export effect.
In addition, by adopting the technical scheme provided by the application, under the condition that the upper limit of the canvas size is not exceeded, the calculated scaling ratio can be properly adjusted, the drawing ratio is dynamically scaled, so that the definition of the final page picture can meet the preset requirement, and the scheme can also conduct page export on the webpage containing the HTML and canvas rendering contents at the same time, and has better applicability.
Furthermore, although the operations of the methods of the present application are depicted in the drawings in a particular order, this is not required to either imply that the operations must be performed in that particular order or that all of the illustrated operations be performed to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform.
Based on the same technical concept, referring to fig. 16, an embodiment of the present application further provides a web page exporting apparatus 1600, where the apparatus includes:
an obtaining module 1601, configured to obtain an original page size of a target webpage and obtain an upper canvas size limit of a target browser, where the target browser is configured to present the target webpage;
a calculation module 1602, configured to obtain a scaling of the target webpage based on an original page size and an upper canvas size limit of the target webpage;
a drawing module 1603, configured to draw each webpage element in the target webpage into the target canvas based on the scaling;
and the export module 1604 is used for obtaining the page picture corresponding to the target webpage based on the drawn target canvas.
In one possible implementation, the original page size includes: page length, page width, and page area; the canvas upper size limit includes: an upper length limit, an upper width limit, and an upper area limit;
The calculation module 1602 is configured to, when obtaining the scaling of the target webpage based on the original page size and the canvas size upper limit of the target webpage:
if the page area is larger than the upper area limit, determining that the scaling of the target webpage is the ratio of the upper area limit to the page area;
if the page area is not greater than the area upper limit, the scaling of the target webpage is obtained based on the page length and page width of the target webpage, and the length upper limit and the width upper limit.
In one possible implementation, when obtaining the scaling of the target web page based on the page length and page width of the target web page, and the upper length and width limits, the computing module 1602 is configured to:
if the page length is not greater than the length upper limit and the page width is greater than the width upper limit, determining the scaling ratio as: the ratio of the upper width limit to the page width;
if the page length is greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: the ratio of the upper length limit to the page length;
if the page length is not greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling ratio as: 1.
in one possible implementation, before drawing each webpage element in the target webpage into the target canvas, respectively, based on the scaling, the drawing module 1603 is further configured to:
Traversing nodes corresponding to all webpage elements in the target webpage in a node tree generated based on source codes corresponding to the target webpage, wherein in the traversing process, the following operations are executed:
when one node is a Document Object Model (DOM) node, acquiring and storing node content and node attribute of the DOM node, wherein the node attribute of the DOM node at least comprises: the position, width and height of DOM nodes and background color;
when one node is a canvas node, converting the webpage element corresponding to the canvas node into a picture in a character string format and storing, wherein the webpage element corresponding to the canvas node is drawn on other canvases except the target canvas provided by the target browser.
In one possible implementation, when drawing each webpage element in the target webpage into the target canvas based on the scaling, the drawing module 1603 is configured to:
for each traversed webpage element, the following operations are respectively executed:
if the node corresponding to one webpage element is a DOM node and the scaling ratio is 1, drawing the one webpage element into the target canvas based on the node content of the DOM node and the original pixel bit corresponding to the node attribute;
If the node corresponding to one webpage element is a DOM node and the scaling ratio is not 1, scaling is performed on the node content of the DOM node and the original pixel bit corresponding to the node attribute based on the scaling ratio, and the scaled corresponding one webpage element is drawn into the target canvas;
if the node corresponding to one webpage element is a canvas node and the scaling ratio is 1, drawing a picture in a character string format corresponding to one webpage element into a target canvas;
if the node corresponding to one webpage element is a canvas node and the scaling ratio is not 1, adjusting the pixel density for the picture in the character string format corresponding to one webpage element based on the scaling ratio, and drawing the picture in the character string format after adjustment into a target canvas.
In one possible implementation, after drawing each webpage element in the target webpage into the target canvas based on the scaling, the drawing module 1603 is further configured to:
and adding target watermark data in the target canvas based on the watermark adding requirement of the target object for the target webpage.
In one possible implementation, the web page elements include at least one or any combination of the following:
A text element;
an image element;
a form element;
an audio element;
video elements.
Having described the web page exporting method and apparatus of an exemplary embodiment of the present application, next, a computing device according to another exemplary embodiment of the present application is described.
Those skilled in the art will appreciate that the various aspects of the application may be implemented as a system, method, or program product. Accordingly, aspects of the application may be embodied in the following forms, namely: an entirely hardware embodiment, an entirely software embodiment (including firmware, micro-code, etc.) or an embodiment combining hardware and software aspects may be referred to herein as a "circuit," module "or" system.
Based on the same inventive concept as the above-described method embodiments, a computing device 1700 is also provided in an embodiment of the present application. In one embodiment, the computing device may be a server, such as server 120 shown in FIG. 1. In this embodiment, the computing device may include at least a memory 1701, a communication module 1703, and at least one processor 1702 as shown in FIG. 17.
A memory 1701 for storing computer programs for execution by the processor 1702. The memory 1701 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, a program required for running an instant messaging function, and the like; the storage data area can store various instant messaging information, operation instruction sets and the like.
The memory 1701 may be a volatile memory (RAM) such as a random-access memory (RAM); the memory 1701 may also be a nonvolatile memory (non-volatile memory), such as a read-only memory, a flash memory (flash memory), a hard disk (HDD) or a Solid State Drive (SSD); or any other medium that can be used to carry or store a desired computer program in the form of instructions or data structures and that can be accessed by a computer, without limitation. The memory 1701 may be a combination of the above.
The processor 1702 may include one or more central processing units (central processing unit, CPU) or digital processing units, or the like. Processor 1702 is configured to implement the above-described web page exporting method when calling a computer program stored in memory 1701.
The communication module 1703 is used for communicating with a terminal device and other servers.
The specific connection medium between the memory 1701, the communication module 1703 and the processor 1702 is not limited to the above embodiments of the present application. The embodiment of the present application is illustrated in fig. 17 by a bus 1704 between the memory 1701 and the processor 1702, and the bus 1704 is illustrated in fig. 17 by a bold line, and the connection between other components is merely illustrative and not limiting. The bus 1704 may be classified as an address bus, a data bus, a control bus, or the like. For ease of description, only one thick line is depicted in fig. 17, but only one bus or one type of bus is not depicted.
The memory 1701 stores a computer storage medium in which computer-executable instructions for implementing the web page exporting method according to the embodiment of the present application are stored. The processor 1702 is configured to perform the web page exporting method described above.
In another embodiment, the computing device may also be other computing devices, such as terminal device 110 shown in FIG. 1. In this embodiment, the structure of the computing device may be as shown in fig. 18, including: communication component 1810, memory 1820, display unit 1830, camera 1840, sensor 1850, audio circuitry 1860, bluetooth module 1870, processor 1880, and the like.
The communication component 1810 is for communicating with a server. In some embodiments, a circuit wireless fidelity (Wireless Fidelity, wiFi) module may be included, where the WiFi module belongs to a short-range wireless transmission technology, and the electronic device may help the object to send and receive information through the WiFi module.
Memory 1820 may be used for storing software programs and data. The processor 1880 performs various functions and data processing of the terminal device 110 by executing software programs or data stored in the memory 1820. Memory 1820 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other volatile solid-state storage device. The memory 1820 stores an operating system that enables the terminal device 110 to operate. The memory 1820 may store an operating system and various application programs, and may also store computer programs that implement the web page exporting methods of embodiments of the present application.
The display unit 1830 may also be used to display information input by an object or information provided to the object and a graphical user interface (graphical user interface, GUI) of various menus of the terminal device 110. In particular, the display unit 1830 may include a display screen 1832 disposed on a front surface of the terminal device 110. The display 1832 may be configured in the form of a liquid crystal display, light emitting diodes, or the like. The display unit 1830 may be used to display a game simulation game play interface and the like in the embodiment of the present application.
The display unit 1830 may also be used to receive input numeric or character information, generate signal inputs related to object settings and function control of the terminal device 110, and in particular, the display unit 1830 may include a touch screen 1831 provided on the front of the terminal device 110, and may collect touch operations on or near the object, such as clicking buttons, dragging scroll boxes, and the like.
The touch screen 1831 may be covered on the display screen 1832, or the touch screen 1831 may be integrated with the display screen 1832 to implement input and output functions of the terminal device 110, and after integration, the touch screen may be abbreviated as touch screen. The display unit 1830 may display an application program and corresponding operation steps in the present application.
The camera 1840 may be used to capture still images and the subject may post the images captured by the camera 1840 through the application. The camera 1840 may be one or more. The object generates an optical image through the lens and projects the optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (charge coupled device, CCD) or a Complementary Metal Oxide Semiconductor (CMOS) phototransistor. The photosensitive elements convert the optical signals to electrical signals, which are then passed to a processor 1880 for conversion to digital image signals.
The terminal device may further comprise at least one sensor 1850, such as an acceleration sensor 1851, a distance sensor 1852, a fingerprint sensor 1853, a temperature sensor 1854. The terminal device may also be configured with other sensors such as gyroscopes, barometers, hygrometers, thermometers, infrared sensors, light sensors, motion sensors, and the like.
Audio circuitry 1860, speaker 1861, microphone 1862 may provide an audio interface between the object and terminal device 110. The audio circuit 1860 may transmit the received electrical signal converted from audio data to the speaker 1861, and may be converted into a sound signal by the speaker 1861 for output. The terminal device 110 may also be configured with a volume button for adjusting the volume of the sound signal. On the other hand, microphone 1862 converts the collected sound signals into electrical signals, which are received by audio circuit 1860 and converted into audio data, which are output to communication component 1810 for transmission to, for example, another terminal device, or to memory 1820 for further processing.
The bluetooth module 1820 is configured to interact with other bluetooth devices having bluetooth modules via a bluetooth protocol. For example, the terminal device may establish a bluetooth connection with a wearable electronic device (e.g., a smart watch) that also has a bluetooth module through the bluetooth module 1820, thereby performing data interaction.
The processor 1880 is a control center of the terminal device, connects various parts of the entire terminal using various interfaces and lines, and performs various functions of the terminal device and processes data by running or executing software programs stored in the memory 1820, and calling data stored in the memory 1820. In some embodiments, the processor 1880 may include one or more processing units; the processor 1880 may also integrate an application processor that primarily processes operating systems, user interfaces, applications, etc., and a baseband processor that primarily processes wireless communications. It will be appreciated that the baseband processor described above may not be integrated into the processor 1880. The processor 1880 of the present application may run an operating system, applications, user interface displays and touch responses, as well as web page exporting methods of embodiments of the present application. In addition, the processor 1880 is coupled to a display unit 1830.
It should be noted that, in the specific embodiment of the present application, the object data related to the web page export and the like is referred to, and when the above embodiments of the present application are applied to specific products or technologies, the object permission or consent needs to be obtained, and the collection, use and processing of the related data need to comply with the related laws and regulations and standards of the related countries and regions.
In some possible embodiments, aspects of the web page exporting method provided by the present application may also be implemented in the form of a program product comprising a computer program for causing a computing device to perform the steps of the web page exporting method according to various exemplary embodiments of the present application as described herein when the program product is run on the computing device.
The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium would include the following: an electrical connection having one or more wires, a portable disk, a hard disk, random Access Memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The program product of embodiments of the present application may take the form of a portable compact disc read only memory (CD-ROM) and comprise a computer program and may be run on an electronic device. However, the program product of the present application is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with a command execution system, apparatus, or device.
The readable signal medium may comprise a data signal propagated in baseband or as part of a carrier wave in which a readable computer program is embodied. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A readable signal medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with a command execution system, apparatus, or device.
A computer program embodied on a readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer programs for performing the operations of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C++ or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer program may execute entirely on the user's computing device, partly on the user's computing device, as a stand-alone software package, partly on the user's computing device, partly on a remote computing device, or entirely on the remote computing device. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., connected via the Internet using an Internet service provider).
It should be noted that although several units or sub-units of the apparatus are mentioned in the above detailed description, such a division is merely exemplary and not mandatory. Indeed, the features and functions of two or more of the elements described above may be embodied in one element in accordance with embodiments of the present application. Conversely, the features and functions of one unit described above may be further divided into a plurality of units to be embodied.
Furthermore, although the operations of the methods of the present application are depicted in the drawings in a particular order, this is not required to either imply that the operations must be performed in that particular order or that all of the illustrated operations be performed to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step to perform, and/or one step decomposed into multiple steps to perform.
It will be apparent to those skilled in the art that various modifications and variations can be made to the present application without departing from the spirit or scope of the application. Thus, it is intended that the present application also include such modifications and alterations insofar as they come within the scope of the appended claims or the equivalents thereof.
Claims (11)
1. A method of web page exporting, comprising:
acquiring an original page size of a target webpage, and acquiring an upper limit of a canvas size of a target browser, wherein the target browser is used for presenting the target webpage;
obtaining the scaling of the target webpage based on the original webpage size of the target webpage and the canvas size upper limit;
drawing each webpage element in the target webpage into a target canvas based on the scaling, wherein the target canvas is obtained based on the target browser call;
And obtaining a page picture corresponding to the target webpage based on the drawn target canvas.
2. The method of claim 1, wherein the original page size comprises: page length, page width, and page area; the canvas upper size limit comprises: an upper length limit, an upper width limit, and an upper area limit;
obtaining the scaling of the target webpage based on the original page size of the target webpage and the canvas size upper limit, including:
if the page area is larger than the area upper limit, determining that the scaling of the target webpage is the ratio of the area upper limit to the page area;
and if the page area is not greater than the area upper limit, obtaining the scaling of the target webpage based on the page length and the page width of the target webpage and the length upper limit and the width upper limit.
3. The method of claim 2, wherein the obtaining the scaling of the target web page based on the page length and page width of the target web page, and the length and width upper limits, comprises:
if the page length is not greater than the length upper limit and the page width is greater than the width upper limit, determining the scaling as: a ratio of the upper width limit to the page width;
If the page length is greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling as: a ratio of the upper length limit to the page length;
if the page length is not greater than the length upper limit and the page width is not greater than the width upper limit, determining the scaling as: 1.
4. the method of any of claims 1-3, wherein prior to drawing each webpage element in the target webpage into a target canvas based on the scaling, respectively, further comprising:
traversing nodes corresponding to all webpage elements in the target webpage in a node tree generated based on source codes corresponding to the target webpage, wherein in the traversing process, the following operations are executed:
when one node is a Document Object Model (DOM) node, acquiring and storing node content and node attributes of the DOM node, wherein the node attributes of the DOM node at least comprise: the position, width and height of DOM nodes and background color;
when one node is a canvas node, converting the webpage element corresponding to the canvas node into a picture in a character string format and storing, wherein the webpage element corresponding to the canvas node is drawn on other canvases except the target canvas provided by the target browser.
5. The method of claim 4, wherein the drawing each webpage element in the target webpage into a target canvas based on the scaling, respectively, comprises:
for each traversed webpage element, the following operations are respectively executed:
if the node corresponding to one webpage element is a DOM node and the scaling ratio is 1, drawing the one webpage element into the target canvas based on the node content of the DOM node and the original pixel bit corresponding to the node attribute;
if the node corresponding to one webpage element is a DOM node and the scaling ratio is not 1, scaling is performed on the node content of the DOM node and the original pixel bit corresponding to the node attribute based on the scaling ratio, and the scaled corresponding one webpage element is drawn into the target canvas;
if the node corresponding to one webpage element is a canvas node and the scaling ratio is 1, drawing a picture in a character string format corresponding to the one webpage element into the target canvas;
and if the node corresponding to one webpage element is a canvas node and the scaling ratio is not 1, adjusting pixel density aiming at the picture in the character string format corresponding to the one webpage element based on the scaling ratio, and drawing the picture in the character string format after adjustment into the target canvas.
6. The method of any of claims 1-3, wherein after drawing each webpage element in the target webpage into a target canvas based on the scaling, respectively, further comprising:
and adding target watermark data in the target canvas based on the watermark adding requirement of the target object for the target webpage.
7. A method as claimed in any one of claims 1 to 3, wherein the web page elements comprise at least one or any combination of the following:
a text element;
an image element;
a form element;
an audio element;
video elements.
8. A web page exporting apparatus, comprising:
the acquisition module is used for acquiring the original page size of the target webpage and acquiring the canvas size upper limit of a target browser, wherein the target browser is used for presenting the target webpage;
the calculation module is used for obtaining the scaling of the target webpage based on the original webpage size of the target webpage and the upper limit of the canvas size;
the drawing module is used for drawing each webpage element in the target webpage into a target canvas based on the scaling;
and the export module is used for obtaining the page picture corresponding to the target webpage based on the drawn target canvas.
9. A computing device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of any of claims 1-7 when executing the computer program.
10. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method according to any of claims 1-7.
11. A computer program product, characterized in that the computer program product, when called by a computer, causes the computer to perform the method according to any of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311322555.3A CN117076811A (en) | 2023-10-13 | 2023-10-13 | Webpage export method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311322555.3A CN117076811A (en) | 2023-10-13 | 2023-10-13 | Webpage export method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117076811A true CN117076811A (en) | 2023-11-17 |
Family
ID=88702797
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311322555.3A Pending CN117076811A (en) | 2023-10-13 | 2023-10-13 | Webpage export method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117076811A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117557682A (en) * | 2024-01-09 | 2024-02-13 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus, product, device, and medium |
| CN117557682B (en) * | 2024-01-09 | 2024-04-19 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus, product, device, and medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107885848A (en) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | Web page screen-cutting method based on web technology |
| CN110516177A (en) * | 2019-07-11 | 2019-11-29 | 平安普惠企业管理有限公司 | Page zoom-in and zoom-out method, apparatus, equipment and computer readable storage medium |
| CN111694493A (en) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | Webpage screenshot method, computer equipment and readable storage medium |
| CN111897776A (en) * | 2020-06-22 | 2020-11-06 | 百望股份有限公司 | OFD document processing method, electronic device and computer-readable storage medium |
| CN112784202A (en) * | 2021-02-03 | 2021-05-11 | 中国电子科技集团公司第二十八研究所 | Method for improving definition of webpage screenshot based on WEB technology |
| CN114969611A (en) * | 2022-06-30 | 2022-08-30 | 中国工商银行股份有限公司 | Webpage printing method, device, equipment and medium |
| CN115543238A (en) * | 2022-11-29 | 2022-12-30 | 明度智云(浙江)科技有限公司 | Browser page printing method, device, equipment and storage medium |
| CN116206012A (en) * | 2021-11-30 | 2023-06-02 | 华为云计算技术有限公司 | Element layout method and related equipment |
-
2023
- 2023-10-13 CN CN202311322555.3A patent/CN117076811A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107885848A (en) * | 2017-11-10 | 2018-04-06 | 杭州美创科技有限公司 | Web page screen-cutting method based on web technology |
| CN110516177A (en) * | 2019-07-11 | 2019-11-29 | 平安普惠企业管理有限公司 | Page zoom-in and zoom-out method, apparatus, equipment and computer readable storage medium |
| CN111694493A (en) * | 2020-06-08 | 2020-09-22 | 杭州有赞科技有限公司 | Webpage screenshot method, computer equipment and readable storage medium |
| CN111897776A (en) * | 2020-06-22 | 2020-11-06 | 百望股份有限公司 | OFD document processing method, electronic device and computer-readable storage medium |
| CN112784202A (en) * | 2021-02-03 | 2021-05-11 | 中国电子科技集团公司第二十八研究所 | Method for improving definition of webpage screenshot based on WEB technology |
| CN116206012A (en) * | 2021-11-30 | 2023-06-02 | 华为云计算技术有限公司 | Element layout method and related equipment |
| CN114969611A (en) * | 2022-06-30 | 2022-08-30 | 中国工商银行股份有限公司 | Webpage printing method, device, equipment and medium |
| CN115543238A (en) * | 2022-11-29 | 2022-12-30 | 明度智云(浙江)科技有限公司 | Browser page printing method, device, equipment and storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117557682A (en) * | 2024-01-09 | 2024-02-13 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus, product, device, and medium |
| CN117557682B (en) * | 2024-01-09 | 2024-04-19 | 腾讯科技（深圳）有限公司 | Data processing method, apparatus, product, device, and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11907642B2 (en) | Enhanced links in curation and collaboration applications | |
| US9971740B2 (en) | Dynamic webpage image | |
| US10564920B2 (en) | Dynamic server-side image sizing for fidelity improvements | |
| US11386933B2 (en) | Image information processing method and apparatus, and storage medium | |
| CN107274884B (en) | Information acquisition method based on text analysis and voice synthesis | |
| TWI590157B (en) | Compressed serialization of data for communication from a client-side application | |
| CN103365862B (en) | It is a kind of for generating the method and apparatus of picture corresponding with the page | |
| WO2021179882A1 (en) | Image drawing method and apparatus, readable medium, and electronic device | |
| US20150089348A1 (en) | System and method for web page background image delivery | |
| JP2011018314A (en) | Method, system and computer program for sharing web page | |
| CN105518614A (en) | Screencasting for multi-screen applications | |
| CN111580879A (en) | Applet running method and device, electronic equipment and computer storage medium | |
| KR101903142B1 (en) | Methods, systems, and media for remote rendering of web content on a television device | |
| CN110609965B (en) | Page display method, device and storage medium | |
| WO2022144016A1 (en) | Application program control method and apparatus, electronic device, and storage medium | |
| CN112328353B (en) | Display method and device of sub-application player, electronic equipment and storage medium | |
| BR112021009629A2 (en) | method of processing user interface content, system, and non-transient computer readable media | |
| WO2019227429A1 (en) | Method, device, apparatus, terminal, server for generating multimedia content | |
| CN111596998A (en) | Page processing method of ink screen and terminal | |
| WO2022048141A9 (en) | Image processing method and apparatus, and computer readable storage medium | |
| WO2014086195A1 (en) | Video processing method, mobile terminal and server | |
| US11758016B2 (en) | Hosted application as web widget toolkit | |
| CN117076811A (en) | Webpage export method, device, equipment and storage medium | |
| CN113542335A (en) | Information sharing method and device, electronic equipment and storage medium | |
| CN108462902A (en) | A kind of media file read method and device, multimedia play system |
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 |