Web page copying method, device and equipment
By obtaining and adjusting the storage path and style of multimedia resources in web pages, the problems of missing content and incomplete styles during web page replication are solved, and comprehensive and accurate copying of web pages is achieved.
Patent Information
- Application Number
- CN202210707295.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-06-21
- Publication Date
- 2024-12-20
- Estimated Expiration
- 2042-06-21
AI Technical Summary
In the prior art, multimedia resources and styles cannot be completely copied when copying web pages, resulting in missing content and incomplete styles, and the comprehensiveness and accuracy of web page copying cannot be guaranteed.
By determining the selected area and target node type in the web page, obtain the complete storage path of the multimedia resource, and adjust it according to the node style, update the target node to ensure complete replication of the multimedia resource and style.
It realizes complete replication of multimedia resources and styles, avoids the problems of missing content and incomplete styles, and improves the comprehensiveness and accuracy of web page replication.
Smart Images

Figure CN114935999B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of Internet technology, and in particular to a web page copying method, device and equipment. Background Art
[0002] With the continuous development of Internet technology, more and more users browse web pages through browsers. A web page is usually generated and rendered based on technologies such as Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript, and can be directly opened and displayed in a browser.
[0003] In the related art, when copying the content on a web page, only the text content can be copied, and the multimedia resources (pictures, videos, audio, etc.) in the page cannot be copied, and the style of the web page cannot be completely copied, resulting in incomplete style and missing content when the web page is copied, and the comprehensiveness and accuracy of the web page copy cannot be guaranteed. Summary of the invention
[0004] The present application provides a web page copying method, device and equipment, which avoids the problems of incomplete style and missing content when copying a web page in the prior art, and ensures the comprehensiveness and accuracy of the web page copy.
[0005] In a first aspect, an embodiment of the present application provides a web page copying method, comprising:
[0006] Determine a selected area in a first webpage, and obtain a first target node in the selected area;
[0007] Determine a node type and a first node style corresponding to each of the first target nodes;
[0008] If the node type corresponding to the first target node is a multimedia resource, determining a complete storage path of the multimedia resource;
[0009] According to the style type in the first node style, the first node style is adjusted to obtain a second node style;
[0010] According to the complete storage path and the second node style, the first target node is updated to obtain a second target node, and the second target node is copied to a target storage area.
[0011] In a possible implementation, if the node type corresponding to the first target node is a multimedia resource, determining the complete storage path of the multimedia resource includes:
[0012] Acquire a relative path corresponding to the multimedia resource; the relative path is a storage path of the multimedia resource relative to the first webpage;
[0013] Based on the relative path, a complete storage path of the multimedia resource is determined.
[0014] In a possible implementation manner, determining the complete storage path of the multimedia resource based on the relative path includes:
[0015] Displaying a file list corresponding to all multimedia resources in the selected area according to the relative path of the multimedia resources;
[0016] receiving a download instruction, wherein the download instruction corresponds to at least one multimedia resource;
[0017] In response to the download instruction, the multimedia resource corresponding to the download instruction is stored in a preset storage area, and the storage path of the multimedia resource in the preset storage area is determined as the complete storage path.
[0018] In a possible implementation manner, determining the complete storage path of the multimedia resource based on the relative path includes:
[0019] Based on the URL of the first webpage and the relative path, obtaining the absolute path of the multimedia resource;
[0020] The absolute path of the multimedia resource is set as the complete storage path.
[0021] In a possible implementation manner, obtaining the first target node in the selected area includes:
[0022] Get the first target parent node in the selected area;
[0023] Traverse the first target parent node and obtain the first target child node in each of the first target parent nodes;
[0024] The first target parent node and the first target child node are determined as the first target node.
[0025] In a possible implementation, adjusting the first node style according to the style type in the first node style to obtain the second node style includes:
[0026] Determining the candidate style type in the first node style;
[0027] According to a preset rule, the candidate style type is adjusted to obtain a target style type;
[0028] The target style types are concatenated to obtain a second node style.
[0029] In a possible implementation, adjusting the candidate style type according to the preset rule includes:
[0030] If the candidate style type is included in the preset style blacklist, deleting the candidate style type; and / or,
[0031] If the candidate style type is a default style, deleting the candidate style type; and / or,
[0032] If the candidate style type is a style that cannot be recognized and displayed by the browser, the candidate style type is replaced with the target style type that can be normally recognized and displayed by the browser.
[0033] In a possible implementation, updating the first target node according to the complete storage path and the second node style to obtain the second target node includes:
[0034] Create a blank node, and copy the first target node to the blank node to obtain an intermediate node;
[0035] The path of the multimedia resource in the intermediate node is modified to the complete storage path, and the style of the intermediate node is set to the second node style, so as to obtain the second target node.
[0036] In a possible implementation, the method further includes:
[0037] If the node type of the first target node is a vector graphic, converting the vector graphic into a canvas graphic;
[0038] According to the canvas graphic, obtaining an image file corresponding to the canvas graphic;
[0039] In the first target node, the vector graphic is replaced by the image file.
[0040] In a possible implementation, the method further includes:
[0041] If the node type of the first target node is a canvas graphic, obtaining the style of the canvas graphic;
[0042] Converting the canvas graphic into an image, and setting the image to the style of the canvas graphic to obtain an image file;
[0043] In the first target node, the canvas graphic is replaced with the image file.
[0044] In a possible implementation, the method further includes:
[0045] Receive editing instructions;
[0046] In response to the editing instruction, the first webpage is set to an editing state and a preset editing tool is displayed.
[0047] In a second aspect, an embodiment of the present application provides a web page copying device, comprising: a first determination module, a second determination module, a third determination module, an adjustment module, and a copying module, wherein:
[0048] The first determination module is used to determine a selected area in the first webpage and obtain a first target node in the selected area;
[0049] The second determination module is used to determine the node type and the first node style corresponding to each of the first target nodes;
[0050] The third determination module is used to determine the complete storage path of the multimedia resource if the node type corresponding to the first target node is a multimedia resource;
[0051] The adjustment module is used to adjust the first node style according to the style type in the first node style to obtain a second node style;
[0052] The copy module is used to update the first target node according to the complete storage path and the second node style, obtain the second target node, and copy the second target node to the target storage area.
[0053] In a possible implementation, the third determination module includes an acquisition submodule and a determination submodule, wherein:
[0054] The acquisition submodule is used to acquire the relative path corresponding to the multimedia resource; the relative path is the storage path of the multimedia resource relative to the first webpage;
[0055] The determination submodule is used to determine the complete storage path of the multimedia resource based on the relative path.
[0056] In a possible implementation manner, the determining submodule is specifically used to:
[0057] Displaying a file list corresponding to all multimedia resources in the selected area according to the relative path of the multimedia resources;
[0058] receiving a download instruction, wherein the download instruction corresponds to at least one multimedia resource;
[0059] In response to the download instruction, the multimedia resource corresponding to the download instruction is stored in a preset storage area, and the storage path of the multimedia resource in the preset storage area is determined as the complete storage path.
[0060] In a possible implementation manner, the determining submodule is specifically used to:
[0061] Based on the URL of the first webpage and the relative path, obtaining the absolute path of the multimedia resource;
[0062] The absolute path of the multimedia resource is set as the complete storage path.
[0063] In a possible implementation manner, the first determining module is specifically configured to:
[0064] Get the first target parent node in the selected area;
[0065] Traverse the first target parent node and obtain the first target child node in each of the first target parent nodes;
[0066] The first target parent node and the first target child node are determined as the first target node.
[0067] In a possible implementation manner, the adjustment module is specifically configured to:
[0068] Determining the candidate style type in the first node style;
[0069] According to a preset rule, the candidate style type is adjusted to obtain a target style type;
[0070] The target style types are concatenated to obtain a second node style.
[0071] In a possible implementation manner, the adjustment module is further specifically configured to:
[0072] If the candidate style type is included in the preset style blacklist, deleting the candidate style type; and / or,
[0073] If the candidate style type is a default style, deleting the candidate style type; and / or,
[0074] If the candidate style type is a style that cannot be recognized and displayed by the browser, the candidate style type is replaced with the target style type that can be normally recognized and displayed by the browser.
[0075] In a possible implementation manner, the copy module is specifically used to:
[0076] Create a blank node, and copy the first target node to the blank node to obtain an intermediate node;
[0077] The path of the multimedia resource in the intermediate node is modified to the complete storage path, and the style of the intermediate node is set to the second node style, so as to obtain the second target node.
[0078] In a possible implementation manner, the device is further used for:
[0079] If the node type of the first target node is a vector graphic, converting the vector graphic into a canvas graphic;
[0080] According to the canvas graphic, obtaining an image file corresponding to the canvas graphic;
[0081] In the first target node, the vector graphic is replaced by the image file.
[0082] In a possible implementation manner, the device is further used for:
[0083] If the node type of the first target node is a canvas graphic, obtaining the style of the canvas graphic;
[0084] Converting the canvas graphic into an image, and setting the image to the style of the canvas graphic to obtain an image file;
[0085] In the first target node, the canvas graphic is replaced with the image file.
[0086] In a possible implementation manner, the device is further used for:
[0087] Receive editing instructions;
[0088] In response to the editing instruction, the first webpage is set to an editing state and a preset editing tool is displayed.
[0089] In a third aspect, an embodiment of the present application provides a device, including: a processor and a memory;
[0090] The memory stores computer-executable instructions;
[0091] The processor executes the computer-executable instructions stored in the memory, so that the processor performs the method as described in any one of the first aspects.
[0092] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by a processor, they are used to implement the method described in any one of the first aspects.
[0093] In a fifth aspect, an embodiment of the present application provides a computer program product, including a computer program, which, when executed by a processor, implements the method described in any one of the first aspects.
[0094] The web page copying method, device and equipment provided by the embodiment of the present application determine the selected area in the first web page, and obtain the first target node in the selected area; determine the node type and the first node style corresponding to each first target node; if the node type corresponding to the first target node is a multimedia resource, determine the complete storage path of the multimedia resource; adjust the first node style according to the style type in the first node style to obtain the second node style; update the first target node according to the complete storage path and the second node style to obtain the second target node, and copy the second target node to the target storage area. In this way, the present application can ensure the comprehensive copying of multimedia resources such as images by obtaining the complete storage path of the multimedia resources, and can also ensure the integrity of the node style, avoiding the problems of missing content and incomplete style when copying web pages, and improving the comprehensiveness and accuracy of web page copying. BRIEF DESCRIPTION OF THE DRAWINGS
[0095] Figure 1 A schematic diagram of an application scenario provided for an embodiment of the present application;
[0096] Figure 2 A schematic diagram of a flow chart of a web page copying method provided in an embodiment of the present application;
[0097] Figure 3 A flowchart of another web page copying method provided in an embodiment of the present application;
[0098] Figure 4 A schematic diagram of the execution logic of a web page copying method provided in an embodiment of the present application;
[0099] Figure 5 A schematic diagram of the structure of a web page copying device provided in an embodiment of the present application;
[0100] Figure 6 A schematic diagram of the structure of a web page copying device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0101] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.
[0102] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or device including the element.
[0103] Figure 1 This is a schematic diagram of an application scenario provided by the embodiment of this application. Figure 1 , including a browser web page 101, a clipboard (or pasteboard) 102 and an editor 103. The browser and the editor 103 can be installed on a terminal device, which can be a mobile terminal, a computer, etc., which is not limited in the embodiment of the present application.
[0104] The browser web page 101 may refer to a page directly displayed in the browser. Usually, the normal rendering and display of a complete web page needs to rely on HTML files, CSS files and JavaScript files, which correspond to structural content, display style and dynamic scripts respectively. Among them, the structural content HTML may include text and various multimedia resources, and the multimedia resources may refer to images, audio, video, etc. The display style CSS may refer to the style of content such as text and pictures, such as position, size, color, etc. The dynamic script JavaScript may refer to a simple animation composed of static images, etc., and the dynamic script may not be included in the static browser page.
[0105] Editor 103 may refer to an editing tool for editing a web page or an article, and may be a rich text editor such as html2RichText, pageEdit, etc., which is not limited in the present embodiment of the application. Rich text is a text format that is what you see is what you get. After a web page is copied as rich text and pasted into a rich text editor, the rich text editor may display the web page content normally or may display part of the style of the web page.
[0106] In various scenarios where it is necessary to edit web documents such as public account articles or web logs, it is usually necessary to copy the web page. In the related art, the terminal device can perform a copy operation in the browser page 101 based on the user's copy instruction, copy the content that can be copied in the browser page to the clipboard 102, and then copy the content of the clipboard 102 to the editor 103. However, this copying method can often only copy simple texts, and cannot copy multimedia resources, nor can it completely copy the styles of various parts of the content in the web page, and it cannot render and display canvas graphics or vector graphics SVG normally. That is, in the related art, there are problems such as incomplete styles, disordered layouts, and missing content when copying web pages, and the comprehensiveness and accuracy of web page copying cannot be guaranteed.
[0107] In an embodiment of the present application, a selected area in a first web page is determined, and then each first target node in the selected area is obtained; then the node type and first node style of each first target node are determined; the first target node is processed accordingly according to the node type of the first target node, for example, when the node style of the first target node is a multimedia resource, the complete storage path of the multimedia resource is determined. Then the first node style is adaptively adjusted to obtain a second node style; then the first target node is updated based on the complete storage path and the second node style to obtain a second target node, and finally the second target node can be copied to the target storage area. In this way, the complete copying of multimedia resources and styles can be achieved, avoiding the problems of incomplete styles, disordered layouts, and missing content when copying web pages, and ensuring the comprehensiveness and accuracy of web page copying.
[0108] The scheme shown in the present application is described in detail below through specific embodiments. It should be noted that the following embodiments can exist independently or in combination with each other, and the same or similar contents will not be described repeatedly in different embodiments.
[0109] Next, combine Figure 2 The embodiment shown illustrates the process of copying a web page.
[0110] Figure 2 A schematic diagram of a web page copying method provided in an embodiment of the present application. Figure 2 , the method may include:
[0111] S201: Determine a selected area in a first web page, and obtain a first target node in the selected area.
[0112] In an embodiment of the present application, the first web page may refer to a web page to be copied. The selected area may refer to an area corresponding to a user's copy instruction. The first target node may refer to each part of the content in the first web page, and the first target node may specifically be in the form of a Document Object Model (DOM) node. Exemplarily, a picture, a text, a table, etc. in the first web page can be regarded as a first target node, and the embodiment of the present application does not limit this.
[0113] The web page copying method in the embodiment of the present application can be implemented based on a browser plug-in. The browser plug-in can be an extension software for enhancing the browser function. By loading the extension package of the browser plug-in in various browsers, users can directly use the various functions provided by the browser plug-in in the browser interface, which can replace the default copy of the browser, realize accurate and complete copying of the web page content, and also reduce the technical threshold.
[0114] Specifically, when the user needs to copy all or part of the content in the first webpage, the user can select the page area to be copied and perform the copy operation, and the copy operation can be clicking a corresponding copy control, etc. Accordingly, the browser plug-in can monitor and obtain the copy instruction corresponding to the user's copy operation in the first webpage, and determine the selected area corresponding to the copy instruction; thereafter, the browser plug-in can obtain the first target node in the selected area by node traversal, etc.
[0115] S202: Determine a node type and a first node style corresponding to each first target node.
[0116] In an embodiment of the present application, the node type may refer to a specific form of the first target node, such as text, image, audio, video, canvas graphics (canvas) or vector graphics (Scalable Vector Graphics, SVG), etc. For different node types, the browser plug-in may subsequently perform corresponding processing to ensure that the first target nodes of various node types can be completely copied when the web page is copied, avoiding the problem of missing content. The first node style may refer to a specific style corresponding to the first target node, and the first node style may include multiple style types, such as bold, italic, highlight or color, etc.
[0117] S203: If the node type corresponding to the first target node is a multimedia resource, determine a complete storage path of the multimedia resource.
[0118] In the embodiment of the present application, the multimedia resource may be an image (img), a video (video) or an audio (audio), etc. The complete storage path may refer to the path where the multimedia resource is actually stored. The complete storage path may specifically refer to the complete resource path of the multimedia resource, or may refer to the actual storage path of the multimedia resource locally, which is not limited in the embodiment of the present application.
[0119] When the browser displays the first web page, the multimedia resources therein are often obtained through a relative path. The relative path may refer to the address of the multimedia resource relative to the current first web page, usually a resource path beginning with " / ", "… / " or ". / ". Taking the multimedia resource as an image as an example, if the image and the html file are in the same directory, the relative path of ". / xxx.jpg" can be used; if the image is in the imgs folder of the same directory as the html file, the relative path of ". / imgs / xxx.jpg" can be used when the first web page references the image.
[0120] On the basis of the first web page referencing multimedia resources through a relative path, when copying the web page, the html file is directly copied to a new editor environment. At this time, relative to the copied html file, the new editor environment does not store the corresponding multimedia resources. If the reference method of the relative path is still adopted, it is obviously impossible to obtain the multimedia resources, which leads to the problem of missing multimedia resource content in the copied web page. In this step, the complete storage path of the actual storage of multimedia resources is determined, so that the complete storage path can be written to the corresponding node later to ensure that the multimedia resources can be loaded in the editor environment, avoiding the problem of missing content.
[0121] S204: Adjust the first node style according to the style type in the first node style to obtain a second node style.
[0122] In the embodiment of the present application, the style type may refer to various different styles of the first target node. The second node style may be an adjusted node style that can be normally displayed in the editor.
[0123] When the browser renders a web page, it displays the style of each first target node by loading the code in the display style CSS file. When copying a web page, if the code is directly copied and loaded and displayed in the editor, due to changes in the rendering environment and limitations on the style type, the problem of incomplete style display may occur in the editor. In this step, based on the style type of the first node style, the first node style can be adaptively adjusted, which can be specifically deleted, modified or replaced, etc., to obtain a second node style that can be displayed normally in the editor, thereby avoiding the problem of incomplete style display when copying a web page.
[0124] S205. Update the first target node according to the complete storage path and the second node style to obtain the second target node, and copy the second target node to the target storage area.
[0125] In an embodiment of the present application, the second target node may refer to a node obtained after adjustment and update based on the first target node and can be fully displayed after copying. The target storage area may refer to a storage area such as a clipboard for storing user content to be copied. After determining the complete storage path of the multimedia resource and updating the first node style to obtain the second node style, the browser plug-in can assign the complete storage path and the second node style to the corresponding attributes of the first target node to obtain the second target node, and then copy all the second target nodes to the clipboard. In this way, the user can copy the second target node to other editors based on their own needs and perform subsequent editing operations.
[0126] The web page copying method provided by the embodiment of the present application determines the selected area in the first web page and obtains the first target node in the selected area; determines the node type and the first node style corresponding to each first target node; if the node type corresponding to the first target node is a multimedia resource, determines the complete storage path of the multimedia resource; according to the style type in the first node style, adjusts the first node style to obtain the second node style; according to the complete storage path and the second node style, updates the first target node to obtain the second target node, and copies the second target node to the target storage area. In this way, the present application can ensure the comprehensive copying of web pages including multimedia resources such as images by obtaining the complete storage path of the multimedia resources and obtaining the second node style based on the first node style, and can also ensure the integrity of the node style, avoiding the problems of missing content and incomplete style when copying web pages, and improving the comprehensiveness and accuracy of web page copying.
[0127] Based on any of the above embodiments, Figure 3 The embodiment shown describes in detail the process of web page copying.
[0128] Figure 3 A flowchart of another web page copying method provided in an embodiment of the present application. Figure 3 , the method may include:
[0129] S301, receiving an editing instruction; in response to the editing instruction, setting a first webpage to an editing state and displaying a preset editing tool.
[0130] In an embodiment of the present application, an editing instruction may refer to an operation instruction for editing a page triggered by a user in a first web page of a browser. The editing state may refer to an editing mode of the first web page, in which a user may add, delete, insert, replace, and perform other operations on text, or may modify multimedia resources such as pictures. The preset editing tool may refer to various controls that can quickly edit the content of a page, such as font settings, font size settings, color settings, and the like. The specific type of the preset editing tool may be set based on actual needs, and the embodiment of the present application does not limit this.
[0131] In an embodiment of the present application, when the browser plug-in is configured to the browser, the browser plug-in can realize its various functions by configuring the application programming interface, modules, etc. required by the plug-in in the browser's plug-in root directory, i.e., the metadata file (meta.json file). Specifically, it may include content scripts, background scripts, and preset pop-ups, etc. Among them, the content script (contentscript.js) can inject various scripts and CSS styles into the browser page, and can also access each DOM node of the browser page. Subsequent node replication, style adjustment, and node processing can all be implemented based on the content script. The background script (background.js) can be a background page that is always resident, and its life cycle is the longest among all types of pages in the plug-in. It can be opened with the opening of the browser and closed with the closing of the browser. The background page can be used to process related operations of cross-browser web pages. The preset pop-up window (popul.html) can be used as a pop-up window page in the first web page to facilitate the user's interactive operation, and can provide operation controls (buttons) including opening page editing, multimedia resource downloading, and web pages.
[0132] For copying the content of a browser web page, non-professional technicians can only perform simple copying by default when performing the copy operation, and cannot change or adjust the content according to their own needs, and the flexibility of web page copying is poor. In an embodiment of the present application, the browser plug-in can display the corresponding editing control in the first web page in the form of a preset pop-up window, such as an "open edit" button. When a user triggers the editing control, the preset pop-up window can send an event of type open-editmode to the content script contentscript.js, and the content script can set the editing attribute of the default html root node to 1, that is, set the contenteditable attribute to true, thereby realizing the setting of the editing state of the first web page.
[0133] S302: Determine a selected area in the first web page, and obtain a first target parent node in the selected area.
[0134] In an embodiment of the present application, after the preset pop-up window sends the corresponding event, the content script in the browser plug-in can call the relevant application programming interface (Application Programming Interface, API) to perform the corresponding operation. In this step, the browser plug-in can obtain the nodes in the selected area through the API related to range and node selection provided by the browser, which can be specifically getSelection and getRangeAt. The getSelection can return the page range selected by the user, and getRangeAt can return the range object. Based on these range selection APIs, the browser plug-in can obtain the common ancestor node (commonAncestorContainer) of the user selected area, that is, each first target parent node.
[0135] S303, traverse the first target parent node, obtain the first target child node in each first target parent node; determine the first target parent node and the first target child node as the first target node.
[0136] In the embodiment of the present application, after obtaining the first target parent node of the selected area, the first target parent node can be traversed to obtain all the first target child nodes therein, and finally the first target parent node and the first target child node are used as the first target node. The traversal method can be a breadth traversal, that is, traversing all nodes associated with the current node. In this way, the comprehensiveness of the determination of the first target node can be guaranteed to avoid content loss.
[0137] For example, suppose there is a table in the first webpage, and there are many pictures and texts in the table. When the selected area selected by the user includes the table, the browser plug-in can call the relevant API interface to obtain the first target parent node, that is, the table, and then obtain the first target child nodes included in the first target parent node, that is, the pictures and texts in the table.
[0138] S304: Determine the node type and the first node style corresponding to each first target node.
[0139] In the embodiment of the present application, the node type can be determined by the relevant attributes of the first target node. When the browser plug-in determines that the first target node contains a multimedia resource attribute, namely, a src attribute, it can be determined that the node type of the first target node is a multimedia resource node. The src attribute includes images img, videos video, and audio audio, etc. The first node style can be implemented by the style acquisition method provided by the browser, namely, the window.getComputedStyle method. This method can obtain all styles of the current first target node, which is convenient for subsequent adjustment and processing.
[0140] The process of determining the node type and the first node style in this step can be implemented in the process of traversing the nodes, that is, when all the first target nodes in the selected area are obtained by traversing, the browser plug-in can determine the node type and the first node style of each first target node.
[0141] S305: If the node type corresponding to the first target node is a multimedia resource, obtain a relative path corresponding to the multimedia resource; the relative path is a storage path of the multimedia resource relative to the first webpage.
[0142] In the embodiment of the present application, the browser page can be regarded as a web page file, that is, an HTML file. The relative path is the storage address of the multimedia resource relative to the HTML file. The complete storage path of the multimedia resource can be obtained based on the relative path.
[0143] S306: Determine the complete storage path of the multimedia resource based on the relative path.
[0144] In a possible implementation, step 306 may include the following two implementations:
[0145] Implementation method 1: display a file list corresponding to all multimedia resources in the selected area according to the relative path of the multimedia resources; receive a download instruction, the download instruction corresponds to at least one multimedia resource; in response to the download instruction, store the multimedia resource corresponding to the download instruction in a preset storage area, and determine the storage path of the multimedia resource in the preset storage area as a complete storage path.
[0146] In the embodiment of the present application, the download instruction may refer to a download operation instruction of a user for one or more multimedia resources. The preset storage area may refer to a local storage area of the terminal device.
[0147] The browser plug-in can provide a control for downloading multimedia resources in a preset pop-up window displayed on the first web page. When the user needs to download multimedia resources in the first web page, he can click the multimedia resource download button in the preset pop-up window. The preset pop-up window will send the event of downloading multimedia resources to the content script. The content script can obtain all multimedia resources on the first web page based on the relative path of the multimedia resources through the multimedia resource acquisition method in jquery, such as $('img'), etc. The browser plug-in can then display the multimedia resources in the first web page in the form of a file list in the preset pop-up window. The browser plug-in receives a download instruction from the user for at least one multimedia resource, calls the browser's download interface (download api), and downloads the corresponding multimedia resource to a preset storage area. The storage path of the multimedia resource in the preset storage area is the complete storage path of the multimedia resource.
[0148] In the related art, for multimedia resources in the browser webpage, users can usually only obtain them by clicking and downloading them one by one, and can only download a single multimedia resource at a time, and cannot realize batch download of multimedia resources such as webpage pictures. In this step, the browser plug-in provides a multimedia resource download button, and the browser plug-in can obtain all multimedia resources of the current first webpage, and display all multimedia resources in the first webpage in the form of a file list, and then receive the user's download instruction. The browser plug-in can call the download interface based on at least one multimedia resource corresponding to the download instruction to realize batch download of multimedia resources, which simplifies the user's download operation and saves the user's operation time. The user can also package and compress the multimedia resources for subsequent use.
[0149] Implementation method 2: based on the URL and relative path of the first web page, obtain the absolute path of the multimedia resource; and set the absolute path of the multimedia resource as the complete storage path.
[0150] In the embodiment of the present application, the URL may refer to the access address of the first web page. The absolute path may refer to the complete storage path of the multimedia resource, that is, the complete Uniform Resource Locator (URL). In this step, the browser plug-in may call the prop method provided by jquery, such as the prop('src') method, to obtain the relative path of the multimedia resource. After that, the URL of the first web page is concatenated with the relative path of the multimedia resource to obtain the absolute path of the multimedia resource, which can be directly used as the complete storage path of the multimedia resource. Exemplarily, when the relative path of the multimedia resource is '. / img / demo.png' and the URL of the first web page is www.xxx.com, the absolute path of the multimedia resource, i.e., the complete storage address, may be 'www.xxx.com. / img / demo.png'.
[0151] In addition, when the first target node includes styles such as a background image, the browser plug-in can obtain the complete storage path of the background image of the first target node through the address acquisition method in the cascading style sheet, and subsequently the complete storage address can be reassigned to ensure normal acquisition of the background image. The address acquisition method can be css ('background-image'), etc., which is not limited in the embodiments of the present application.
[0152] In this step, the browser plug-in can quickly determine the complete storage path of the multimedia resource based on the relative path of the multimedia resource and the URL of the first web page, without downloading the multimedia resource, thereby improving the processing speed and ensuring the integrity of the multimedia resource when the web page is copied.
[0153] S307, determining candidate style types in the first node style; adjusting the candidate style types according to a preset rule to obtain a target style type; and concatenating the target style types to obtain a second node style.
[0154] In the embodiment of the present application, the alternative style type may refer to various display styles included in the first node style. The preset rule may refer to a preset adjustment method of the node style, which may be determined based on actual needs. The target style type may refer to a node style that is obtained after screening and modification based on the alternative style type and can be displayed normally in the editor.
[0155] During the rendering and display process of the first web page, the first node style in the first target node usually includes a variety of alternative style types, including inline styles, css file styles, and browser default styles. Among them, the inline style refers to the style written in the HTML tag. The browser default style refers to the style whose attribute value is normal or automatic (auto) and other default values. In addition, the first node style may also include styles that the browser cannot recognize and display. If the first node style is copied directly, on the one hand, the first node style may include hundreds or hundreds of node styles. Directly copying the web page is prone to excessive code size and slow processing speed, consuming a lot of computing resources; on the other hand, directly copying the first node style often loses some styles, resulting in the display style of the copied web page being inconsistent with the display style of the original first web page, and it is impossible to guarantee a high degree of restoration of the web page style.
[0156] In this step, the first node style can be adjusted according to the preset rules, and some alternative style types can be filtered or replaced to obtain the final target style type. Then, the target style types are spliced to obtain the second node style. Exemplarily, the second node style after splicing can be in the form of 'width:100px; height:100px'. In this way, the volume of the node style code can be reduced, computing resources can be saved, and the processing speed of web page copying can be improved. At the same time, the loss of key styles can be avoided, and the high restoration of the web page can be ensured.
[0157] In a possible implementation manner, adjusting the candidate style type in step 307 may include at least one of the following three methods:
[0158] Method 1: If the alternative style type is included in the preset style blacklist, delete the alternative style type.
[0159] In the embodiment of the present application, the preset style blacklist can be a node style pre-set by the user and used less frequently. The browser plug-in can be configured with a preset style blacklist. When the alternative style type belongs to the preset style blacklist, the alternative style type can be deleted to improve editing efficiency and reduce code size.
[0160] Method 2: If the alternative style type is the default style, delete the alternative style type.
[0161] In the embodiment of the present application, the default style may refer to the default style of the browser. Since web page copying is copying the web page from the browser environment to the editor, the editing and rendering environments have changed, and the default style of the browser may not be displayed in the editor at this time. In this way, when copying a web page, the default style of the browser can be directly deleted to avoid the problem that the default style of the browser cannot be displayed.
[0162] Method 3: If the alternative style type is a style that the browser cannot recognize and display, replace the alternative style type with the target style type that the browser can normally recognize and display.
[0163] In the embodiment of the present application, there may be alternative style types in the first node style that cannot be normally recognized by the browser, such as a camel case form similar to 'lineHeight'. In this case, the browser plug-in can convert the alternative style type that cannot be normally recognized by the browser into a target style type that can be normally recognized by the browser. For example, the replace method can be used to convert 'lineHeight' into a normally recognized short dash 'line-height' target style type, thereby avoiding the problem of incomplete display of the first node style and optimizing the screen display effect.
[0164] It should be noted that the browser plug-in can adjust the style of the first node based on one or more of the above-mentioned methods 1 to 3, and the embodiment of the present application is not limited to this.
[0165] S308. If the node type of the first target node is a canvas graphic, obtain the style of the canvas graphic; convert the canvas graphic into an image, and set the image to the style of the canvas graphic to obtain an image file; and replace the canvas graphic with the image file in the first target node.
[0166] In the embodiment of the present application, the canvas graphic may refer to a graphic drawn by a canvas tag. Canvas is a new canvas graphic added by the next generation standard of the Internet (HyperText Markup Language 5, HTML5). It defines an application programming interface that supports scripted client drawing operations and relies on javascript to call related canvasapi to draw graphics. However, since canvas is not a standard image format, the canvas is drawn as blank before javascript is called. When copying a web page, if the code is copied directly, it will cause a blank rendering problem in the editor.
[0167] In this step, when it is determined that the node type of the first target node is a canvas graphic, the browser plug-in can obtain the style of the canvas graphic, and then convert the canvas into an image through the toDataURL method of the canvas object, and then assign the style of the canvas graphic to the image to obtain an image file. Finally, when the first target node is updated, the canvas graphic is replaced with the image file, and the canvas graphic of the first target node can be replaced by the replaceWith method of jquery. In this way, the subsequent copying of web pages is facilitated, the problem of rendering blanks after the canvas object is copied is avoided, and the comprehensiveness and integrity of web page copying are improved.
[0168] S309: If the node type of the first target node is a vector graphic, convert the vector graphic into a canvas graphic; obtain an image file corresponding to the canvas graphic according to the canvas graphic; and replace the vector graphic with the image file in the first target node.
[0169] In the embodiment of the present application, the vector graphic SVG can be a scalable vector graphic that can provide high-quality vector graphic rendering, has strong interactive capabilities, and can be seamlessly integrated with other network technologies. The SVG vector graphic in the first web page usually has a reference method such as xlink:href, in which the current vector graphic references other vector graphics or files and displays the content and style of other vector graphics or files. On this basis, if the current first web page is directly copied, the content referenced by the SVG vector graphic is usually not copied, which causes the problem of missing copied content, and the SVG vector graphic will also be rendered as blank in the editor.
[0170] In this step, after determining that the node type of the first target node is an SVG vector graphic, the browser plug-in can call conversion software to convert the vector graphic into a canvas graphic, and then convert the canvas graphic into an image file according to the method of step S309 above, and finally replace the canvas graphic with an image file when the first target node is updated. The conversion software can specifically be open source software html2canvas and Canvg, etc., and the embodiments of the present application do not limit this. In this way, by converting the vector graphic into a canvas graphic and further converting it into an image file, it is possible to facilitate the subsequent copying of the vector graphic, avoid the problem of the vector graphic being rendered as a blank, and improve the integrity of the web page copy.
[0171] S310, creating a blank node, and copying the first target node to the blank node to obtain an intermediate node; modifying the path of the multimedia resource in the intermediate node to a complete storage path, and setting the style of the intermediate node to the second node style to obtain a second target node; copying the second target node to the target storage area.
[0172] In the embodiment of the present application, the blank node may refer to a new DOM node. After determining the complete storage path of the multimedia and obtaining the second node style, the content of the first target node may be copied to the blank node to obtain an intermediate node. The relative path of the multimedia resource in the intermediate node is then reassigned to the complete storage path. Furthermore, the style of each intermediate node is set to the corresponding second node style. Specifically, the attr method of jquery may be used to assign a value to the style attribute of the intermediate node to achieve the setting of the second node style. In this way, the second target node may be obtained, and finally the second target node may be copied to the target storage area, so that the user can copy it to the editor to achieve complete copying of the selected area of the first web page.
[0173] Specifically, in this step, the browser plug-in can monitor the copy event for the file object (document), that is, the first web page, create a new DOM node through the createElement method, and copy the content of the first target node to the new DOM node through the cloneContents method to obtain an intermediate node. Then the intermediate node is updated by the setData method of the clipboardData of the event object in the current copy method, including the assignment of the complete storage path of the multimedia resource, the assignment of the second node style, the replacement of vector graphics and canvas graphics, etc., to obtain the second target node. Afterwards, the browser plug-in executes the copy method through document.execCommand, and the second target node can be copied to the clipboard, and the user can paste it anywhere later. In addition, after the second target node is copied to the clipboard, the browser plug-in can remove the monitored copy event to avoid duplication when the web page is copied, resulting in a waste of computing resources.
[0174] exist Figure 3In the illustrated embodiment, an editing instruction is received; in response to the editing instruction, the first web page is set to an editing state and a preset editing tool is displayed; a selected area in the first web page is determined, and a first target parent node in the selected area is obtained; the first target parent nodes are traversed to obtain the first target child nodes in each first target parent node; the first target parent node and the first target child node are determined as the first target node; the node type and the first node style corresponding to each first target node are determined; if the node type corresponding to the first target node is a multimedia resource, the relative path corresponding to the multimedia resource is obtained; the relative path is the storage path of the multimedia resource relative to the first web page; based on the relative path, the complete storage path of the multimedia resource is determined; the alternative style type in the first node style is determined; according to the preset rules, the alternative style type is adjusted to obtain the target style type ; Splice the target style types to obtain the second node style; if the node type of the first target node is a canvas graphic, obtain the style of the canvas graphic; convert the canvas graphic into an image, and set the image to the style of the canvas graphic to obtain an image file; in the first target node, replace the canvas graphic with the image file; if the node type of the first target node is a vector graphic, convert the vector graphic into a canvas graphic; according to the canvas graphic, obtain the image file corresponding to the canvas graphic; in the first target node, replace the vector graphic with the image file; create a blank node, and copy the first target node to the blank node to obtain an intermediate node; modify the path of the multimedia resource in the intermediate node to a complete storage path, and set the style of the intermediate node to the second node style to obtain the second target node; copy the second target node to the target storage area. By obtaining the complete storage path of the multimedia resources, the comprehensive replication of multimedia resources such as images can be guaranteed, and the integrity of the node style can also be guaranteed, avoiding the problems of missing content and incomplete style when copying web pages, and improving the comprehensiveness and accuracy of web page replication.
[0175] For example, Figure 4 FIG. 1 shows a schematic diagram of the execution logic of a web page copying method according to an embodiment of the present application. Figure 4 As shown, the browser plug-in displays a preset pop-up window popup.html in the first web page. The preset pop-up window receives various operation instructions of the user, and communicates with the content script contentscript.js in the browser plug-in based on the operation instructions, so that the content script completes operations such as node copying and multimedia resources. Specifically, when the user needs to edit the first web page, he can click the "Open Editing" button in the preset pop-up window to trigger the editing instruction. The preset pop-up window responds to the editing instruction and sends an open editing event to the content script. After receiving the open editing event, the content script adjusts the editing properties of the first web page and sets the first web page to the editing state, which is convenient for the user to perform editing operations.
[0176] When the user needs to download multimedia resources in the first web page, he can click the "Multimedia Resource Download" button in the preset pop-up window, and the preset pop-up window will send a multimedia resource acquisition event such as "get-img" to the content script accordingly. The content script can obtain the relative path of the multimedia resources in the first web page, and display the file list of the multimedia resources in the preset pop-up window by returning a response. Then, based on the user's download instruction, it downloads at least one multimedia resource selected by the user, thereby realizing batch downloading of multimedia resources in the first web page.
[0177] When the user needs to copy the first web page, the preset pop-up window can send a copy event 'copy-html' to the content script. After receiving the copy event, the content script first determines the selected area corresponding to the user's copy instruction, then traverses and obtains the first target node in the selected area, and determines the node type and first node style of each first target node. For the first node style, the content script can adjust the alternative style type in the first node style according to the preset rules to obtain the target style type, and then splice the target style type to obtain the second node style. For the first target nodes of different node types, perform corresponding processing. For the first target node whose node type is a multimedia resource, the content script determines the complete storage path of each multimedia resource. For the first target node whose node type is a canvas graphic, the content script can convert it into an image file. For the first target node whose node type is a vector graphic, the content script can first convert it into a canvas graphic and then into an image file. Then the content script can update the first target node based on the complete storage path, the second node style and the image file to obtain the second target node. Finally, the second target node can be copied to the clipboard to achieve a complete copy of the selected area in the first web page.
[0178] It should be noted that, since multiple web pages may be opened in the browser at the same time, when the preset pop-up window communicates with the content script, the event or response sent may include the web page tag of the first web page to distinguish the web pages and ensure the accuracy of the operation processing.
[0179] The embodiment of the present invention solves the problems of content editing, multimedia resource downloading, code conversion and resource processing by configuring a browser plug-in in the browser. Perfect copying and matching of web page content is achieved. By adopting the form of a browser plug-in, the technical threshold required for operation is removed, and it is convenient for any non-technical personnel (such as operators) to copy existing web page content, and the connection between the browser web page and various editors is achieved, which reduces the manual editing operation in the editor and improves the processing efficiency.
[0180] Figure 5This is a schematic diagram of the structure of a web page copying device provided in an embodiment of the present application. Figure 5 The web page copying device 10 may include: a first determining module 11, a second determining module 12, a third determining module 13, an adjusting module 14 and a copying module 15, wherein:
[0181] The first determination module 11 is used to determine a selected area in the first webpage and obtain a first target node in the selected area;
[0182] The second determination module 12 is used to determine the node type and the first node style corresponding to each first target node;
[0183] The third determination module 13 is used to determine the complete storage path of the multimedia resource if the node type corresponding to the first target node is a multimedia resource;
[0184] The adjustment module 14 is used to adjust the first node style according to the style type in the first node style to obtain a second node style;
[0185] The copy module 15 is used to update the first target node according to the complete storage path and the second node pattern, obtain the second target node, and copy the second target node to the target storage area.
[0186] The web page copying device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.
[0187] In a possible implementation, the third determination module 13 includes an acquisition submodule and a determination submodule, wherein:
[0188] The acquisition submodule is used to acquire the relative path corresponding to the multimedia resource; the relative path is the storage path of the multimedia resource relative to the first webpage;
[0189] The determination submodule is used to determine the complete storage path of the multimedia resource based on the relative path.
[0190] In a possible implementation, a submodule is determined, specifically for:
[0191] According to the relative path of the multimedia resource, a file list corresponding to all multimedia resources in the selected area is displayed;
[0192] receiving a download instruction, the download instruction corresponding to at least one multimedia resource;
[0193] In response to the download instruction, the multimedia resource corresponding to the download instruction is stored in a preset storage area, and the storage path of the multimedia resource in the preset storage area is determined as the complete storage path.
[0194] In a possible implementation, a submodule is determined, specifically for:
[0195] Based on the URL and relative path of the first webpage, obtaining the absolute path of the multimedia resource;
[0196] Set the absolute path of the multimedia resource to the complete storage path.
[0197] In a possible implementation manner, the first determining module 11 is specifically configured to:
[0198] Get the first target parent node in the selected area;
[0199] Traverse the first target parent node and obtain the first target child node in each first target parent node;
[0200] The first target parent node and the first target child node are determined as the first target node.
[0201] In a possible implementation, the adjustment module 14 is specifically configured to:
[0202] Determining the candidate style type in the first node style;
[0203] According to the preset rules, the candidate style types are adjusted to obtain the target style type;
[0204] The target style types are concatenated to obtain the second node style.
[0205] In a possible implementation, the adjustment module 14 is further specifically configured to:
[0206] If the alternative style type is included in the preset style blacklist, deleting the alternative style type; and / or,
[0207] If the alternative style type is the default style, delete the alternative style type; and / or,
[0208] If the alternative style type is a style that the browser cannot recognize and display, the alternative style type is replaced with the target style type that the browser can normally recognize and display.
[0209] In a possible implementation, the copy module 15 is specifically configured to:
[0210] Create a blank node and copy the first target node to the blank node to obtain an intermediate node;
[0211] The path of the multimedia resource in the intermediate node is modified to a complete storage path, and the style of the intermediate node is set to the second node style, to obtain a second target node.
[0212] In a possible implementation manner, the device 10 is further used for:
[0213] If the node type of the first target node is a vector graphic, convert the vector graphic into a canvas graphic;
[0214] According to the canvas graphic, obtain the image file corresponding to the canvas graphic;
[0215] In the first target node, replace the vector graphic with an image file.
[0216] In a possible implementation manner, the device 10 is further used for:
[0217] If the node type of the first target node is a canvas graphic, obtain the style of the canvas graphic;
[0218] Convert the canvas graphic into an image, and set the image to the style of the canvas graphic to obtain an image file;
[0219] In the first target node, replace the canvas graphic with the image file.
[0220] In a possible implementation manner, the device 10 is further used for:
[0221] Receive editing instructions;
[0222] In response to the editing instruction, the first webpage is set to an editing state and a preset editing tool is displayed.
[0223] The web page copying device provided in the embodiment of the present application can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.
[0224] Figure 6 This is a schematic diagram of the structure of a web page copying device provided in an embodiment of the present application. Figure 6 The web page copying device 20 may include: a memory 21 and a processor 22. Exemplarily, the memory 21 and the processor 22 are connected to each other via a bus 23.
[0225] The memory 21 is used to store program instructions;
[0226] The processor 22 is used to execute the program instructions stored in the memory, so as to enable the processor to execute the webpage copying method shown in the above embodiment.
[0227] Figure 6 The web page copying device shown in the embodiment can execute the technical solution shown in the above method embodiment, and its implementation principle and beneficial effects are similar, which will not be repeated here.
[0228] An embodiment of the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed by a processor, they are used to implement the above-mentioned web page copying method.
[0229] The embodiment of the present application may also provide a computer program product, including a computer program, which, when executed by a processor, may implement the above-mentioned web page copying method.
[0230] All or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a readable memory. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned memory (storage medium) includes: read-only memory (English: read-only memory, abbreviated: ROM), RAM, flash memory, hard disk, solid state drive, magnetic tape (English: magnetic tape), floppy disk (English: floppy disk), optical disc (English: optical disc) and any combination thereof.
[0231] The embodiments of the present application are described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processing unit of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0232] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.
[0233] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.
[0234] Regarding the various modules / units contained in the various devices and products described in the above embodiments, they may be software modules / units, or hardware modules / units, or they may be partially software modules / units and partially hardware modules / units. Each device and product may be applied to or integrated in a chip, a chip module or a terminal. Exemplarily, for each device and product applied to or integrated in a chip, each module / chip contained therein may be implemented in the form of hardware such as circuits, or at least some modules / units may be implemented in the form of software programs, which run on a processor integrated inside the chip, and the remaining modules / units may be implemented in the form of hardware such as circuits.
[0235] Obviously, those skilled in the art can make various changes and modifications to the embodiments of the present application without departing from the spirit and scope of the present application. Thus, if these modifications and variations of the embodiments of the present application fall within the scope of the claims of the present application and their equivalents, the present application is also intended to include these modifications and variations.
[0236] In the present application, the term "include" and its variations may refer to non-restrictive inclusion; the term "or" and its variations may refer to "and / or". In the present application, the terms "first", "second", etc. are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. In the present application, "multiple" refers to two or more. "And / or" describes the association relationship between associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. The character " / " generally indicates that the related objects before and after are in an "or" relationship. In the technical solution of the present application, the collection, storage, use, processing, transmission, provision and disclosure of information such as financial data or user data involved shall comply with the provisions of relevant laws and regulations and shall not violate public order and good morals.
Claims
1. A web page copying method, characterized in that: include: Determine a selected area in a first webpage, and obtain a first target node in the selected area; Determine a node type and a first node style corresponding to each of the first target nodes; If the node type corresponding to the first target node is a multimedia resource, determining a complete storage path of the multimedia resource, wherein the complete storage path is determined based on a relative path, and the relative path is a storage path of the multimedia resource relative to the first webpage; According to the style type in the first node style, the first node style is adjusted to obtain a second node style; According to the complete storage path and the second node style, the first target node is updated to obtain a second target node, and the second target node is copied to a target storage area; The updating the first target node according to the complete storage path and the second node style to obtain the second target node includes: Create a blank node, and copy the first target node to the blank node to obtain an intermediate node; Modify the path of the multimedia resource in the intermediate node to the complete storage path, and set the style of the intermediate node to the second node style, to obtain the second target node; Determining the complete storage path of the multimedia resource includes: Displaying a file list corresponding to all multimedia resources in the selected area according to the relative path of the multimedia resource; receiving a download instruction, the download instruction corresponding to at least one multimedia resource; in response to the download instruction, storing the multimedia resource corresponding to the download instruction in a preset storage area, and determining the storage path of the multimedia resource in the preset storage area as the complete storage path; or, Based on the URL of the first webpage and the relative path, the absolute path of the multimedia resource is acquired; and the absolute path of the multimedia resource is set as the complete storage path.
2. The method according to claim 1, characterized in that Before determining the complete storage path of the multimedia resource, the method further includes: Get the relative path corresponding to the multimedia resource.
3. The method according to claim 1, characterized in that The obtaining of the first target node in the selected area comprises: Get the first target parent node in the selected area; Traverse the first target parent node and obtain the first target child node in each of the first target parent nodes; The first target parent node and the first target child node are determined as the first target node.
4. The method according to claim 1, characterized in that: The step of adjusting the first node style according to the style type in the first node style to obtain the second node style includes: Determining the candidate style type in the first node style; According to a preset rule, the candidate style type is adjusted to obtain a target style type; The target style types are concatenated to obtain a second node style.
5. The method according to claim 4, characterized in that The adjusting the candidate style type according to the preset rule includes: If the candidate style type is included in the preset style blacklist, deleting the candidate style type; and / or, If the candidate style type is a default style, deleting the candidate style type; and / or, If the candidate style type is a style that cannot be recognized and displayed by the browser, the candidate style type is replaced with the target style type that can be normally recognized and displayed by the browser.
6. The method according to claim 1, characterized in that The method further comprises: If the node type of the first target node is a vector graphic, converting the vector graphic into a canvas graphic; According to the canvas graphic, obtaining an image file corresponding to the canvas graphic; In the first target node, the vector graphic is replaced by the image file.
7. The method according to claim 1, characterized in that The method further comprises: If the node type of the first target node is a canvas graphic, obtaining the style of the canvas graphic; Converting the canvas graphic into an image, and setting the image to the style of the canvas graphic to obtain an image file; In the first target node, the canvas graphic is replaced with the image file.
8. The method according to any one of claims 1 to 7, characterized in that: The method further comprises: Receive editing instructions; In response to the editing instruction, the first webpage is set to an editing state and a preset editing tool is displayed.
9. A web page copying device, characterized in that: include: A first determining module, a second determining module, a third determining module, an adjustment module and a copy module, wherein: The first determination module is used to determine a selected area in the first webpage and obtain a first target node in the selected area; The second determination module is used to determine the node type and the first node style corresponding to each of the first target nodes; The third determination module is used to determine, if the node type corresponding to the first target node is a multimedia resource, a complete storage path of the multimedia resource, wherein the complete storage path is determined based on a relative path, and the relative path is a storage path of the multimedia resource relative to the first webpage; The adjustment module is used to adjust the first node style according to the style type in the first node style to obtain a second node style; The copy module is used to update the first target node according to the complete storage path and the second node style, obtain the second target node, and copy the second target node to the target storage area; The copy module is specifically used to: create a blank node, and copy the first target node to the blank node to obtain an intermediate node; Modify the path of the multimedia resource in the intermediate node to the complete storage path, and set the style of the intermediate node to the second node style, to obtain the second target node; The third determination module is specifically used to: Displaying a file list corresponding to all multimedia resources in the selected area according to the relative path of the multimedia resource; receiving a download instruction, the download instruction corresponding to at least one multimedia resource; in response to the download instruction, storing the multimedia resource corresponding to the download instruction in a preset storage area, and determining the storage path of the multimedia resource in the preset storage area as the complete storage path; or, Based on the URL of the first webpage and the relative path, the absolute path of the multimedia resource is acquired; and the absolute path of the multimedia resource is set as the complete storage path.
10. A web page copying device, characterized in that: include: Processor, memory; The memory stores computer-executable instructions; The processor executes the computer-executable instructions stored in the memory, so that the processor performs the method according to any one of claims 1 to 8.
11. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, which are used to implement the method according to any one of claims 1 to 8 when executed by a processor.
12. A computer program product, characterized in that The invention comprises a computer program, which implements the method according to any one of claims 1 to 8 when being executed by a processor.
