CN116932963A

CN116932963A - Screenshot processing method and device, computer equipment and storage medium

Info

Publication number: CN116932963A
Application number: CN202311010282.9A
Authority: CN
Inventors: 符有带
Original assignee: Ping An Property and Casualty Insurance Company of China Ltd
Current assignee: Ping An Property and Casualty Insurance Company of China Ltd
Priority date: 2023-08-10
Filing date: 2023-08-10
Publication date: 2023-10-24

Abstract

The application belongs to the field of big data and the field of financial science and technology, and relates to a screenshot processing method, which comprises the following steps: acquiring screenshot condition information of a screenshot request; acquiring a target v i deo element in a target webpage; creating a target canvas element based on the target vi deo element; if the screenshot request information is static screenshot, processing a target vi deo element and a target canvas element by using an htm l 2canvas tool based on a first screenshot mode to generate a corresponding first screenshot picture; if the screenshot request information is a dynamic screenshot, processing the target vi deo element and the target canvas element by using an htm l 2canvas tool based on a second screenshot mode to generate a corresponding second screenshot picture. The application also provides a screenshot processing device, computer equipment and a storage medium. In addition, the application also relates to a blockchain technology, and the screenshot pictures can be stored in the blockchain. The method and the device can be applied to the webpage screenshot scene in the financial field, can realize rapid generation of the screenshot picture corresponding to the screenshot request, and improve the processing efficiency of generating the screenshot picture.

Description

Screenshot processing method and device, computer equipment and storage medium

Technical Field

The application relates to the technical field of big data and the technical field of finance, in particular to a screenshot processing method, a screenshot processing device, computer equipment and a storage medium.

Background

In front-end development, html2Canvas is a great JavaScript library that provides a method of converting web content into Canvas format, thereby helping developers to improve efficiency in making images, editors and dynamic effects. Due to the advantages of html2canvas, financial and technological companies, such as insurance companies, banks, etc., are required to use html2canvas to perform screenshot processing in a browser. However, in the practical application process of the webpage screenshot process in the browser of the finance and science company, because the video element in the webpage is loaded asynchronously and the html2canvas screenshot process is synchronous, the problem that the html2canvas cannot directly screenshot the webpage containing the video tag exists, and further the condition that the screenshot in the browser frequently fails occurs is caused.

Disclosure of Invention

The embodiment of the application aims to provide a screenshot processing method, a screenshot processing device, computer equipment and a storage medium, which are used for solving the technical problem that html2canvas does not support direct screenshot of a webpage containing a video tag in the actual application process of webpage screenshot processing in a browser of a finance and technology company, so that screenshot failure frequently occurs in webpage screenshot in the browser.

In order to solve the above technical problems, an embodiment of the present application provides a screenshot processing method, which adopts the following technical scheme:

receiving a screenshot request for a target webpage, wherein the screenshot request is triggered in a browser by a user; the target webpage is a webpage containing video elements, and the screenshot request carries screenshot condition information;

analyzing the screenshot request, and acquiring the screenshot condition information from the screenshot request; the screenshot requirement information comprises static screenshot and dynamic screenshot;

acquiring a target video element in the target webpage;

creating a corresponding target canvas element based on the target video element;

if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage;

and if the screenshot requirement information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage.

Further, the step of using the html2canvas tool to perform data processing on the target video element and the target canvas element based on a second screenshot mode corresponding to the dynamic screenshot to generate a second screenshot picture corresponding to the target webpage specifically includes:

acquiring preset delay data;

calling a preset cyclic screenshot function;

rendering the target video element onto the target canvas element using the loop screenshot function based on the delay data;

and performing screenshot processing on the target canvas element by using the html2canvas tool to obtain the second screenshot image.

Further, the step of using a preset html2canvas tool to perform data processing on the target video element and the target canvas element based on a first screenshot mode corresponding to the static screenshot to generate a first screenshot picture corresponding to the target webpage specifically includes:

rendering the target video element onto the target canvas element;

and performing screenshot processing on the target canvas element by using the html2canvas tool to obtain the first screenshot picture.

Further, the step of creating a corresponding target canvas element based on the target video element specifically includes:

Acquiring the size of the target video element;

creating a specified canvas element having the same size as the target video element;

and taking the specified canvas element as the target canvas element.

Further, the screenshot processing method further includes:

judging whether a service request for loading HTTP resources exists in the HTTPS website of the browser;

if a service request for loading HTTP resources exists, judging whether a target tool with a resource control function is stored in the server;

if a target tool with a resource control function is stored, calling the target tool;

acquiring a first URL of the service request;

converting the first URL through the target tool to obtain a second URL in an HTTPS format;

and loading the second URL in the HTTPS website.

Further, before the step of obtaining the target video element in the target web page, the method further includes:

acquiring the occupied memory of the target webpage;

judging whether the occupied memory is larger than a preset value or not;

if yes, acquiring a preset cut-off rule;

and carrying out truncation processing on the target webpage based on the truncation rule to obtain a plurality of corresponding truncation areas.

Further, the step of obtaining the target video element in the target webpage specifically includes:

determining a target truncated region corresponding to the target video element from all the truncated regions;

and acquiring the target video element from the target cut-off area.

In order to solve the above technical problems, the embodiment of the present application further provides a screenshot processing device, which adopts the following technical scheme:

the receiving module is used for receiving a screenshot request for a target webpage, which is triggered in the browser by a user; the target webpage is a webpage containing video elements, and the screenshot request carries screenshot condition information;

the first acquisition module is used for analyzing the screenshot request and acquiring the screenshot condition information from the screenshot request; the screenshot requirement information comprises static screenshot and dynamic screenshot;

the second acquisition module is used for acquiring target video elements in the target webpage;

the creation module is used for creating a corresponding target canvas element based on the target video element;

the first generation module is used for carrying out data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot if the screenshot requirement information is the static screenshot, and generating a first screenshot picture corresponding to the target webpage;

And the second generation module is used for carrying out data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot if the screenshot requirement information is the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage.

In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical schemes:

acquiring a target video element in the target webpage;

In order to solve the above technical problems, an embodiment of the present application further provides a computer readable storage medium, which adopts the following technical schemes:

acquiring a target video element in the target webpage;

Compared with the prior art, the embodiment of the application has the following main beneficial effects:

firstly, receiving a screenshot request for a target webpage, wherein the screenshot request is triggered in a browser by a user; then analyzing the screenshot request, and acquiring the screenshot condition information from the screenshot request; then, acquiring a target video element in the target webpage; subsequently creating a corresponding target canvas element based on the target video element; if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage; and if the screenshot request information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage. According to the embodiment of the application, the video element of the target webpage in the browser is converted into the canvas element, and the html2canvas tool is used for carrying out data processing on the converted canvas element, so that the screenshot picture of the target webpage corresponding to the screenshot condition information carried by the screenshot request can be quickly and accurately generated, the problem that the html2canvas in the prior art cannot directly screenshot the webpage containing the video tag is effectively solved, the processing efficiency of generating the screenshot picture is improved, and a user can quickly and efficiently process the required webpage element, thereby improving the use experience of the user.

Drawings

In order to more clearly illustrate the solution of the present application, a brief description will be given below of the drawings required for the description of the embodiments of the present application, it being apparent that the drawings in the following description are some embodiments of the present application, and that other drawings may be obtained from these drawings without the exercise of inventive effort for a person of ordinary skill in the art.

FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;

FIG. 2 is a flow chart of one embodiment of a screenshot processing method in accordance with the present application;

FIG. 3 is a schematic diagram of one embodiment of a screenshot processing apparatus according to the present application;

FIG. 4 is a schematic structural diagram of one embodiment of a computer device in accordance with the present application.

Detailed Description

Unless defined otherwise, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description of the applications herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the application; the terms "comprising" and "having" and any variations thereof in the description of the application and the claims and the description of the drawings above are intended to cover a non-exclusive inclusion. The terms first, second and the like in the description and in the claims or in the above-described figures, are used for distinguishing between different objects and not necessarily for describing a sequential or chronological order.

Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment may be included in at least one embodiment of the application. The appearances of such phrases in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments.

In order to make the person skilled in the art better understand the solution of the present application, the technical solution of the embodiment of the present application will be clearly and completely described below with reference to the accompanying drawings.

As shown in fig. 1, a system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as a web browser application, a shopping class application, a search class application, an instant messaging tool, a mailbox client, social platform software, etc., may be installed on the terminal devices 101, 102, 103.

The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablet computers, electronic book readers, MP3 players (Moving Picture Experts Group Audio Layer III, dynamic video expert compression standard audio plane 3), MP4 (Moving Picture Experts Group Audio Layer IV, dynamic video expert compression standard audio plane 4) players, laptop and desktop computers, and the like.

The server 105 may be a server providing various services, such as a background server providing support for pages displayed on the terminal devices 101, 102, 103.

It should be noted that, the screenshot processing method provided by the embodiment of the present application is generally executed by a server/terminal device, and accordingly, the screenshot processing apparatus is generally disposed in the server/terminal device.

The embodiment of the application can acquire and process the related data based on the artificial intelligence technology. Among these, artificial intelligence (Artificial Intelligence, AI) is the theory, method, technique and application system that uses a digital computer or a digital computer-controlled machine to simulate, extend and extend human intelligence, sense the environment, acquire knowledge and use knowledge to obtain optimal results.

Artificial intelligence infrastructure technologies generally include technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a robot technology, a biological recognition technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and other directions.

It should be understood that the number of terminal devices, networks and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

With continued reference to FIG. 2, a flowchart of one embodiment of a screenshot processing method in accordance with the application is shown. The order of the steps in the flowchart may be changed and some steps may be omitted according to various needs. The screenshot processing method provided by the embodiment of the application can be applied to any scene needing webpage screenshot, and can be applied to products of the scenes, such as insurance webpage screenshot in the field of financial insurance. The screenshot processing method comprises the following steps:

Step S201, a screenshot request for a target webpage, triggered by a user in a browser, is received.

In this embodiment, the electronic device (e.g., the server/terminal device shown in fig. 1) on which the screenshot processing method operates may obtain the screenshot request through a wired connection manner or a wireless connection manner. The browser may be a browser built into the electronic device. It should be noted that the wireless connection may include, but is not limited to, 3G/4G/5G connection, wiFi connection, bluetooth connection, wiMAX connection, zigbee connection, UWB (ultra wideband) connection, and other now known or later developed wireless connection. The target webpage is a webpage containing video elements. < video > is a new tag in HTML 5. The effect of the < video > tag is to embed the video element in the HTML page. The < video > tag defines a video, such as a movie clip or other video stream. The < video > element supports three video formats: MP4, webM, ogg. MP4 = MPEG 4 file uses an H264 video codec and an AAC audio codec. Webm=webm file uses VP8 video codec and Vorbis audio codec. The ogg=ogg file uses the thora video codec and the Vorbis audio codec. In addition, the screenshot request carries screenshot condition information. In the application scenario of insurance finance, the browser may be a browser applicable to a business system, such as an insurance system, a banking system, a transaction system, an order system, and the like. The target web page may refer to an H5 web page corresponding to functions of applying for loans, credit cards, or purchasing insurance, financial products, etc., and the target web page includes video data.

Step S202, analyzing the screenshot request and acquiring the screenshot condition information from the screenshot request.

In this embodiment, the screenshot condition information may be obtained from the screenshot request by parsing the screenshot request. The screenshot requirement information comprises a static screenshot and a dynamic screenshot. The screenshot requirement information of the static screenshot refers to a static screenshot picture corresponding to the target webpage to be generated. The screenshot requirement information of the dynamic screenshot refers to a screenshot picture which is required to generate the dynamic screenshot corresponding to the target webpage.

Step S203, obtaining a target video element in the target web page.

In this embodiment, the above specific implementation process of obtaining the target video element in the target web page will be described in further detail in the following specific embodiments, which will not be described herein.

Step S204, creating a corresponding target canvas element based on the target video element.

In this embodiment, canvas Chinese name is called "canvas", which is the "container" of all UI components in the game. In one scenario, the presence of multiple canvas objects may be allowed, as well as "nested" usage between canvases. It should be noted that any one UI object in a scene must be a "child level" of a certain Canvas object. The foregoing specific implementation process of creating the corresponding target canvas element based on the target video element will be described in further detail in the following specific embodiments, which will not be described herein.

Step S205, if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage.

In this embodiment, html2Canvas is a great JavaScript library that provides a method for converting web content into Canvas format, thereby helping developers to improve efficiency in making images, editors and dynamic effects. The specific implementation process of generating the first screenshot picture corresponding to the target webpage is described in further detail in the following specific embodiments, and is not described in any more detail herein.

Step S206, if the screenshot request information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage.

In this embodiment, the foregoing specific implementation process of generating the second screenshot picture corresponding to the target web page by using the html2canvas tool to perform data processing on the target video element and the target canvas element based on the second screenshot mode corresponding to the dynamic screenshot will be described in further detail in the following specific embodiments, which are not described herein.

Firstly, receiving a screenshot request for a target webpage, wherein the screenshot request is triggered in a browser by a user; then analyzing the screenshot request, and acquiring the screenshot condition information from the screenshot request; then, acquiring a target video element in the target webpage; subsequently creating a corresponding target canvas element based on the target video element; if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage; and if the screenshot request information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage. According to the application, the video element of the target webpage in the browser is converted into the canvas element, and then the html2canvas tool is used for carrying out data processing on the converted canvas element, so that the screenshot picture of the target webpage corresponding to the screenshot condition information carried by the screenshot request can be quickly and accurately generated, the problem that the html2canvas in the prior art cannot directly screenshot the webpage containing the video tag is effectively solved, the processing efficiency of generating the screenshot picture is improved, and the user can quickly and efficiently process the required webpage element, thereby improving the use experience of the user.

In some optional implementation manners, the electronic device in the application can also solve the problem of cross-domain, namely, the problem that html2canvas cannot directly capture cross-domain pictures and can render after downloading the pictures to the local. Specifically, proxy can be used to proxy the picture to the same domain, or a response header Access-Control-alloy-Origin is set at the server side to Allow cross-domain Access, so as to solve the problem of picture cross-domain in a proxy mode. In addition, the electronic equipment in the application can also solve the problem that the html2canvas tool does not support the redirection of the address picture. Since the html2canvas tool is limited in support of redirection, since it is running on the browser, which will automatically follow the redirection. When a picture before redirection needs to be intercepted, an XMLHttpRequest can be used for acquiring a URL before the jump before a request is sent, and the URL is transferred to an HTML2Canvas for screenshot. In addition, the HTML2Canvas tool can also support various browsers and screen resolutions, so that the application range of the HTML2Canvas tool is enlarged.

In some alternative implementations, step S206 includes the steps of:

and acquiring preset delay data.

In this embodiment, the selection of the delay data is not specifically limited, and may be set according to actual use requirements, and specifically 16 ms may be selected as the delay data.

And calling a preset cyclic screenshot function.

In this embodiment, the above-mentioned loop screenshot function is specifically a requestanimation frame function. The requestanimation frame is an API provided by the browser specially for the animation, the browser can automatically optimize the call of the method when running, and if the page is not in an active state, the animation can automatically pause, so that CPU overhead is effectively saved. The requestanimation frame function will centralize all DOM operations in each frame, completing in one redraw or reflow, with the time interval of the redraw or reflow closely following the refresh frequency of the browser. In hidden or invisible elements, the requestanimation frame will not redraw or reflow, which means less CPU, GPU and memory usage.

And rendering the target video element onto the target canvas element by using the circular screenshot function based on the delay data.

In this embodiment, dynamic refresh can be achieved by looping through the use of the requestanimation frame function. When the screenshot is cycled using the requestanimate frame function, the animation can be made smoother by rendering the video element on the canvas element using the drawImage and delaying it for 16 milliseconds in each cycle. Wherein the drawImage () method is used to draw an image, canvas, or video on a canvas. The drawmage () method is also capable of drawing certain portions of an image, and/or increasing or decreasing the size of an image.

In this embodiment, the target canvas element may be used as a data source of the screenshot, and the html2canvas tool may be used to perform screenshot processing on the target canvas element, and add the screenshot to a page to obtain a second screenshot image corresponding to the target webpage.

The method comprises the steps of obtaining preset delay data; then calling a preset cyclic screenshot function; then, based on the delay data, rendering the target video element onto the target canvas element by using the cyclic screenshot function; and then, carrying out screenshot processing on the target canvas element by using the html2canvas tool to obtain the second screenshot image. According to the method and the device for generating the second screenshot images, the second screenshot images which correspond to the target webpage and meet the dynamic screenshot conditions can be automatically and rapidly generated by screenshot processing of the target canvas element based on the delay data, the cyclic screenshot function and the html2canvas tool, and the generation efficiency of the second screenshot images is improved.

In some alternative implementations of the present embodiment, step S205 includes the steps of:

And rendering the target video element onto the target canvas element.

In this embodiment, the target canvas element may be used as a data source of the screenshot, and the html2canvas tool may be used to perform screenshot processing on the target canvas element, and add the screenshot to a page to obtain a first screenshot image corresponding to the target webpage.

Rendering the target video element to the target canvas element; and then, carrying out screenshot processing on the target canvas element by using the html2canvas tool to obtain the first screenshot picture. According to the method and the device for generating the first screenshot images, the screenshot processing is carried out on the target canvas element through the html2canvas tool, so that the first screenshot images which correspond to the target webpage and meet the static screenshot conditions can be automatically and rapidly generated, and the generation efficiency of the first screenshot images is improved.

In some alternative implementations, step S204 includes the steps of:

and acquiring the size of the target video element.

In this embodiment, the element information of the target video element may be obtained, and then the size information of the target video element may be obtained from the element information, where the size information may include at least a length and a width of the element.

Creating a specified canvas element of the same size as the target video element.

And taking the specified canvas element as the target canvas element.

The method comprises the steps of obtaining the size of the target video element; then creating a specified canvas element of the same size as the target video element; and taking the designated canvas element as the target canvas element. According to the application, the canvas element with the same size as the target video element is constructed based on the acquired size of the target video element and used as the target canvas element, so that the accuracy of the generated target canvas element is improved, and the subsequent screenshot processing of the target canvas element by using an html2canvas tool is facilitated, so that a screenshot picture with the same content as the target webpage can be accurately generated.

In some alternative implementations, the electronic device may further perform the steps of:

and judging whether a service request for loading the HTTP resource exists in the HTTPS website of the browser.

In this embodiment, because the HTTPS website does not allow HTTP resources to be loaded due to the security policy limitation of the browser, when using the html2canvas tool, if there is a situation that HTTP resources need to be loaded in the HTTPS website of the browser, the html2canvas tool cannot work normally.

If a service request for loading HTTP resources exists, judging whether a target tool with a resource control function is stored in the server.

In this embodiment, the resource control function is a function of changing the URL of the HTTP resource to the HTTPs format.

And if the target tool with the resource control function is stored, calling the target tool.

In this embodiment, the target tool is a tool having a function of changing the URL of the HTTP resource into the format of HTTPs. The target tool may specifically employ a cloudflash tool that provides a function called "Automatic HTTPS Rewrites" (automatic HTTPS redirection) that can convert HTTP resources to HTTPS resources, thereby avoiding the problem of a browser blocking loading resources.

And acquiring a first URL of the service request.

In this embodiment, the URL data of the service request may be obtained by parsing the service request.

And converting the first URL through the target tool to obtain a second URL in an HTTPS format.

In this embodiment, for example, if the URL of the HTTP picture to be loaded is "http:// example. Com/image. Png", the URL may be changed to "HTTPs:// example. Com/image. Png" by the target tool.

And loading the second URL in the HTTPS website.

In this embodiment, by converting the HTTP resource into the HTTPs resource and loading the second URL in the HTTPs website, the problem that the browser prevents loading the resource due to the security policy can be avoided. In addition, if the HTTP resource can be found under the website inside the browser, the HTTP resource is downloaded and uploaded to the HTTPS website and is loaded in an HTTPS mode, so that the problem that the browser prevents loading the resource due to a security policy can be avoided.

The application judges whether the service request for loading the HTTP resource exists in the HTTPS website of the browser; if a service request for loading HTTP resources exists, judging whether a target tool with a resource control function is stored in the server; if a target tool with a resource control function is stored, calling the target tool; then obtaining a first URL of the service request; then converting the first URL through the target tool to obtain a second URL in an HTTPS format; and subsequently loading the second URL in the HTTPS website. When detecting whether the service request for loading the HTTP resource exists in the HTTPS website of the browser, the method and the device intelligently call the target tool with the resource control function to convert the first URL of the service request, and load the converted second URL in the HTTPS website, so that the problem that the browser stops loading the resource due to a security policy can be effectively avoided, and smooth loading of the HTTP resource in the HTTPS website of the browser is effectively realized.

In some optional implementations of this embodiment, before step S203, the electronic device may further perform the following steps:

and acquiring the occupied memory of the target webpage.

In this embodiment, the memory information of the electronic device may be queried, and the occupied memory of the target webpage may be counted from the memory information. html2canvas tools often result in insufficient memory and program crashes when processing large and complex web pages. This is because HTML2Canvas always requires too much memory to convert the entire DOM tree into an image.

Judging whether the occupied memory is larger than a preset value or not.

In this embodiment, the value of the preset value is not specifically limited, and may be set according to actual use requirements.

If yes, acquiring a preset cut-off rule.

In this embodiment, the above-mentioned cutoff rule is a rule constructed in advance for performing cutoff processing on a web page and dividing it into a certain number of cutoff regions. The number of values is not particularly limited, and may be set according to actual use requirements.

In this embodiment, the target web page is truncated by using the truncation rule to obtain a plurality of truncated regions, so that each truncated region can be individually processed in the subsequent step, thereby avoiding the occurrence of a memory problem when the whole DOM is processed, and accelerating the processing time.

The application obtains the occupied memory of the target webpage; then judging whether the occupied memory is larger than a preset value or not; if yes, acquiring a preset cut-off rule; and then, carrying out truncation processing on the target webpage based on the truncation rule to obtain a plurality of corresponding truncation areas. When the occupied memory of the target webpage is detected to be larger than the preset value, the method intelligently uses the preset cutoff rule to cut the target webpage to obtain a plurality of corresponding cutoff areas, and is favorable for independently carrying out data processing on each cutoff area, so that the memory problem during processing the whole DOM can be avoided, and the processing efficiency of webpage screenshot can be effectively improved.

In some alternative implementations of the present embodiment, step S203 includes the steps of:

and determining a target truncated region corresponding to the target video element from all the truncated regions.

In this embodiment, the target truncated area is an area containing video elements.

And acquiring the target video element from the target cut-off area.

In this embodiment, the target cut-off region may be extracted by extracting the video element to obtain the target video element inside the target cut-off region.

Determining a target truncated region corresponding to the target video element from all the truncated regions; and subsequently acquiring the target video element from the target cut-off area. According to the method and the device for intercepting the target webpage, the target webpage is intercepted by using the preset intercepting rule, so that a plurality of corresponding intercepting areas are obtained, the target intercepting area corresponding to the target video element can be determined from all the intercepting areas, and the target video element can be further rapidly acquired from the target intercepting area. Because only the video element acquisition is needed for the target truncated area, and data processing is not needed for all the truncated areas, the workload of the video element acquisition can be effectively reduced, and the video element acquisition efficiency is improved.

It should be understood that the sequence number of each step in the foregoing embodiment does not mean that the execution sequence of each process should be determined by the function and the internal logic, and should not limit the implementation process of the embodiment of the present application.

It should be emphasized that, to further ensure the privacy and security of the screenshot pictures, the screenshot pictures may also be stored in a blockchain node.

The blockchain is a novel application mode of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, encryption algorithm and the like. The Blockchain (Blockchain), which is essentially a decentralised database, is a string of data blocks that are generated by cryptographic means in association, each data block containing a batch of information of network transactions for verifying the validity of the information (anti-counterfeiting) and generating the next block. The blockchain may include a blockchain underlying platform, a platform product services layer, an application services layer, and the like.

Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by computer readable instructions stored in a computer readable storage medium that, when executed, may comprise the steps of the embodiments of the methods described above. The storage medium may be a nonvolatile storage medium such as a magnetic disk, an optical disk, a Read-Only Memory (ROM), or a random access Memory (Random Access Memory, RAM).

It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited in order and may be performed in other orders, unless explicitly stated herein. Moreover, at least some of the steps in the flowcharts of the figures may include a plurality of sub-steps or stages that are not necessarily performed at the same time, but may be performed at different times, the order of their execution not necessarily being sequential, but may be performed in turn or alternately with other steps or at least a portion of the other steps or stages.

With further reference to fig. 3, as an implementation of the method shown in fig. 2, the present application provides an embodiment of a screenshot processing apparatus, where an embodiment of the apparatus corresponds to the embodiment of the method shown in fig. 2, and the apparatus may be specifically applied to various electronic devices.

As shown in fig. 3, the screenshot processing apparatus 300 according to this embodiment includes: a receiving module 301, a first acquiring module 302, a second acquiring module 303, a creating module 304, a first generating module 305 and a second generating module 306. Wherein:

the receiving module 301 is configured to receive a screenshot request for a target web page triggered in a browser by a user; the target webpage is a webpage containing video elements, and the screenshot request carries screenshot condition information;

the first obtaining module 302 is configured to parse the screenshot request and obtain the screenshot condition information from the screenshot request; the screenshot requirement information comprises static screenshot and dynamic screenshot;

a second obtaining module 303, configured to obtain a target video element in the target web page;

a creating module 304, configured to create a corresponding target canvas element based on the target video element;

the first generating module 305 is configured to, if the screenshot requirement information is a static screenshot, perform data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generate a first screenshot picture corresponding to the target webpage;

And the second generating module 306 is configured to, if the screenshot requirement information is a dynamic screenshot, perform data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generate a second screenshot picture corresponding to the target webpage.

In this embodiment, the operations performed by the modules or units respectively correspond to the steps of the screenshot processing method in the foregoing embodiment one by one, which is not described herein again.

In some alternative implementations of the present embodiment, the second generating module 306 includes:

the first acquisition sub-module is used for acquiring preset delay data;

the calling sub-module is used for calling a preset cyclic screenshot function;

the first rendering sub-module is used for rendering the target video element onto the target canvas element by using the cyclic screenshot function based on the delay data;

and the first processing sub-module is used for carrying out screenshot processing on the target canvas element by using the html2canvas tool to obtain the second screenshot image.

In some alternative implementations of the present embodiment, the first generating module 305 includes:

the second rendering sub-module is used for rendering the target video element to the target canvas element;

and the second processing submodule is used for carrying out screenshot processing on the target canvas element by using the html2canvas tool to obtain the first screenshot picture.

In some alternative implementations of the present embodiment, the creation module 304 includes:

a second obtaining sub-module, configured to obtain a size of the target video element;

a creation sub-module for creating a specified canvas element having the same size as the target video element;

and the first determination submodule is used for taking the specified canvas element as the target canvas element.

In some optional implementations of this embodiment, the screenshot processing apparatus further includes:

The first judging module is used for judging whether a service request for loading the HTTP resource exists in the HTTPS website of the browser;

the second judging module is used for judging whether a target tool with a resource control function is stored in the second judging module if a service request for loading the HTTP resource exists;

the calling module is used for calling the target tool with the resource control function if the target tool is stored;

the third acquisition module is used for acquiring the first URL of the service request;

the conversion module is used for converting the first URL through the target tool to obtain a second URL in an HTTPS format;

and the loading module is used for loading the second URL in the HTTPS website.

a fourth obtaining module, configured to obtain an occupied memory of the target webpage;

the third judging module is used for judging whether the occupied memory is larger than a preset value or not;

a fifth obtaining module, configured to obtain a preset cutoff rule if yes;

And the processing module is used for carrying out truncation processing on the target webpage based on the truncation rule to obtain a plurality of corresponding truncation areas.

In some optional implementations of this embodiment, the second obtaining module 303 includes:

the second determining submodule is used for determining a target truncated region corresponding to the target video element from all the truncated regions;

and the third acquisition submodule is used for acquiring the target video element from the target cut-off area.

In order to solve the technical problems, the embodiment of the application also provides computer equipment. Referring specifically to fig. 4, fig. 4 is a basic structural block diagram of a computer device according to the present embodiment.

The computer device 4 comprises a memory 41, a processor 42, a network interface 43 communicatively connected to each other via a system bus. It should be noted that only computer device 4 having components 41-43 is shown in the figures, but it should be understood that not all of the illustrated components are required to be implemented and that more or fewer components may be implemented instead. It will be appreciated by those skilled in the art that the computer device herein is a device capable of automatically performing numerical calculations and/or information processing in accordance with predetermined or stored instructions, the hardware of which includes, but is not limited to, microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASICs), programmable gate arrays (fields-Programmable Gate Array, FPGAs), digital processors (Digital Signal Processor, DSPs), embedded devices, etc.

The computer equipment can be a desktop computer, a notebook computer, a palm computer, a cloud server and other computing equipment. The computer equipment can perform man-machine interaction with a user through a keyboard, a mouse, a remote controller, a touch pad or voice control equipment and the like.

The memory 41 includes at least one type of readable storage medium including flash memory, hard disk, multimedia card, card memory (e.g., SD or DX memory, etc.), random Access Memory (RAM), static Random Access Memory (SRAM), read Only Memory (ROM), electrically Erasable Programmable Read Only Memory (EEPROM), programmable Read Only Memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the storage 41 may be an internal storage unit of the computer device 4, such as a hard disk or a memory of the computer device 4. In other embodiments, the memory 41 may also be an external storage device of the computer device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure Digital (SD) Card, a Flash Card (Flash Card) or the like, which are provided on the computer device 4. Of course, the memory 41 may also comprise both an internal memory unit of the computer device 4 and an external memory device. In this embodiment, the memory 41 is typically used to store an operating system and various application software installed on the computer device 4, such as computer readable instructions of a screenshot processing method. Further, the memory 41 may be used to temporarily store various types of data that have been output or are to be output.

The processor 42 may be a central processing unit (Central Processing Unit, CPU), controller, microcontroller, microprocessor, or other data processing chip in some embodiments. The processor 42 is typically used to control the overall operation of the computer device 4. In this embodiment, the processor 42 is configured to execute computer readable instructions stored in the memory 41 or process data, such as computer readable instructions for executing the screenshot processing method.

The network interface 43 may comprise a wireless network interface or a wired network interface, which network interface 43 is typically used for establishing a communication connection between the computer device 4 and other electronic devices.

in the embodiment of the application, firstly, a screenshot request for a target webpage, which is triggered in a browser by a user, is received; then analyzing the screenshot request, and acquiring the screenshot condition information from the screenshot request; then, acquiring a target video element in the target webpage; subsequently creating a corresponding target canvas element based on the target video element; if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage; and if the screenshot request information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage. According to the embodiment of the application, the video element of the target webpage in the browser is converted into the canvas element, and the html2canvas tool is used for carrying out data processing on the converted canvas element, so that the screenshot picture of the target webpage corresponding to the screenshot condition information carried by the screenshot request can be quickly and accurately generated, the problem that the html2canvas in the prior art cannot directly screenshot the webpage containing the video tag is effectively solved, the processing efficiency of generating the screenshot picture is improved, and a user can quickly and efficiently process the required webpage element, thereby improving the use experience of the user.

The present application also provides another embodiment, namely, a computer readable storage medium storing computer readable instructions executable by at least one processor to cause the at least one processor to perform the steps of the screenshot processing method as described above.

From the above description of the embodiments, it will be clear to those skilled in the art that the above-described embodiment method may be implemented by means of software plus a necessary general hardware platform, but of course may also be implemented by means of hardware, but in many cases the former is a preferred embodiment. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art in the form of a software product stored in a storage medium (e.g. ROM/RAM, magnetic disk, optical disk) comprising instructions for causing a terminal device (which may be a mobile phone, a computer, a server, an air conditioner, or a network device, etc.) to perform the method according to the embodiments of the present application.

It is apparent that the above-described embodiments are only some embodiments of the present application, but not all embodiments, and the preferred embodiments of the present application are shown in the drawings, which do not limit the scope of the patent claims. This application may be embodied in many different forms, but rather, embodiments are provided in order to provide a thorough and complete understanding of the present disclosure. Although the application has been described in detail with reference to the foregoing embodiments, it will be apparent to those skilled in the art that modifications may be made to the embodiments described in the foregoing description, or equivalents may be substituted for elements thereof. All equivalent structures made by the content of the specification and the drawings of the application are directly or indirectly applied to other related technical fields, and are also within the scope of the application.

Claims

1. A screenshot processing method, characterized by comprising the steps of:

acquiring a target video element in the target webpage;

if the screenshot request information is a static screenshot, performing data processing on the target video element and the target canvas element by using a preset html 2canvas tool based on a first screenshot mode corresponding to the static screenshot, and generating a first screenshot picture corresponding to the target webpage;

and if the screenshot requirement information is a dynamic screenshot, performing data processing on the target video element and the target canvas element by using the html 2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage.

2. The screenshot processing method according to claim 1, wherein the step of using the html 2canvas tool to perform data processing on the target video element and the target canvas element based on the second screenshot mode corresponding to the dynamic screenshot to generate the second screenshot picture corresponding to the target webpage specifically includes:

acquiring preset delay data;

calling a preset cyclic screenshot function;

and performing screenshot processing on the target canvas element by using the htm l 2canvas tool to obtain the second screenshot image.

3. The screenshot processing method according to claim 1, wherein the step of using a preset html 2canvas tool to perform data processing on the target video element and the target canvas element based on the first screenshot mode corresponding to the static screenshot to generate the first screenshot picture corresponding to the target webpage specifically includes:

rendering the target video element onto the target canvas element;

and performing screenshot processing on the target canvas element by using the htm l 2canvas tool to obtain the first screenshot picture.

4. The screenshot processing method according to claim 1, wherein the step of creating a corresponding target canvas element based on the target video element specifically comprises:

acquiring the size of the target video element;

and taking the specified canvas element as the target canvas element.

5. The screenshot processing method according to claim 1, further comprising:

acquiring a first URL of the service request;

and loading the second URL in the HTTPS website.

6. The screenshot processing method of claim 1, further comprising, prior to the step of obtaining a target video element in the target web page:

Acquiring the occupied memory of the target webpage;

judging whether the occupied memory is larger than a preset value or not;

if yes, acquiring a preset cut-off rule;

7. The method for processing the screenshot according to claim 6, wherein the step of obtaining the target video element in the target web page specifically includes:

and acquiring the target video element from the target cut-off area.

8. A screenshot processing apparatus, comprising:

the first generation module is used for carrying out data processing on the target video element and the target canvas element by using a preset html 2canvas tool based on a first screenshot mode corresponding to the static screenshot if the screenshot requirement information is the static screenshot, and generating a first screenshot picture corresponding to the target webpage;

and the second generation module is used for carrying out data processing on the target video element and the target canvas element by using the html 2canvas tool based on a second screenshot mode corresponding to the dynamic screenshot if the screenshot requirement information is the dynamic screenshot, and generating a second screenshot picture corresponding to the target webpage.

9. A computer device comprising a memory having stored therein computer readable instructions which when executed by a processor implement the steps of the screenshot processing method of any one of claims 1 to 7.

10. A computer readable storage medium having stored thereon computer readable instructions which when executed by a processor implement the steps of the screenshot processing method of any one of claims 1 to 7.