CN110032314B - Long screen capture method and device, storage medium and terminal equipment - Google Patents
Long screen capture method and device, storage medium and terminal equipment Download PDFInfo
- Publication number
- CN110032314B CN110032314B CN201910185052.3A CN201910185052A CN110032314B CN 110032314 B CN110032314 B CN 110032314B CN 201910185052 A CN201910185052 A CN 201910185052A CN 110032314 B CN110032314 B CN 110032314B
- Authority
- CN
- China
- Prior art keywords
- screenshot
- splicing
- area
- screenshots
- size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 42
- 238000005096 rolling process Methods 0.000 claims description 6
- 238000001514 detection method Methods 0.000 claims description 3
- 230000006870 function Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000002452 interceptive effect Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
- G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the technical field of computers, and provides a long screen capture method, a long screen capture device, a storage medium and terminal equipment. The method is applied to target APP of mixed development, when the target APP runs, if an input long screen capture instruction is detected, an html5 page currently displayed by the target APP is obtained, and each region contained in the html5 page is determined; intercepting image data of each region respectively by using a canvas component, wherein the image data is in a base64 format; restoring the image data into the screenshots of the areas; and splicing the screenshots of all the regions according to a preset rule to obtain a long screenshot image of the target APP. In the process, the canvas assembly is used for intercepting the image data of each area of the html5 page, and then the image data are restored and spliced to obtain the long screenshot image.
Description
Technical Field
The invention relates to the technical field of computers, in particular to a long screen capture method, a long screen capture device, a storage medium and terminal equipment.
Background
The long screen shot is a rolling screen shot, and content beyond the range of the screen can be intercepted. In the prior art, when a user uses a long screen capture tool to capture a screen of a window of an APP, if the window contains a scroll bar, the long screen capture tool calls an interface provided by the APP to control the scroll bar to scroll so as to display contents of different parts of a complete interface in the window, and captures partial contents displayed in the window after each scroll bar is controlled to scroll, and finally, images obtained by multiple screen captures are spliced, so that a long screen capture image of the complete interface of the window can be obtained. However, the above-mentioned long screen capture method is only suitable for the APP developed in the native state, and for the APP developed in the mixed state (native + html5), there is no effective long screen capture method.
Disclosure of Invention
In view of this, embodiments of the present invention provide a long screenshot method, an apparatus, a storage medium, and a terminal device, which can implement long screenshot based on a hybrid-developed APP.
In a first aspect of the embodiments of the present invention, a long screen capture method is provided, including:
when a target APP based on hybrid development runs, if an input long screen capture instruction is detected, obtaining an html5 page currently displayed by the target APP, wherein the size of the html5 page exceeds the screen range of terminal equipment;
determining each area contained in the html5 page;
intercepting image data of each region respectively by using a canvas component, wherein the image data is in a base64 format;
restoring the image data into the screenshots of the areas;
and splicing the screenshots of all the regions according to a preset rule to obtain a long screenshot image of the target APP.
In a second aspect of the embodiments of the present invention, there is provided a long screen capture device, including:
the instruction detection module is used for acquiring an html5 page currently displayed by a target APP if an input long screen capture instruction is detected when the target APP based on hybrid development runs, wherein the size of the html5 page exceeds the screen range of terminal equipment;
The region determining module is used for determining each region contained in the html5 page;
an image intercepting module, configured to respectively intercept image data of each of the regions using a canvas component, where the image data is in a base64 format;
the screenshot restoration module is used for restoring the image data into the screenshots of all the areas;
and the screenshot splicing module is used for splicing the screenshots of all the areas according to a preset rule to obtain the long screenshot image of the target APP.
In a third aspect of the embodiments of the present invention, a computer-readable storage medium is provided, where computer-readable instructions are stored, and when executed by a processor, the computer-readable instructions implement the steps of the long screen capture method as set forth in the first aspect of the embodiments of the present invention.
In a fourth aspect of the embodiments of the present invention, a terminal device is provided, which includes a memory, a processor, and computer readable instructions stored in the memory and executable on the processor, where the processor executes the computer readable instructions to implement the steps of the long screen capture method according to the first aspect of the embodiments of the present invention.
The long screen capturing method is applied to target APPs which are developed in a mixed mode, when the target APPs run, if an input long screen capturing instruction is detected, an html5 page which is displayed currently by the target APPs is obtained, and all areas contained in an html5 page are determined; respectively intercepting the image data of each region by using a canvas component; restoring the image data into the screenshots of the areas; and splicing the screenshots of all the regions according to a preset rule to obtain a long screenshot image of the target APP. The image data of all areas of the html5 page are intercepted by the canvas component in the process, then the image data are restored and spliced to obtain the long screenshot image, and the blank that the long screenshot cannot be realized by the hybrid development type APP is successfully filled.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the drawings needed to be used in the embodiments or the prior art descriptions will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without inventive exercise.
FIG. 1 is a flow chart of a first embodiment of a long screenshot method provided by an embodiment of the present invention;
FIG. 2 is a flowchart of a second embodiment of a long screenshot method according to an embodiment of the present invention;
FIG. 3 is a block diagram of one embodiment of a long screenshot device provided in an embodiment of the present invention;
fig. 4 is a schematic diagram of a terminal device according to an embodiment of the present invention.
Detailed Description
The embodiment of the invention provides a long screen capture method, a long screen capture device, a storage medium and terminal equipment, which can realize long screen capture based on hybrid-development APP.
In order to make the objects, features and advantages of the present invention more obvious and understandable, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the embodiments described below are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
Referring to fig. 1, a first embodiment of a long screenshot method according to an embodiment of the present invention includes:
101. when a target APP based on hybrid development runs, if an input long screen capture instruction is detected, acquiring an html5 page currently displayed by the target APP;
the target APP is a Hybrid development APP, namely Hybrid APP. When a user uses a target APP, if the user wants to perform a long screen capture operation, the user may input a long screen capture instruction in various ways, for example, click an icon set in a screen display interface for triggering the long screen capture instruction, or press a physical button combination for triggering the long screen capture instruction, or the like. After detecting a long screen capture instruction input by a user, the terminal system obtains relevant information of an html5 page currently displayed by the target APP, wherein the size of the html5 page exceeds the screen range of the terminal device, that is, the image of the html5 page can be completely captured only by long screen capture operation.
102. Determining each area contained in the html5 page;
after obtaining the html5 page currently presented by the target APP, determining each region included in the html5 page, specifically determining information such as the number of regions included in the page, the name, size, shape, and position of each region.
103. Intercepting image data of each region respectively by using a canvas component, wherein the image data is in a base64 format;
the image data for each of the regions is then individually truncated using the canvas component, and the resulting image data is in base64 format. For example, the canvas component of html5 may be used to intercept image data. In html5, for image data, whether the parent element and the child element are beyond the current screen, the outermost layer of the parent element is wrapped with a final parent element indicating the start position and the end position of an area. Therefore, when the canvas component is used for capturing the image, even if the size of a region exceeds the screen range, the starting position and the ending position of the region can be determined by the final parent element corresponding to the image data of the region, so that the complete image data of the region beyond the screen range can be acquired.
104. Restoring the image data into the screenshots of the areas;
after the image data of each of the regions is intercepted, the image data in base64 format needs to be restored to the screenshot of each region. Specifically, the image data may be stored in an array, and then the array is sent from the html5 development end of the target APP to the native development end in an interactive notification manner, and the operation of restoring the image data into a screenshot is executed at the native development end, and specifically, the existing base64 picture-to-picture algorithm or tool may be used to restore the image data in the base64 format into a screenshot in the picture format.
105. And splicing the screenshots of all the regions according to a preset rule to obtain a long screenshot image of the target APP.
And finally, splicing the screenshots of all the regions according to a preset rule to obtain a long screenshot image of the target APP. When the screenshots are spliced, the screenshots may be specifically spliced according to the original positions of the regions, for example, in the html5 page, the region a, the region B, and the region C are sequentially from top to bottom, and when the screenshots are spliced, the screenshots of the region a, the region B, and the region C are sequentially from top to bottom.
The long screen capturing method provided by the embodiment of the invention is applied to a target APP (application) in hybrid development, when the target APP is in operation, if an input long screen capturing instruction is detected, an html5 page currently displayed by the target APP is obtained, and each region contained in an html5 page is determined; respectively intercepting the image data of each region by using a canvas component; restoring the image data into screenshots of the areas; and splicing the screenshots of all the areas according to a preset rule to obtain a long screenshot image of the target APP. The image data of all areas of the html5 page are intercepted by the canvas assembly in the process, then the image data are restored and spliced to obtain the long screenshot image, and the blank that the mixed development type APP cannot achieve long screenshot is successfully filled.
Referring to fig. 2, a second embodiment of a long screenshot method according to the present invention includes:
201. when a target APP based on hybrid development runs, if an input long screen capture instruction is detected, acquiring an html5 page currently displayed by the target APP;
202. determining each area contained in the html5 page;
in the embodiment of the invention, the size of the html5 page exceeds the screen range of the terminal device, and each area contained in the html5 page comprises a head navigation area, a body content area and a bottom navigation area. The head navigation area is the navigation area at the top of the html5 page where the user can enter keywords for a search to find relevant content. The main content area is a display area located in the middle of the html5 page and is used for displaying the main content of the page. The bottom navigation area is the navigation area at the bottom of the html5 page for linking different sites or pages.
203. Intercepting image data of each region respectively by using a canvas component, wherein the image data is in a base64 format;
204. restoring the image data into the screenshots of the areas;
the steps 201-204 are the same as the steps 101-104, and the related description of the steps 101-104 can be referred to specifically.
205. Splicing the lower end of the screenshot of the head navigation area with the upper end of the screenshot of the main content area;
206. and splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area to obtain the long screenshot image of the target APP.
In an embodiment of the present invention, the screenshots of the respective regions collectively include a screenshot of a head navigation region, a screenshot of a body content region, and a screenshot of a bottom navigation region. During splicing, the layout of each region in the html5 page is followed, namely the lower end of the screenshot of the head navigation region is spliced with the upper end of the screenshot of the main content region, and the lower end of the screenshot of the main content region is spliced with the upper end of the screenshot of the bottom navigation region, so that a long screenshot image is obtained.
Further, before step 205, the method may further include:
(1) determining a size of a screenshot of the subject content area;
(2) if the size of the screenshot exceeds a preset threshold, the size of the screenshot is adjusted in a mode that the size in the horizontal direction is unchanged and the size in the vertical direction is reduced according to a preset proportion until the size of the screenshot is smaller than the threshold.
In some cases, the main content area contains more content, which results in an oversized screenshot of the obtained main content area in the vertical direction, and is not beneficial for a user to view the spliced screenshot image. Therefore, before splicing the screenshots, corresponding processing can be performed on the size of the screenshot in the main content area, that is, if the size of the screenshot exceeds a preset threshold, the size of the screenshot is adjusted in a manner that the size in the horizontal direction is unchanged and the size in the vertical direction is reduced according to a preset proportion until the size of the screenshot is smaller than the threshold.
Further, before step 205, the method may further include:
(1) determining a size of a screenshot of the subject content area;
(2) if the size exceeds a preset threshold value, averagely dividing the screenshot of the main content area into N sub-screenshots according to the direction from top to bottom, wherein N is an integer greater than 1;
(3) and reducing the size of the N sub-screenshots in the horizontal direction to 1/N of the original size.
For the problem that the size of the screenshot of the main content area in the vertical direction is too large, the screenshot of the main content area can be equally divided into N sub-screenshots from top to bottom, and the size of each sub-screenshot in the horizontal direction is reduced to 1/N of the original size. And then, splicing the lower end of the screenshot in the head navigation area and the upper end of the screenshot in the N navigation areas after the size of the screenshot is reduced, splicing the lower end of the screenshot in the N navigation areas after the size of the screenshot is reduced and the upper end of the screenshot in the bottom navigation area, and sequentially arranging the N screenshots from left to right according to the dividing sequence during splicing. For example, the main content area is divided into the sub-screenshots 1, 2 and 3 from top to bottom, the size of each sub-screenshot in the horizontal direction is reduced to 1/3 of the original size, the sub-screenshot 1 is arranged at the leftmost end during splicing, the sub-screenshot 2 is arranged at the middle during splicing, and the sub-screenshot 3 is arranged at the rightmost end during splicing.
Further, the long screen capture method may further include:
(1) determining a size of a screenshot of the subject content area;
(2) if the size exceeds a preset threshold, creating a content display control of which the interface size does not exceed the threshold;
(3) splicing the lower end of the screenshot of the head navigation area with the upper end of the interface of the content display control;
(4) splicing the lower end of the interface of the content display control and the upper end of the screenshot of the bottom navigation area;
(5) and displaying the screenshot of the main content area in the content display control in a rolling mode.
In addition, after the screenshots of all the areas are obtained, the screenshots of the main content areas with larger sizes can be displayed in a display control constructing mode. Specifically, a content display control with a moderate interface size can be created, then the interface of the content display control is spliced with the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the bottom navigation area respectively, and finally the screenshot of the main content area is displayed in the content display control in a rolling mode.
The long screen capture method provided by the embodiment of the invention is applied to a target APP of mixed development, when the target APP runs, if an input long screen capture instruction is detected, an html5 page currently displayed by the target APP is obtained, and each area contained in the html5 page is determined, wherein the area comprises 3 areas including a head navigation area, a main content area and a bottom navigation area; respectively intercepting the image data of each region by using a canvas component; restoring the image data into the screenshots of the areas; splicing the lower end of the screenshot of the head navigation area with the upper end of the screenshot of the main content area; and splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area to obtain the long screenshot image of the target APP. Compared with the first embodiment of the invention, the embodiment provides a specific page area layout and a splicing mode of all area screenshots.
It should be understood that, the sequence numbers of the steps in the foregoing embodiments do not imply an execution sequence, and the execution sequence of each process should be determined by its function and inherent logic, and should not constitute any limitation to the implementation process of the embodiments of the present invention.
The above mainly describes a long screen capture method, and a long screen capture apparatus will be described in detail below.
Referring to fig. 3, an embodiment of a long screenshot device in an embodiment of the present invention includes:
the instruction detection module 301 is configured to, when a target APP based on hybrid development runs, if an input long screen capture instruction is detected, obtain an html5 page currently displayed by the target APP, where a size of the html5 page exceeds a screen range of a terminal device;
a region determining module 302, configured to determine each region included in the html5 page;
an image capture module 303, configured to capture image data of each of the regions respectively using a canvas component, where the image data is in base64 format;
a screenshot restoration module 304, configured to restore the image data to the screenshots of the respective areas;
and the screenshot splicing module 305 is configured to splice the screenshots of the regions according to a preset rule to obtain a long screenshot image of the target APP.
Further, each area included in the html5 page includes a head navigation area, a body content area and a bottom navigation area, and the screenshot splicing module may include:
the first splicing unit is used for splicing the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the main content area;
and the second splicing unit is used for splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area.
Further, the screenshot splicing module may further include:
a screenshot size determination unit for determining a size of a screenshot of the main content area;
and the screenshot size adjusting unit is used for adjusting the size of the screenshot according to a mode that the size in the horizontal direction is unchanged and the size in the vertical direction is reduced according to a preset proportion until the size of the screenshot is smaller than the threshold value if the size of the screenshot exceeds the preset threshold value.
Further, the screenshot splicing module may further include:
the screenshot dividing unit is used for averagely dividing the screenshot of the main content area into N sub-screenshots according to the direction from top to bottom if the size exceeds a preset threshold, wherein N is an integer larger than 1;
The screenshot reducing unit is used for reducing the size of the N screenshots in the horizontal direction to 1/N of the original size;
the first splicing unit is specifically configured to:
splicing the lower end of the screenshot of the head navigation area and the upper ends of the N sub-screenshots with reduced sizes, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing;
the second splicing unit is specifically configured to:
and splicing the lower ends of the N sub-screenshots with the reduced size and the upper end of the screenshot in the bottom navigation area, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing.
Further, the long screen capture device may further include:
the display control creating module is used for creating a content display control of which the interface size does not exceed a preset threshold value if the size exceeds the preset threshold value;
the first control interface splicing module is used for splicing the lower end of the screenshot of the head navigation area with the upper end of the interface of the content display control;
the second control interface splicing module is used for splicing the lower end of the interface of the content display control and the upper end of the screenshot of the bottom navigation area;
and the rolling display module is used for rolling and displaying the screenshot of the main content area in the content display control.
Embodiments of the present invention further provide a computer-readable storage medium, which stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of any one of the long screen capturing methods shown in fig. 1 or fig. 2 are implemented.
The embodiment of the present invention further provides a terminal device, which includes a memory, a processor, and computer readable instructions stored in the memory and executable on the processor, where the processor executes the computer readable instructions to implement the steps of any one of the long screenshot methods shown in fig. 1 or fig. 2.
Fig. 4 is a schematic diagram of a terminal device according to an embodiment of the present invention. As shown in fig. 4, the terminal device 4 of this embodiment includes: a processor 40, a memory 41, and computer readable instructions 42 stored in the memory 41 and executable on the processor 40. The processor 40, when executing the computer readable instructions 42, implements the steps in the various long screenshot method embodiments described above, such as steps 101-105 shown in fig. 1. Alternatively, the processor 40, when executing the computer readable instructions 42, implements the functions of the modules/units in the above device embodiments, such as the functions of the modules 301 to 305 shown in fig. 3.
Illustratively, the computer-readable instructions 42 may be partitioned into one or more modules/units, which are stored in the memory 41 and executed by the processor 40 to implement the present invention. The one or more modules/units may be a series of computer-readable instruction segments capable of performing specific functions, which are used for describing the execution process of the computer-readable instructions 42 in the terminal device 4.
The terminal device 4 may be a desktop computer, a notebook, a palm computer, a cloud terminal device, or other computing devices. The terminal device 4 may include, but is not limited to, a processor 40 and a memory 41. It will be understood by those skilled in the art that fig. 4 is only an example of the terminal device 4, and does not constitute a limitation to the terminal device 4, and may include more or less components than those shown, or combine some components, or different components, for example, the terminal device 4 may further include an input-output device, a network access device, a bus, etc.
The Processor 40 may be a CentraL Processing Unit (CPU), other general purpose Processor, a DigitaL SignaL Processor (DSP), an AppLication Specific Integrated Circuit (ASIC), an off-the-shelf ProgrammabLe Gate Array (FPGA) or other ProgrammabLe logic device, discrete Gate or transistor logic device, discrete hardware component, etc. A general purpose processor may be a microprocessor or the processor may be any conventional processor or the like.
The memory 41 may be an internal storage unit of the terminal device 4, such as a hard disk or a memory of the terminal device 4. The memory 41 may also be an external storage device of the terminal device 4, such as a plug-in hard disk, a Smart Media Card (SMC), a Secure DigitaL (SD) Card, a FLash memory Card (FLash Card), or the like provided on the terminal device 4. Further, the memory 41 may also include both an internal storage unit and an external storage device of the terminal device 4. The memory 41 is used for storing the computer readable instructions and other programs and data required by the terminal device. The memory 41 may also be used to temporarily store data that has been output or is to be output.
It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described systems, apparatuses and units may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.
The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a terminal device, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U disk, a removable hard disk, a Read-OnLy Memory (ROM), a Random Access Memory (RAM), a magnetic disk or an optical disk, and other various media capable of storing program codes.
The above-mentioned embodiments are only used for illustrating the technical solutions of the present invention, and not for limiting the same; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
Claims (6)
1. A long screen capture method, comprising:
when a target APP based on hybrid development runs, if an input long screen capture instruction is detected, obtaining an html5 page currently displayed by the target APP, wherein the size of the html5 page exceeds the screen range of terminal equipment;
determining each area contained in the html5 page;
respectively intercepting the image data of each area by using a canvas component, wherein the image data is in a base64 format;
restoring the image data into the screenshots of the areas;
splicing the screenshots of all the areas according to a preset rule to obtain a long screenshot image of the target APP;
each area contained in the html5 page comprises a head navigation area, a main content area and a bottom navigation area, and splicing screenshots of the areas according to a preset rule comprises the following steps:
splicing the lower end of the screenshot of the head navigation area with the upper end of the screenshot of the main content area;
splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area;
before the lower end of the screenshot in the head navigation area and the upper end of the screenshot in the main content area are spliced, the method further comprises the following steps:
Determining a size of a screenshot of the subject content area;
if the size exceeds a preset threshold value, averagely dividing the screenshot of the main content area into N sub-screenshots according to the direction from top to bottom, wherein N is an integer greater than 1;
reducing the size of the N sub-screenshots in the horizontal direction to 1/N of the original size;
the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the main content area are spliced into:
splicing the lower end of the screenshot of the head navigation area and the upper ends of the N sub-screenshots with reduced sizes, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing;
splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area into:
and splicing the lower ends of the N sub-screenshots with the reduced size and the upper end of the screenshot in the bottom navigation area, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing.
2. The long screen capture method of claim 1, further comprising, prior to stitching a lower end of the screenshot of the head navigation region with an upper end of the screenshot of the body content region:
Determining a size of a screenshot of the subject content area;
if the size of the screenshot exceeds a preset threshold, the size of the screenshot is adjusted in a mode that the size in the horizontal direction is unchanged and the size in the vertical direction is reduced according to a preset proportion until the size of the screenshot is smaller than the threshold.
3. The long screen capture method of claim 1, further comprising:
determining a size of a screenshot of the subject content area;
if the size exceeds a preset threshold, creating a content display control of which the interface size does not exceed the threshold;
splicing the lower end of the screenshot of the head navigation area with the upper end of the interface of the content display control;
splicing the lower end of the interface of the content display control and the upper end of the screenshot of the bottom navigation area;
and displaying the screenshots of the main content area in a rolling mode in the content display control.
4. A long screen capture device, comprising:
the instruction detection module is used for acquiring an html5 page currently displayed by a target APP if an input long screen capture instruction is detected when the target APP based on hybrid development runs, wherein the size of the html5 page exceeds the screen range of terminal equipment;
The region determining module is used for determining each region contained in the html5 page;
an image intercepting module, configured to respectively intercept image data of each of the regions using a canvas component, where the image data is in a base64 format;
the screenshot restoration module is used for restoring the image data into the screenshots of all the areas;
the screenshot splicing module is used for splicing the screenshots of all the areas according to a preset rule to obtain a long screenshot image of the target APP;
each area contained in the html5 page comprises a head navigation area, a main content area and a bottom navigation area, and the screenshot splicing module comprises:
the first splicing unit is used for splicing the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the main content area;
the second splicing unit is used for splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area;
a screenshot size determination unit for determining a size of a screenshot of the main content area;
the screenshot dividing unit is used for averagely dividing the screenshot of the main content area into N sub-screenshots according to the direction from top to bottom if the size exceeds a preset threshold, wherein N is an integer larger than 1;
The screenshot reducing unit is used for reducing the size of the N screenshots in the horizontal direction to 1/N of the original size;
the first splicing unit is specifically configured to:
splicing the lower end of the screenshot of the head navigation area and the upper ends of the N sub-screenshots with reduced sizes, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing;
the second splicing unit is specifically configured to:
and splicing the lower ends of the N sub-screenshots with the reduced size and the upper end of the screenshot in the bottom navigation area, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing.
5. A computer-readable storage medium storing computer-readable instructions, which when executed by a processor implement the steps of the long screenshot method of any of claims 1-3.
6. A terminal device comprising a memory, a processor, and computer readable instructions stored in the memory and executable on the processor, wherein the processor when executing the computer readable instructions performs the steps of:
When a target APP based on hybrid development runs, if an input long screen capture instruction is detected, obtaining an html5 page currently displayed by the target APP, wherein the size of the html5 page exceeds the screen range of terminal equipment;
determining each area contained in the html5 page;
respectively intercepting the image data of each area by using a canvas component, wherein the image data is in a base64 format;
restoring the image data into screenshots of the areas;
splicing the screenshots of all the areas according to a preset rule to obtain a long screenshot image of the target APP;
each area contained in the html5 page comprises a head navigation area, a main content area and a bottom navigation area, and splicing screenshots of the areas according to a preset rule comprises the following steps:
splicing the lower end of the screenshot of the head navigation area with the upper end of the screenshot of the main content area;
splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area;
before splicing the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the main content area, the method further comprises the following steps:
Determining a size of a screenshot of the subject content area;
if the size exceeds a preset threshold value, averagely dividing the screenshot of the main content area into N sub-screenshots according to the direction from top to bottom, wherein N is an integer greater than 1;
reducing the size of the N sub-screenshots in the horizontal direction to 1/N of the original size;
splicing the lower end of the screenshot of the head navigation area and the upper end of the screenshot of the main content area into:
splicing the lower end of the screenshot of the head navigation area and the upper ends of the N sub-screenshots with reduced sizes, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing;
splicing the lower end of the screenshot of the main content area and the upper end of the screenshot of the bottom navigation area into:
and splicing the lower ends of the N sub-screenshots with the reduced size and the upper end of the screenshot in the bottom navigation area, wherein the N sub-screenshots are sequentially arranged from left to right according to the dividing sequence during splicing.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910185052.3A CN110032314B (en) | 2019-03-12 | 2019-03-12 | Long screen capture method and device, storage medium and terminal equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910185052.3A CN110032314B (en) | 2019-03-12 | 2019-03-12 | Long screen capture method and device, storage medium and terminal equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110032314A CN110032314A (en) | 2019-07-19 |
| CN110032314B true CN110032314B (en) | 2022-06-10 |
Family
ID=67235928
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910185052.3A Active CN110032314B (en) | 2019-03-12 | 2019-03-12 | Long screen capture method and device, storage medium and terminal equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110032314B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110475018A (en) * | 2019-07-23 | 2019-11-19 | 广东以诺通讯有限公司 | A kind of mobile phone screenshotss method and system based on map location label |
| CN110568973B (en) * | 2019-09-09 | 2021-04-06 | 网易（杭州）网络有限公司 | Screenshot method, screenshot device, storage medium and terminal equipment |
| CN111522742A (en) * | 2020-04-16 | 2020-08-11 | 北京三快在线科技有限公司 | Page view generating method and device, computer equipment and storage medium |
| CN111798358B (en) * | 2020-07-01 | 2024-05-31 | 北京梧桐车联科技有限责任公司 | Method and device for determining path time, electronic equipment and readable storage medium |
| CN111986088B (en) * | 2020-08-28 | 2023-06-30 | 网易（杭州）网络有限公司 | Image processing method, device, storage medium and terminal equipment |
| CN115145457B (en) * | 2021-03-31 | 2024-06-25 | 华为技术有限公司 | Method and device for scrolling screen capturing |
| CN115268741B (en) * | 2021-04-30 | 2024-09-24 | 华为技术有限公司 | Screen capturing method, graphical interface and electronic equipment |
| CN114020387A (en) * | 2021-11-03 | 2022-02-08 | 杭州逗酷软件科技有限公司 | Terminal screen capturing method and device, storage medium and electronic equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103927178A (en) * | 2014-04-18 | 2014-07-16 | 长沙裕邦软件开发有限公司 | Picture capturing method and picture capturing device |
| CN107015739A (en) * | 2017-03-07 | 2017-08-04 | 惠州Tcl移动通信有限公司 | A kind of method and system for intercepting long length screen content |
| CN107590228A (en) * | 2017-09-06 | 2018-01-16 | 维沃移动通信有限公司 | A kind of page content processing method and mobile terminal |
| WO2018072413A1 (en) * | 2016-10-19 | 2018-04-26 | 中兴通讯股份有限公司 | Terminal screenshot method and apparatus, and mobile terminal and storage medium |
| CN108897475A (en) * | 2018-05-31 | 2018-11-27 | 维沃移动通信有限公司 | A kind of image processing method and mobile terminal |
-
2019
- 2019-03-12 CN CN201910185052.3A patent/CN110032314B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103927178A (en) * | 2014-04-18 | 2014-07-16 | 长沙裕邦软件开发有限公司 | Picture capturing method and picture capturing device |
| WO2018072413A1 (en) * | 2016-10-19 | 2018-04-26 | 中兴通讯股份有限公司 | Terminal screenshot method and apparatus, and mobile terminal and storage medium |
| CN107015739A (en) * | 2017-03-07 | 2017-08-04 | 惠州Tcl移动通信有限公司 | A kind of method and system for intercepting long length screen content |
| CN107590228A (en) * | 2017-09-06 | 2018-01-16 | 维沃移动通信有限公司 | A kind of page content processing method and mobile terminal |
| CN108897475A (en) * | 2018-05-31 | 2018-11-27 | 维沃移动通信有限公司 | A kind of image processing method and mobile terminal |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110032314A (en) | 2019-07-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110032314B (en) | Long screen capture method and device, storage medium and terminal equipment | |
| CN110215690B (en) | Visual angle switching method and device in game scene and electronic equipment | |
| US9384503B2 (en) | Terminal apparatus, advertisement display control apparatus, and advertisement display method | |
| JP6214547B2 (en) | Measuring the rendering time of a web page | |
| CN104050185B (en) | A kind of content of pages Zoom display processing method and processing device | |
| CN112055244B (en) | Image acquisition method and device, server and electronic equipment | |
| CN113126862B (en) | Screen capture method and device, electronic equipment and readable storage medium | |
| CN113391779B (en) | Parameter adjusting method, device and equipment for paper-like screen | |
| CN112579187A (en) | Optimization method and device for cold start of application program | |
| CN110555179A (en) | Dynamic website script evidence obtaining method, terminal equipment and storage medium | |
| CN111399831A (en) | Page display method and device, storage medium and electronic device | |
| CN108989704B (en) | Image generation method and device and terminal equipment | |
| CN107122104B (en) | Data display method and device | |
| US20130236117A1 (en) | Apparatus and method for providing blurred image | |
| US11449405B2 (en) | Information processing apparatus, control method, and program | |
| WO2020015162A1 (en) | Image processing method for hybrid application, apparatus, computer device and storage medium | |
| CN109766530B (en) | Method and device for generating chart frame, storage medium and electronic equipment | |
| EP2608003A1 (en) | Method and device for movement of image object | |
| CN110737417A (en) | demonstration equipment and display control method and device of marking line thereof | |
| CN107977923B (en) | Image processing method, image processing device, electronic equipment and computer readable storage medium | |
| CN112580638B (en) | Text detection method and device, storage medium and electronic equipment | |
| US10877641B2 (en) | Image adjustment method, apparatus, device and computer readable storage medium | |
| CN113703653A (en) | Image processing method, device, equipment and computer readable storage medium | |
| CN111506185B (en) | Method, device, electronic equipment and storage medium for operating document | |
| CN107729180B (en) | Abnormal information processing method and device, computer device and readable storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |