CN113407090A - Interface color sampling method and device, electronic equipment and storage medium - Google Patents
Interface color sampling method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN113407090A CN113407090A CN202110602648.6A CN202110602648A CN113407090A CN 113407090 A CN113407090 A CN 113407090A CN 202110602648 A CN202110602648 A CN 202110602648A CN 113407090 A CN113407090 A CN 113407090A
- Authority
- CN
- China
- Prior art keywords
- screenshot
- color
- page
- webpage
- canvas
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 77
- 238000005070 sampling Methods 0.000 title claims abstract description 26
- 238000012545 processing Methods 0.000 claims abstract description 67
- 230000001960 triggered effect Effects 0.000 claims abstract description 10
- 238000000605 extraction Methods 0.000 claims description 26
- 238000004590 computer program Methods 0.000 claims description 7
- 230000000694 effects Effects 0.000 abstract description 5
- 238000005516 engineering process Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 238000004458 analytical method Methods 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 230000002349 favourable effect Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 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
- 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/04842—Selection of displayed objects or displayed text elements
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The disclosure relates to an interface color sampling method, an interface color sampling device, an electronic device and a storage medium, wherein the method comprises the following steps: the method comprises the steps of executing screenshot processing operation on a to-be-color-taken page by calling a screenshot service component, receiving an access address sent by the screenshot service component, wherein the access address is used for indicating a path for acquiring a screenshot result, further generating a webpage canvas in a transparent state, covering the webpage canvas on the to-be-color-taken page, acquiring the screenshot result according to the access address, issuing the screenshot result to the webpage canvas, receiving a color value acquisition instruction triggered by a user on the webpage canvas, calling a color value acquisition service of the webpage canvas according to the color value acquisition instruction, and acquiring a corresponding color value. Therefore, the purpose of color taking can be achieved based on the screenshot service component and the webpage canvas, the technical effects of improving the accuracy of color taking and reducing the complexity of color taking are achieved, the requirement of webpage color taking can be met, and the use experience of a user is improved.
Description
Technical Field
The present disclosure relates to the field of internet technologies, and in particular, to an interface color sampling method and apparatus, an electronic device, and a storage medium.
Background
At present, with the development of front-end technology, more and more editor tools of H5 version emerge, such as online pictures of H5 version, online documents of H5 version, and the like.
The color value can be acquired through the color acquiring tool in the related technology, however, the technology only plays a role in recording the color value, if a user wants to use the color value, the color value needs to be manually input into an editor, automatic assignment cannot be achieved, combination with a project is not friendly, and the combination with the project cannot be combined with the project for use, and the color acquiring accuracy is not high.
Disclosure of Invention
The present disclosure provides an interface color sampling method, an interface color sampling device, an electronic device, and a storage medium, which are intended to solve at least one of the technical problems in the related art to some extent.
The technical scheme of the disclosure is as follows:
according to a first aspect of the embodiments of the present disclosure, there is provided an interface color sampling method, including: calling a screenshot service component to execute screenshot processing operation on a page to be color-taken; receiving an access address sent by the screenshot service component, wherein the access address is used for indicating a path for acquiring a screenshot result; generating a webpage canvas in a transparent state, and covering the webpage canvas on a page to be color-extracted; acquiring a screenshot result according to the access address, and publishing the screenshot result to a webpage canvas; and receiving a color value acquisition instruction triggered by a user on the webpage canvas, and calling color value acquisition service of the webpage canvas according to the color value acquisition instruction to obtain a corresponding color value.
In some embodiments, invoking the screenshot service component to perform screenshot processing operations on the to-be-rendered page includes: calling a screenshot service component to generate a screenshot task; creating an initial node service; configuring initial node service and a target dependency library to be associated, so as to introduce a screenshot method of a target browser of a page to be subjected to color extraction into the initial node service to obtain the target node service; and calling the target node service to execute a screenshot task based on the screenshot method so as to execute screenshot processing operation on the page to be color-extracted.
In some embodiments, invoking the target node service to execute a screenshot task based on a screenshot method to execute a screenshot processing operation on a to-be-taken color page includes: analyzing the screenshot task to obtain a corresponding task size; determining the target size of a page to be subjected to color extraction; and if the task size is smaller than the target size, performing screen-splitting screenshot processing operation on the color page to be taken based on the task size.
In some embodiments, the screenshot processing operation of splitting the color page to be taken based on the task size includes: performing screenshot processing operation by taking the top boundary of the page to be colored as the starting point to select a picture with a first screen size; performing interface scrolling processing on the page to be color-extracted, and repeatedly executing screenshot processing operation of split screens after the interface scrolling processing so as to select a picture with a second screen size; and if the picture with the second screen size comprises the bottom boundary of the page to be colored, acquiring a screenshot result according to the selected first screen size and the selected second screen size.
In some embodiments, generating a webpage canvas in a transparent state and overlaying the webpage canvas on the page to be colored comprises: creating a webpage canvas in a transparent state among the target browsers; aligning the webpage canvas in the transparent state with a page to be color-extracted, and taking the webpage canvas obtained by the alignment as a target webpage canvas; and covering the target webpage canvas on the page to be subjected to color extraction.
In some embodiments, the method further comprises: and sending the color value to the target business process.
According to a second aspect of the embodiments of the present disclosure, there is provided an interface color sampling device, including: the screenshot module is configured to execute screenshot processing operation of calling a screenshot service component to a color page to be taken; the receiving module is configured to execute receiving of an access address sent by the screenshot service component, and the access address is used for indicating a path for obtaining a screenshot result; the generating module is configured to generate a webpage canvas in a transparent state and cover the webpage canvas on a page to be subjected to color extraction; the release module is configured to execute the acquisition of the screenshot result according to the access address and release the screenshot result to the webpage canvas; and the color value obtaining module is configured to execute a color value obtaining instruction triggered by the receiving user on the webpage canvas, and call color value obtaining service of the webpage canvas according to the color value obtaining instruction to obtain a corresponding color value.
In some embodiments, the screenshot module comprises: the first calling submodule is configured to execute calling of the screenshot service component so as to generate a screenshot task; a first creation submodule configured to perform creation of an initial node service; the configuration submodule is configured to execute configuration of initial node service and correlation of a target dependency library, so that a screenshot method of a target browser of a page to be subjected to color extraction is introduced into the initial node service to obtain the target node service; and the second calling sub-module is configured to execute the screenshot task of calling the target node service based on the screenshot method so as to execute screenshot processing operation on the page to be subjected to screenshot.
In some embodiments, the configuration submodule comprises: the analysis unit is configured to execute an analysis screenshot task to obtain a corresponding task size; a determination unit configured to perform determination of a target size of a page to be colored; and the screenshot unit is configured to execute screenshot processing operation of performing screen splitting on the color page to be taken based on the task size when the task size is smaller than the target size.
In some embodiments, the screenshot cell comprises: the screenshot subunit is configured to execute screenshot processing operation starting from the top boundary of the page to be color-extracted so as to select a picture with a first screen size; the screen scrolling sub-unit is configured to execute interface screen scrolling processing on a page to be color-extracted, and repeatedly execute screen-splitting screenshot processing operation after the interface screen scrolling processing so as to select a picture with a second screen size; and the selecting subunit is configured to execute screenshot according to the selected first screen size and the second screen size to obtain a screenshot result when the picture with the second screen size comprises the bottom boundary of the page to be colored.
In some embodiments, the generating module comprises: a second creation sub-module configured to perform creating a webpage canvas in a transparent state among the target browsers; the alignment submodule is configured to align the webpage canvas in the transparent state with the page to be color-extracted, and take the webpage canvas obtained through alignment as a target webpage canvas; and the covering submodule is configured to perform covering of the target webpage canvas on the page to be colored.
In some embodiments, the interface color sampling device further comprises: and the sending module is configured to send the color value to the target business process.
According to a third aspect of the embodiments of the present disclosure, there is provided an electronic apparatus including: a processor; a memory for storing executable instructions of the processor; wherein the processor is configured to call and execute the executable instructions stored in the memory to implement the interface color fetching method of the embodiment of the first aspect of the disclosure.
According to a fourth aspect of the embodiments of the present disclosure, there is provided a storage medium, where instructions, when executed by a processor of an electronic device, enable the electronic device to perform the interface color sampling method of the first aspect of the present disclosure.
According to a fifth aspect of the embodiments of the present disclosure, there is provided a computer program product, which, when executed by a processor of an electronic device, enables the electronic device to perform the interface color sampling method of the first aspect of the present disclosure.
According to the technical scheme, screenshot processing operation is executed on a to-be-color-taken page by calling a screenshot service component, an access address sent by the screenshot service component is received, the access address is used for indicating a path for obtaining a screenshot result, a webpage canvas in a transparent state is further generated, the webpage canvas covers the to-be-color-taken page, the screenshot result is further obtained according to the access address and is issued to the webpage canvas, a color value obtaining instruction triggered by a user on the webpage canvas is received, a color value obtaining service of the webpage canvas is called according to the color value obtaining instruction, and a corresponding color value is obtained. Therefore, the purpose of color taking can be achieved based on the screenshot service component and the webpage canvas, the technical effects of improving the accuracy of color taking and reducing the complexity of color taking are achieved, the requirement of color taking of the webpage can be met, the use experience of a user is improved, and the webpage color taking and the project combining are facilitated to be followed.
Additional aspects and advantages of the disclosure will be set forth in part in the description which follows and, in part, will be obvious from the description, or may be learned by practice of the disclosure.
Drawings
Fig. 1 is a flowchart of an interface color sampling method according to an embodiment of the present disclosure;
FIG. 2 is a flow chart of a proposed interface color extraction method according to another embodiment of the present disclosure;
FIG. 3 is a flow chart of a proposed method for interface color extraction according to another embodiment of the present disclosure;
FIG. 4 is a flow chart of an interface color fetching method according to one example of the present disclosure;
FIG. 5 is a block diagram of an interface color sampling apparatus according to an embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.
Detailed Description
In order to make the technical solutions of the present disclosure better understood by those of ordinary skill in the art, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below with reference to the accompanying drawings.
It should be noted that the terms "first," "second," and the like in the description and claims of the present disclosure and in the above-described drawings are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the disclosure described herein are capable of operation in sequences other than those illustrated or otherwise described herein. The implementations described in the exemplary embodiments below are not intended to represent all implementations consistent with the present disclosure. Rather, they are merely examples of apparatus and methods consistent with certain aspects of the present disclosure, as detailed in the appended claims. The embodiments described below with reference to the drawings are exemplary and intended to be illustrative of the present disclosure, and should not be construed as limiting the present disclosure.
An interface color sampling method, an apparatus, an electronic device, and a storage medium according to embodiments of the present disclosure are described below with reference to the drawings.
Fig. 1 is a flowchart of an interface color extraction method according to an embodiment of the disclosure.
It should be noted that the execution subject of the interface color extraction method in the embodiment of the present disclosure may be an electronic device, specifically, the electronic device may be, but is not limited to, a server and a terminal, and the terminal may be, but is not limited to, a personal computer, a smart phone, an IPAD, and the like.
The embodiment of the disclosure is exemplified in that the interface color extracting method is configured in an interface color extracting device, and the device can be applied to an electronic device, so that the electronic device can execute the interface color extracting method.
As shown in fig. 1, the interface color sampling method includes:
s101: and calling a screenshot service component to execute screenshot processing operation on the page to be color-taken.
According to the embodiment of the disclosure, when the color of the front-end interface needs to be extracted, the screenshot service component can be called to execute screenshot processing operation on the page to be color-extracted.
The page that is displayed (presented to the user) on the front-end interface and needs to obtain the color value may be referred to as a page to be color-extracted, and the page to be color-extracted may include one or more page contents, for example: the method and the device for extracting the webpage content have the advantages that the images, the characters and any other possible webpage content can be obtained, namely, the color of the webpage content in the webpage to be extracted can be extracted.
The screenshot service component is used for executing screenshot operation on the page to be color-taken, namely: and intercepting one or more screenshots from the page to be subjected to color extraction so as to perform subsequent color extraction operation.
The screenshot service component may be, for example, an API (Application Programming Interface) for a screenshot built in a browser where the page to be color-rendered is located, or may also be in another form, which is not limited to this.
In some embodiments, the web page address of the page to be color-extracted for the color-extracting task may be loaded, the resolution of the page to be color-extracted is set, a monitoring event is set for the page to be color-extracted, and after the web page loading of the page to be color-extracted is monitored, the screenshot service component is called to execute screenshot processing operation on the page to be color-extracted.
S102: and receiving an access address sent by the screenshot service component, wherein the access address is used for indicating a path for acquiring a screenshot result.
After the screenshot processing operation is executed, further, an access address (URL) sent by the screenshot service component is received, where the access address is used to indicate a path for obtaining a screenshot result, that is, the screenshot result can be obtained through the access address.
In some embodiments, after performing the screenshot processing operation, the screenshot result (i.e., one or more pictures taken from the page to be rendered) may be uploaded to a predetermined location, for example: the screenshot result is uploaded to a Content Delivery Network (CDN), so that an access address (URL) corresponding to the screenshot result may exist in the CDN. The screenshot service component can access the CDN to obtain the access address, and send the access address to the front end. In this case, embodiments of the present disclosure may receive an access address sent by the screenshot service component.
S103: and generating a webpage canvas in a transparent state, and covering the webpage canvas on the page to be color-extracted.
After receiving the access address, further, the embodiment of the present disclosure may generate a transparent webpage canvas (canvas), and overlay the webpage canvas on the page to be colored.
S104: and acquiring a screenshot result according to the access address, and publishing the screenshot result to the webpage canvas.
Further, a screenshot result is obtained according to the access address, for example: one or more screenshot pictures are obtained from a Content Delivery Network (CDN) according to an access address, and the one or more screenshot pictures are released to a webpage canvas (canvas), that is, the present embodiment may present a screenshot result on the webpage canvas (canvas).
S105: and receiving a color value acquisition instruction triggered by a user on the webpage canvas, and calling color value acquisition service of the webpage canvas according to the color value acquisition instruction to obtain a corresponding color value.
After the screenshot result is issued to the webpage canvas, the color value obtaining instruction triggered by the user on the webpage canvas can be received, the color value obtaining service of the webpage canvas is called according to the color value obtaining instruction, and the corresponding color value is obtained.
The user can perform a click operation by moving/clicking a mouse, moving a cursor or operating a touch screen at a color-fetching point position on a webpage canvas (canvas), and monitor a click event of the mouse, the moving cursor or the touch screen to obtain the color value acquisition instruction.
In some embodiments, the number of color value obtaining instructions may be multiple, that is, the user may take colors at multiple positions on the canvas of the webpage.
For example, the screenshot result of the page to be color-extracted includes a picture a and a picture B, and after the picture a and the picture B are published to the webpage canvas, the user may click any position of the picture a and the picture B on the webpage canvas through a mouse to extract color, for example: and clicking positions a1 and a2 in picture A and clicking positions B1 and B2 in picture B can generate color value acquisition instructions for clicking positions a1, a2, B1 and B2.
The color value obtaining service may be a color obtaining function built in the canvas of the webpage. In practical application, during the process of monitoring the click event of the mouse, the moving cursor or the touch screen, the position coordinates of the color-fetching point can be further determined, that is: the position coordinates of a1, a2, b1 and b2 corresponding to the canvas of the webpage are called to obtain corresponding color values, for example: and calling a getImageData API of canvas to acquire image data of the corresponding coordinates, wherein the image data can comprise corresponding color values, so that the operation of taking the color of the interface is realized.
In the embodiment of the disclosure, a screenshot service component is called to execute screenshot processing operation on a to-be-color-taken page, an access address sent by the screenshot service component is received, the access address is used for indicating a path for acquiring a screenshot result, a webpage canvas in a transparent state is further generated, the webpage canvas is covered on the to-be-color-taken page, the screenshot result is further acquired according to the access address and is issued to the webpage canvas, a color value acquisition instruction triggered by a user on the webpage canvas is received, a color value acquisition service of the webpage canvas is called according to the color value acquisition instruction, and a corresponding color value is obtained. Therefore, the purpose of color taking can be achieved based on the screenshot service component and the webpage canvas, the technical effects of improving the accuracy of color taking and reducing the complexity of color taking are achieved, the requirement of color taking of the webpage can be met, the use experience of a user is improved, and the webpage color taking and the project combining are facilitated to be followed.
Fig. 2 is a flowchart of an interface color extraction method according to another embodiment of the present disclosure, and as shown in fig. 2, the step S101 may include:
s201: and calling a screenshot service component to generate a screenshot task.
Specifically, in the process of calling the screenshot service component to execute the screenshot processing operation on the color page to be taken, the screenshot service component can be called to generate a screenshot task, namely: and generating a screenshot task aiming at the page to be subjected to color extraction.
S202: an initial node service is created.
Further, an initial node service is created, and the node service is started, that is, the embodiment of the present disclosure supports screenshot tasks by using the node service.
S203: and configuring the initial node service to be associated with the target dependency library so as to introduce the screenshot method of the target browser of the page to be subjected to color extraction into the initial node service to obtain the target node service.
After the initial node service is created, the embodiment of the present disclosure may configure the initial node service to be associated with a target dependent library, where the target dependent library is, for example: puppeteer relies on the library so that Puppeteer dependence can be introduced at the initial node service. By associating the target dependency library, the screenshot method of the target browser of the page to be colored can be introduced into the initial node service.
The screenshot method of the target browser may correspond to the target dependency library, for example: the target dependency library is a Puppeteer dependency library, the target browser may be a Google browser (Google Chrome), and the screenshot method may be a Chrome screenshot method provided by the Google browser, or may also be a screenshot method.
In this embodiment, the screenshot method of the target browser to which the page to be color-captured belongs may be introduced into the initial node service to obtain the target node service, so that the target node service may have the screenshot function.
S204: and calling the target node service to execute a screenshot task based on the screenshot method so as to execute screenshot processing operation on the page to be color-extracted.
After the target node service is obtained, the target node service may be called to execute a screenshot task based on a screenshot method, for example: and calling a chroma screenshot method or a screen shot method, and executing screenshot processing operation on the page to be color-captured.
Therefore, the node service can have the screenshot function provided by the browser through the association dependency library, so that the screenshot speed can be increased, and the screenshot quality can be improved. In addition, different screenshot methods can be obtained by associating different dependency libraries, and therefore the method can be suitable for different environments.
Optionally, in some embodiments, invoking a target node service to execute the screenshot task based on a screenshot method to perform screenshot processing operation on the page to be color-extracted includes: analyzing the screenshot task to obtain a corresponding task size; determining the target size of a page to be subjected to color extraction; and if the task size is smaller than the target size, performing screen-splitting screenshot processing operation on the color page to be taken based on the task size.
Specifically, the screenshot task generated in the above embodiment may include a task size, that is: the size of the screen shot. In the process of executing screenshot processing operation on the page to be color-extracted, firstly, a screenshot task can be analyzed to obtain a corresponding task size.
Further, the size of the page to be colored is determined as a target size, for example: the target size may be determined by querying information of the page to be color-extracted, or the target size of the page to be color-extracted may be calculated by invoking a size calculation method, which is not limited herein.
Further, comparing the task size with the target size, and if the task size is smaller than the target size, performing screen-splitting screenshot processing operation on the color page to be taken based on the task size, that is, performing screen-splitting screenshot processing operation on the color page to be taken based on the task size under the condition that the screenshot size is smaller than the size of the color page to be taken. Therefore, screenshot operation failure caused by the fact that the screenshot size is larger than the page to be color-extracted is avoided. In addition, screenshot based on the task size can also ensure the size standardization of the screenshot, and the screenshot result can be favorably issued to the webpage canvas.
It should be noted that the screenshot task may further include other task information, for example: the quantity of screenshots and the like, and other task information can be combined in the screenshot process to ensure the accuracy of screenshot.
Optionally, in some embodiments, the screenshot processing operation of splitting the to-be-rendered page based on the task size includes: performing screenshot processing operation by taking the top boundary of the page to be colored as the starting point to select a picture with a first screen size; performing interface scrolling processing on the page to be color-extracted, and repeatedly executing screenshot processing operation of split screens after the interface scrolling processing so as to select a picture with a second screen size; and if the picture with the second screen size comprises the bottom boundary of the page to be colored, acquiring a screenshot result according to the selected first screen size and the selected second screen size.
In practical application, there may be a problem that a target size of a page to be color-rendered is too large, and multiple screens are required to perform complete display, that is, the page to be color-rendered occupies multiple screens.
In this case, the screenshot processing operation of splitting the screen of the page to be color-extracted may be performed by starting from the top boundary of the page to be color-extracted to select a picture of the first screen size, that is: and intercepting a picture with a first screen size from the top boundary of the page to be colored.
Further, performing interface scrolling processing on the page to be color-fetched, for example: a browser scroll event may be invoked to perform an interface scroll process. For better understanding of the present embodiment, the interface where the top end boundary is located is represented by a first screen, and the interface after the interface scrolling process is represented by a second screen. After the screen scrolling process, executing the screen-splitting screenshot processing operation to select the picture with the second screen size, namely: and intercepting a picture with a second screen size at the second screen.
And repeatedly executing the screen scrolling operation and the screen splitting screenshot processing operation until the picture with the second screen size comprises the bottom boundary of the page to be color-extracted, namely, completing the screenshot processing operation from the top boundary to the bottom boundary of the page to be color-extracted. And taking the first screen size picture and one or more second screen size pictures as screenshot results. Through the screen splitting and screen capturing mode, the screen capturing processing can be performed on the large-size page to be subjected to color capturing, and therefore the color capturing processing can be performed on the pages with different sizes.
Fig. 3 is a flowchart of an interface color extraction method according to another embodiment of the present disclosure, and as shown in fig. 3, the step S103 may include:
s301: a webpage canvas is created in a transparent state among the target browsers.
In the operation of generating the webpage canvas in the transparent state and covering the webpage canvas on the page to be colored, the embodiment of the present disclosure first creates the webpage canvas in the transparent state in the target browser, for example: a webpage canvas in a transparent state is created in *** browser.
S302: and aligning the webpage canvas in the transparent state with the page to be color-extracted, and taking the webpage canvas obtained by the alignment as a target webpage canvas.
Further, the transparent canvas and the page to be color-rendered are aligned, for example: and adjusting the boundary pair of the webpage canvas and the boundary pair of the page to be color-extracted so that the webpage canvas can completely cover the page to be color-extracted to obtain the target webpage canvas.
S303: and covering the target webpage canvas on the page to be subjected to color extraction.
Further, the target webpage canvas is covered on the page to be colored, namely: and completely covering the page to be color-fetched by using the target webpage canvas. Therefore, the target webpage canvas and the page to be subjected to color extraction can be overlapped through alignment processing, and the subsequent release of the screenshot result to the webpage canvas is facilitated.
Optionally, in some embodiments, the method further comprises: and sending the color value to the target business process.
The target business process may be any engineering project that needs to use the interface color value, such as an editing project of an editor of H5 version. After the corresponding color value is obtained, the color value may also be sent to a target business process, for example: and sending the color value to the editor of the H5 version, thereby realizing the automatic input of the color value into the editor, and further realizing the effect of combining the interface color taking with the project.
Based on the above description, in an example of the present disclosure, as shown in fig. 4, when an interface color taking is required, a screenshot task request may be initiated, a node server is called to execute a screenshot task, it may be determined whether queuing is required, that is, whether waiting is required, if so, the screenshot is added to a task queue, if not, a page opening task address is created, then a picture file, that is, a to-be-color-taken picture is generated, the to-be-color-taken picture is uploaded to a content distribution network, a front end obtains a URL of the picture, then, draws an interface canvas corresponding to the to-be-color-taken picture, identifies the to-be-color-taken point from the interface canvas according to a coordinate value of the to-be-color-taken point, obtains a color value corresponding to the to-be-taken color-point, and provides the color value to a target item, so as to perform service processing based on the target item.
In summary, the interface color-selecting method of the embodiment of the disclosure solves the color-selecting requirement of the H5 editor, and can be better combined with the project; the speed of acquiring the picture is higher and the quality is better by using the node service screenshot; the color value is obtained by using the canvas technology, the technical scheme of H5 is met, different service scenes can be combined, and the method is more friendly to the front-end project.
The embodiment of the disclosure also provides an interface color sampling device, and fig. 5 is a structural block diagram of the interface color sampling device according to the embodiment of the disclosure.
As shown in fig. 5, the interface color sampling device 50 includes: a screenshot module 501 configured to execute a screenshot processing operation of calling a screenshot service component to execute a screenshot on a page to be photographed; a receiving module 502 configured to execute receiving an access address sent by the screenshot service component, where the access address is used to indicate a path for obtaining a screenshot result; the generating module 503 is configured to generate a webpage canvas in a transparent state, and cover the webpage canvas on the page to be colored; the publishing module 504 is configured to execute obtaining a screenshot result according to the access address and publish the screenshot result to a webpage canvas; the color obtaining module 505 is configured to execute a color value obtaining instruction triggered by a user on the webpage canvas, and call a color value obtaining service of the webpage canvas according to the color value obtaining instruction to obtain a corresponding color value.
Optionally, in some embodiments, the screenshot module 501 includes: the first calling submodule is configured to execute calling of the screenshot service component so as to generate a screenshot task; a first creation submodule configured to perform creation of an initial node service; the configuration submodule is configured to execute configuration of initial node service and correlation of a target dependency library, so that a screenshot method of a target browser of a page to be subjected to color extraction is introduced into the initial node service to obtain the target node service; and the second calling sub-module is configured to execute the screenshot task of calling the target node service based on the screenshot method so as to execute screenshot processing operation on the page to be subjected to screenshot.
Optionally, in some embodiments, the configuration submodule comprises: the analysis unit is configured to execute an analysis screenshot task to obtain a corresponding task size; a determination unit configured to perform determination of a target size of a page to be colored; and the screenshot unit is configured to execute screenshot processing operation of performing screen splitting on the color page to be taken based on the task size when the task size is smaller than the target size.
Optionally, in some embodiments, the screenshot unit includes: the screenshot subunit is configured to execute screenshot processing operation starting from the top boundary of the page to be color-extracted so as to select a picture with a first screen size; the screen scrolling sub-unit is configured to execute interface screen scrolling processing on a page to be color-extracted, and repeatedly execute screen-splitting screenshot processing operation after the interface screen scrolling processing so as to select a picture with a second screen size; and the selecting subunit is configured to execute screenshot according to the selected first screen size and the second screen size to obtain a screenshot result when the picture with the second screen size comprises the bottom boundary of the page to be colored.
Optionally, in some embodiments, the generating module 503 includes: a second creation sub-module configured to perform creating a webpage canvas in a transparent state among the target browsers; the alignment submodule is configured to align the webpage canvas in the transparent state with the page to be color-extracted, and take the webpage canvas obtained through alignment as a target webpage canvas; and the covering submodule is configured to perform covering of the target webpage canvas on the page to be colored.
Optionally, in some embodiments, the interface color-taking device 50 further includes: and the sending module is configured to send the color value to the target business process.
It should be noted that, for a specific implementation of the interface color sampling apparatus, reference may be made to the specific implementation of the interface color sampling method, and details are not described here again to avoid redundancy.
The interface color taking device can achieve the purpose of color taking based on the screenshot service component and the webpage canvas, achieves the technical effects of improving the accuracy of color taking and reducing the complexity of color taking operation, can meet the requirement of color taking of a webpage, improves the use experience of a user, and is favorable for combining the color taking of the webpage with a project subsequently.
Fig. 6 is a block diagram of an electronic device according to an embodiment of the present disclosure.
As shown in fig. 6, the electronic apparatus 200 includes: a memory 210 and a processor 220, and a bus 230 connecting the various components, including the memory 210 and the processor 220.
Wherein, the memory 210 is used for storing the executable instructions of the processor 220; the processor 201 is configured to call and execute the executable instructions stored in the memory 202 to implement the interface color fetching method proposed by the above-mentioned embodiment of the present disclosure.
A program/utility 280 having a set (at least one) of program modules 270, including but not limited to an operating system, one or more application programs, other program modules, and program data, each of which or some combination thereof may comprise an implementation of a network environment, may be stored in, for example, the memory 210. The program modules 270 generally perform the functions and/or methodologies of the embodiments described in this disclosure.
The processor 220 executes various functional applications and data processing by executing programs stored in the memory 210.
It should be noted that, for the implementation process of the electronic device according to the embodiment of the present disclosure, reference is made to the foregoing explanation of the interface color extraction method according to the embodiment of the present disclosure, and details are not described here again.
The electronic equipment of the embodiment can realize color taking of the interface based on the interface canvas corresponding to the picture to be color-taken when the processor calls and executes the executable instruction stored in the memory, can automatically provide the interface color value to the project, realizes the combination of the color taking of the interface and the project, is favorable for improving the accuracy of color taking, can reduce the labor cost, and improves the use experience of users.
In order to implement the foregoing embodiments, the present disclosure also provides a storage medium, where instructions executed by a processor of an electronic device enable the electronic device to execute the interface color sampling method described above.
In order to implement the foregoing embodiments, the present disclosure also provides a computer program product, which, when executed by a processor of an electronic device, enables the electronic device to execute the interface color sampling method as described above.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.
Claims (10)
1. An interface color sampling method is characterized by comprising the following steps:
calling a screenshot service component to execute screenshot processing operation on a page to be color-taken;
receiving an access address sent by the screenshot service component, wherein the access address is used for indicating a path for acquiring a screenshot result;
generating a webpage canvas in a transparent state, and covering the webpage canvas on the page to be subjected to color extraction;
acquiring the screenshot result according to the access address, and publishing the screenshot result to the webpage canvas;
and receiving a color value acquisition instruction triggered on the webpage canvas by a user, and calling a color value acquisition service of the webpage canvas according to the color value acquisition instruction to obtain a corresponding color value.
2. The method of claim 1, wherein invoking the screenshot service component performs screenshot processing operations on a color to be taken page comprising:
calling a screenshot service component to generate a screenshot task;
creating an initial node service;
configuring the initial node service to be associated with a target dependency library so as to introduce a screenshot method of a target browser of the page to be subjected to color extraction into the initial node service to obtain a target node service;
and calling the target node service to execute the screenshot task based on the screenshot method so as to execute screenshot processing operation on the page to be color-extracted.
3. The method of claim 2, wherein the invoking the target node service executes the screenshot task based on the screenshot method to perform screenshot processing operations on the page to be rendered, comprising:
analyzing the screenshot task to obtain a corresponding task size;
determining the target size of the page to be subjected to color extraction;
and if the task size is smaller than the target size, performing screen-splitting screenshot processing operation on the page to be subjected to color extraction based on the task size.
4. The method of claim 3, wherein the screenshot processing operation of the to-be-rendered page based on the task size comprises:
the screenshot processing operation is carried out by taking the top boundary of the page to be colored as a starting point, so that a picture with a first screen size is selected;
performing interface scrolling processing on the page to be subjected to color extraction, and repeatedly executing screenshot processing operation of split screens after the interface scrolling processing so as to select a picture with a second screen size;
and if the picture of the second screen size comprises the bottom boundary of the page to be colored, screenshot according to the selected first screen size and the selected second screen size to obtain the screenshot result.
5. The method of claim 1, wherein the generating a webpage canvas in a transparent state and overlaying the webpage canvas on the page to be rendered comprises:
creating the webpage canvas in a transparent state in the target browser;
aligning the webpage canvas in the transparent state with the page to be color-extracted, and taking the webpage canvas obtained by the alignment as a target webpage canvas;
and covering the target webpage canvas on the page to be subjected to color extraction.
6. The method of any one of claims 1-5, further comprising:
and sending the color value to a target business process.
7. An interface color sampling device, comprising:
the screenshot module is configured to execute screenshot processing operation of calling a screenshot service component to a color page to be taken;
the receiving module is configured to execute receiving of an access address sent by the screenshot service component, wherein the access address is used for indicating a path for obtaining a screenshot result;
the generating module is configured to generate a webpage canvas in a transparent state and cover the webpage canvas on the page to be colored;
the publishing module is configured to execute the screenshot result obtained according to the access address and publish the screenshot result to the webpage canvas;
and the color value obtaining module is configured to execute a color value obtaining instruction triggered by a user on the webpage canvas, and call color value obtaining service of the webpage canvas according to the color value obtaining instruction to obtain a corresponding color value.
8. An electronic device, comprising:
a processor;
a memory for storing executable instructions of the processor;
wherein the processor is configured to invoke and execute the memory-stored executable instructions to implement the interface shading method of any of claims 1-6.
9. A storage medium having stored thereon a computer program, wherein the computer program, when executed by a processor, implements the interface color sampling method according to any one of claims 1 to 6.
10. A computer program product comprising computer programs/instructions, characterized in that the computer programs/instructions, when executed by a processor, implement the interface shading method according to any of claims 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110602648.6A CN113407090A (en) | 2021-05-31 | 2021-05-31 | Interface color sampling method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110602648.6A CN113407090A (en) | 2021-05-31 | 2021-05-31 | Interface color sampling method and device, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113407090A true CN113407090A (en) | 2021-09-17 |
Family
ID=77675570
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110602648.6A Pending CN113407090A (en) | 2021-05-31 | 2021-05-31 | Interface color sampling method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113407090A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007005739A2 (en) * | 2005-07-01 | 2007-01-11 | Mental Images Gmbh | Computer graphics shader systems and methods |
| CN109491744A (en) * | 2018-11-06 | 2019-03-19 | 成都知道创宇信息技术有限公司 | A kind of webpage capture system and method |
| CN110007833A (en) * | 2019-02-27 | 2019-07-12 | 深圳点猫科技有限公司 | A kind of intelligence programming implementation method and device realized terminal screen and roll screenshot |
| CN111596848A (en) * | 2020-05-09 | 2020-08-28 | 远光软件股份有限公司 | Interface color taking method, device, equipment and storage medium |
-
2021
- 2021-05-31 CN CN202110602648.6A patent/CN113407090A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2007005739A2 (en) * | 2005-07-01 | 2007-01-11 | Mental Images Gmbh | Computer graphics shader systems and methods |
| CN109491744A (en) * | 2018-11-06 | 2019-03-19 | 成都知道创宇信息技术有限公司 | A kind of webpage capture system and method |
| CN110007833A (en) * | 2019-02-27 | 2019-07-12 | 深圳点猫科技有限公司 | A kind of intelligence programming implementation method and device realized terminal screen and roll screenshot |
| CN111596848A (en) * | 2020-05-09 | 2020-08-28 | 远光软件股份有限公司 | Interface color taking method, device, equipment and storage medium |
Non-Patent Citations (3)
| Title |
|---|
| AS_PIXAR: "Android Canvas变换与操作（四）", Retrieved from the Internet <URL:http://jianshu.com/p/3737351a979f> * |
| MB6013BD7DD84A6: "用Puppeteer+Nodejs构建高效海报&截图生成服务", Retrieved from the Internet <URL:https://blog.51cto.com/u_15098009/2612792> * |
| 壹剑霜寒⼗四州: "js 利⽤ canvas 的 getImageData 做⼀个点击图⽚ 任意位置获取颜⾊", Retrieved from the Internet <URL:http://jianshu.com/p/43d3fb8280d1> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9934201B2 (en) | Image preview | |
| EP3129871B1 (en) | Generating a screenshot | |
| US20210303108A1 (en) | System and method for on-screen graphical user interface encapsulation and reproduction | |
| US9342237B2 (en) | Automated testing of gesture-based applications | |
| CN106843715B (en) | Touch support for remoted applications | |
| US9535651B2 (en) | Co-browsing systems and methods | |
| CN108829371B (en) | Interface control method and device, storage medium and electronic equipment | |
| MX2008003406A (en) | Extensible visual effects on active content in user interfaces. | |
| WO2019085598A1 (en) | Method and apparatus for calculating above-the-fold rendering duration of page, and electronic device | |
| CN105975393B (en) | Page display detection method and system | |
| CN113407086B (en) | Object dragging method, device and storage medium | |
| CN112783761A (en) | Method, device and system for testing cold start duration of application program | |
| US20220284377A1 (en) | Method and apparatus for task group positioning | |
| CN112532896A (en) | Video production method, video production device, electronic device and storage medium | |
| CN110337035B (en) | Method and device for detecting video playing quality | |
| CN110618904A (en) | Stuck detection method and device | |
| CN111309221B (en) | Page processing method, device and equipment | |
| CN113407090A (en) | Interface color sampling method and device, electronic equipment and storage medium | |
| CN113194279B (en) | Recording method of network conference, computer readable storage medium and electronic device | |
| CN111796733B (en) | Image display method, image display device and electronic equipment | |
| CN112367295B (en) | Plug-in display method and device, storage medium and electronic equipment | |
| US20120054313A1 (en) | Interpreting web application content | |
| CN114564921A (en) | Document editing method and device | |
| CN111083552A (en) | Thumbnail generation method, device, equipment and medium | |
| CN113730923A (en) | Anchor input operation sharing and displaying method and device based on live game |
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 |