CN115601567A - Page color pickup method, device, computer equipment, storage medium and product - Google Patents

Abstract

The application relates to the technical field of webpage processing, and provides a page color pickup method, a page color pickup device, computer equipment, a storage medium and a product, wherein the page color pickup method comprises the following steps: acquiring a target page, constructing a page picture of the target page, and displaying the target page covered with the page picture on a terminal, wherein the target page is a network page for picked colors; when the fact that a pointer of the terminal moves or clicks on the page picture is monitored, the pointer position of the pointer on the page picture is identified, the appointed color value of the appointed pixel corresponding to the pointer position on the page picture is obtained, and the appointed color value is displayed on the terminal. According to the method and the device, the terminal user can pick up the colors used by all the components on the target page only by moving or clicking the pointer, the picking efficiency of the page colors is improved, and the problem that the terminal runs slowly due to the fact that multiple colors are picked up on different webpages is avoided.

Description

Page color picking method, device, computer equipment, storage medium and product

technical field

The present application relates to the technical field of web page processing, in particular to a page color picking method, device, computer equipment, storage medium and product.

Background technique

In the web application quick build (low-code page building platform), the end user will set the text color of the currently configured content, the background color of the plate and other scenes to pick up the color, and then design the personalized page required by the terminal according to the picked up color , to ensure the color uniformity of the subsequent designed pages.

However, the inventors have found that the current color picking on the webpage usually needs to take a screenshot of the webpage to obtain the webpage picture, and then load the webpage picture into the image processing software for color extraction. The operation is cumbersome and the picking efficiency is low. Once the terminal needs to pick up different Multiple colors on the webpage will cause the terminal to run slowly due to frequent operations.

Contents of the invention

The present application provides a page color picking method, device, computer equipment, storage medium and product, which are used to solve the problems of cumbersome color picking operations for the current page, low picking efficiency, and slow running of the terminal.

In a first aspect, the present application provides a page color picking method, including:

Obtaining the target page and constructing a page picture of the target page, and displaying the target page covered with the page picture on the terminal, wherein the target page refers to a web page for the picked color;

When the pointer of the terminal is monitored to move or click on the page picture, identify the pointer position of the pointer on the page picture, and acquire the designation of the specified pixel corresponding to the pointer position on the page picture A color value, displaying the specified color value on the terminal.

In the above solution, the acquisition of the target page and the construction of the page picture of the target page include:

receiving the picking instruction sent by the terminal, and setting the web page currently displayed in the browser of the terminal as the target page;

Acquire the rendering tree of the target page, and set the rendering tag in the rendering tree that is consistent with the predefined picking tag as the target tag;

identifying the category of the element object in the target tag, wherein the category reflects the source of the element object;

If the category is HTML, then obtain the DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category being HTML represents the source of the element object is hypertext markup language;

If the category is CSS, then access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category being CSS represents the element object The source of is Cascading Style Sheets.

In the above solution, displaying the target page covered with the page picture on the terminal includes:

Construct the canvas tag associated with the target tag in the rendering tree, insert the DOM image or CSS image corresponding to the target tag into the canvas tag; when all the target tags in the rendering tree have been associated and inserted When the canvas tag of a DOM picture or a CSS picture is used, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag;

Sending the screenshot rendering tree to the terminal and performing rendering processing on the screenshot rendering tree, so as to display the target page covered with the DOM image and/or the CSS image on the terminal.

In the above solution, after the target page covered with the page picture is displayed on the terminal, the method further includes:

Calculating a page dominant color value reflecting the color mean value of all pixels in the page picture, and displaying the page dominant color value on the terminal.

In the above solution, after the target page covered with the page picture is displayed on the terminal, the method further includes:

When the pointer on the terminal is monitored to pull the pull-out box on the page picture, calculate the selected main color value reflecting the color mean value of all pixels in the selected box, and select the main color value of the selected box displayed on said terminal.

In the above solution, after the specified color value is displayed on the terminal, the method further includes:

enlarging the size of the specified pixel to obtain the specified enlarged pixel, and enlarging the size of the adjacent pixels located around the specified pixel on the page image to obtain the adjacent enlarged pixel, and loading the specified enlarged pixel and the adjacent enlarged pixel into the preset In the enlargement frame of the terminal, it is used to enlarge the specified pixel and the adjacent pixels.

In the above solution, after loading the designated enlarged pixel and adjacent enlarged pixels into the enlarged frame preset on the terminal to enlarge the designated pixel and the adjacent pixels, the method further includes:

calculating an enlarged color value reflecting the color mean value of the specified pixel and the adjacent pixels, and displaying the enlarged color value on the terminal.

In a second aspect, the present application provides a page color picking device, including:

The screenshot covering module is used to obtain the target page and construct the page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for being picked up;

The color picking module is used to identify the pointer position of the pointer on the page picture when the pointer of the terminal is monitored to move or click on the page picture, and obtain the position of the pointer on the page picture and the position of the pointer and displaying the specified color value on the terminal corresponding to the specified color value of the specified pixel.

In the above solution, the screenshot coverage module includes:

The target determination unit is configured to receive the picking instruction sent by the terminal, and set the web page currently displayed in the browser of the terminal as the target page;

a tag determining unit, configured to obtain a rendering tree of the target page, and set a rendering tag in the rendering tree consistent with a predefined picked tag as a target tag;

a category identification unit, configured to identify the category of the element object in the target tag, wherein the category reflects the source of the element object;

A DOM image unit, configured to acquire DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category being HTML indicates that the source of the element object is a hypertext text markup language;

A CSS picture unit, used to access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category is CSS to represent the source of the element object for Cascading Style Sheets.

In the above solution, the screenshot coverage module also includes:

a rendering tree construction unit, configured to construct a canvas tag associated with the target tag in the rendering tree, and insert a DOM image or a CSS image corresponding to the target tag into the canvas tag; when all When the target tags have been associated with the canvas tags inserted with DOM pictures or CSS pictures, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag;

A screenshot covering unit, configured to send the screenshot rendering tree to the terminal and perform rendering processing on the screenshot rendering tree, so as to display the target page covered with the DOM image and/or the CSS image on the on the terminal.

In the above scheme, the page color picking device also includes:

The page dominant color module is configured to calculate a page dominant color value reflecting the color mean value of all pixels in the page picture, and display the page dominant color value on the terminal.

In the above scheme, the page color picking device also includes:

The frame selection main color module is used to calculate the frame selection main color value reflecting the color mean value of all pixels in the pull box when the pointer on the terminal is monitored to pull the box on the page picture, and displaying the frame-selected primary color values on the terminal.

In the above scheme, the page color picking device also includes:

Enlarging and displaying module, for enlarging the size of the specified pixel to obtain the specified enlarged pixel, and enlarging the size of adjacent pixels located around the specified pixel on the page picture to obtain the adjacent enlarged pixel, and the specified enlarged pixel and the adjacent enlarged pixel The pixels are loaded into a magnification frame preset in the terminal to magnify the specified pixel and the adjacent pixels.

In the above scheme, the page color picking device also includes:

An enlargement calculation module, configured to calculate an enlarged color value reflecting the color average value of the specified pixel and the adjacent pixels, and display the enlarged color value on the terminal.

In a third aspect, the present application provides a computer device, including: a processor and a memory communicatively connected to the processor;

the memory stores computer-executable instructions;

The processor executes the computer-executable instructions stored in the memory, so as to realize the above-mentioned page color picking method.

In a fourth aspect, the present application provides a computer-readable storage medium, where computer-executable instructions are stored in the computer-readable storage medium, and when executed by a processor, the computer-readable instructions are used to implement the above page color picking method.

In a fifth aspect, the present application provides a computer program product, including a computer program, and when the computer program is executed by a processor, the above-mentioned page color picking method is implemented.

The page color picking method, device, computer equipment, storage medium and product provided in this application, by acquiring the target page and constructing the page picture of the target page, display the target page covered with the page picture on the terminal, so as to facilitate Subsequent terminals can obtain the color value in the pixel from the page picture, and at the same time, the way of overlaying the page picture on the target page makes the content and style of the target page displayed on the terminal consistent with the original target page that is not covered with a page picture , so that the terminal can perform color picking operations.

By identifying the pointer position of the pointer on the page picture, the specified color value of the specified pixel corresponding to the pointer position on the page picture is obtained, so that the terminal user can pick up the color value only by moving or clicking the pointer. The colors used by each component on the target page improve the page color picking efficiency, avoid the problem of slow operation caused by the terminal picking up multiple colors on different web pages, and benefit the end user to follow up based on the picked up colors. The color is further designed to ensure the unity of color in subsequent designs.

Description of drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description serve to explain the principles of the application.

FIG. 1 is a schematic diagram of an application scenario provided by an embodiment of the present application;

FIG. 2 is a schematic flowchart of a page color picking method provided in an embodiment of the present application;

Fig. 3 is a flow chart of Embodiment 2 of a page color picking method provided by the embodiment of the present application;

FIG. 4 is a flow chart of Embodiment 3 of a page color picking method provided by the embodiment of the present application;

FIG. 5 is a flow chart of Embodiment 4 of a page color picking method provided by the embodiment of the present application;

Fig. 6 is a schematic diagram of program modules of a page color picking device provided by the present invention;

FIG. 7 is a schematic diagram of the hardware structure of the computer device in the computer device of the present invention.

By means of the above drawings, specific embodiments of the present application have been shown, which will be described in more detail hereinafter. These drawings and text descriptions are not intended to limit the scope of the concept of the application in any way, but to illustrate the concept of the application for those skilled in the art by referring to specific embodiments.

detailed description

Reference will now be made in detail to the exemplary embodiments, examples of which are illustrated in the accompanying drawings. When the following description refers to the accompanying drawings, the same numerals in different drawings refer to the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with aspects of the present application as recited in the appended claims.

Please refer to Fig. 1, the specific application scenario of the present application is: the server 2 running the page color picking method communicates with the terminal 3, when the terminal 3 browses the web page in the browser, by sending the picking instruction to the server 2, the server 2 according to The picking instruction determines the web page currently browsed by terminal 3 as the web page whose color needs to be picked up, and sets it as the target page. Server 2 also constructs a page picture of the target page, and displays the target page covered with the page picture on terminal 3 above; when the server 2 recognizes that the pointer of the terminal 3 moves or clicks on the page picture, the server 2 recognizes the pointer position of the pointer on the page picture, and obtains the specified color value of the specified pixel corresponding to the pointer position on the page picture, and will The specified color value is displayed on terminal 3.

The data transmission method provided in this application aims to solve the above technical problems in the prior art.

The technical solution of the present application and how the technical solution of the present application solves the above technical problems will be described in detail below with specific embodiments. The following specific embodiments may be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. Embodiments of the present application will be described below in conjunction with the accompanying drawings.

Example 1:

Please refer to Figure 2, this application provides a page color picking method, including:

S201: Obtain a target page and construct a page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for the picked color.

In this step, by obtaining the target page and constructing the page picture of the target page, the target page covered with the page picture is displayed on the terminal, so that the subsequent terminal can obtain the color value in the pixel from the page picture, and at the same time The method of overlaying the page picture on the target page makes the content and style of the target page displayed on the terminal consistent with the original target page not covered with the page picture, so that the terminal can perform color picking operations.

In a preferred embodiment, the page picture includes a DOM picture and/or a CSS picture, and the acquiring the target page and constructing the page picture of the target page includes:

S11: receiving the picking instruction sent by the terminal, and setting the web page currently displayed in the browser of the terminal as the target page;

In this step, the picking instruction is triggered by a click event generated by the terminal, for example: a click event generated by the terminal by clicking the "pick up" button displayed on it, or triggered by the terminal clicking the screen twice or three times When the terminal generates a picking instruction, the web page displayed on the terminal is set as the target page.

S12: Obtain the rendering tree of the target page, and set the rendering tag in the rendering tree that is consistent with the predefined picking tag as the target tag;

In this step, the rendering tree is constructed based on the DOM tree and the CSS tree, and is used to represent the data structure of dependencies between elements. The rendering component renders the target page on the terminal through the rendering tree. Therefore, this step is based on The target page reversely obtains the rendering tree of the target page to obtain the source data of the target page by rendering, and sets the rendering tag consistent with the picked tag in the rendering tree as the target tag, so that the target page is consistent with the target The color of the part corresponding to the label can be picked, while the color of the part not corresponding to the target label will not be picked, thereby realizing the control of the color picking range of the end user and ensuring the controllability of page color management.

In this embodiment, the rendering tags of the rendering tree are html tags, and the html tags include:

1) Labels describing the title and summary information of the page: such as <title>, <meta>, etc.

2) Labels for planning webpage layout: such as <table>, <tr>, <td>, <p>, <div>, etc., whose function is to describe the layout structure of webpage content.

3) Labels describing the display features: such as <b>, <I>, <strong>, <h1>-<h6>, etc., whose function is to emphasize the key content and attract people's attention.

4) A hyperlink-related label indicates content correlation information between web pages.

5) Other tags, such as setting the tag <img> of the image, will be ignored during text extraction.

S13: Identify the category of the element object in the target tag, wherein the category reflects the source of the element object;

In this step, the source of the element object is determined by identifying the category of the element object in the target tag, wherein one source is HTML, which is called Hypertext Markup Language, and the other source is CSS, which is a cascading style sheet ( English full name: Cascading Style Sheets). The element object in the target tag records the content displayed by the target tag at a pre-planned position on the target page.

Specifically, HTML is a markup language. It includes a series of tags. Through these tags, the document format on the network can be unified, and the scattered Internet resources can be connected into a logical whole. HTML text is a descriptive text composed of HTML commands, which can explain text, graphics, animations, sounds, tables, links, etc. The rendering component renders the HTML information to obtain a DOM tree, and the element objects in the DOM tree represent each information unit in the HTML information, so the category of the target tag corresponding to the element objects is set as HTML.

CSS is a computer language used to express the style of documents such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standardized Generalized Markup Language). CSS can not only modify web pages statically, but also dynamically format web page elements with various scripting languages. CSS can precisely control the layout of element positions in web pages at the pixel level, supports almost all font sizes, and has the ability to Web page object and model style editing capabilities. The rendering component renders the CSS information to obtain a CSS tree, and the element objects in the CSS tree represent each information unit in the CSS information, so the category of the target tag corresponding to the element objects is set as CSS.

S14: If the category is HTML, obtain DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category is HTML to represent the element object The source of is Hypertext Markup Language;

In this step, for the target tag whose category is HTML, the screenshot operation is performed according to the DOM information corresponding to the target tag through the html2canvas component, and a screenshot of the part corresponding to the target tag in the target page is obtained.

S15: If the category is CSS, access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category being CSS represents the The source of the element object is the Cascading Style Sheet.

In this step, the source address corresponding to the element object in the target tag is obtained, and the source address stores the picture displayed by the element object; taking the web page carousel image as an example, the time when the picking instruction is received is taken as the picking Access the source address at time, determine the picture played by the source address at the pick-up time, and use this picture as the currently displayed picture. Therefore, this step avoids direct use by accessing the source address and extracting the currently displayed picture. The html2canvas component takes a screenshot of the target page, resulting in low pixels in the screenshot of the webpage carousel in the screenshot, and blurred or confusing images.

In a preferred embodiment, displaying the target page covered with the page picture on the terminal includes:

S16: Construct a canvas tag (canvas tag) associated with the target tag in the rendering tree, and insert the DOM image or CSS image corresponding to the target tag into the canvas tag; when all targets in the rendering tree When the tags have been associated with a canvas tag inserted with a DOM image or a CSS image, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag;

Specifically, the constructing the canvas tag associated with the target tag in the rendering tree, and inserting the DOM image or CSS image corresponding to the target tag into the canvas tag includes:

Acquiring the planned target position of the target tag on the target page, the target position characterizing the position displayed on the target page of the element object of the target tag;

Create a canvas tag in the rendering tree, use the target position as the position attribute of the canvas tag, and make an association between the target tag and the canvas tag to enable the content corresponding to the canvas tag to be able to displayed on said target location;

Inserting the DOM picture or the CSS picture corresponding to the target tag into the canvas tag, so that the DOM picture or the CSS picture can be displayed on the target position of the target page;

Adjust the rendering level of the canvas tag so that the rendering level of the canvas tag is higher than that of the target tag, so that the DOM image or CSS image corresponding to the canvas tag can cover the element corresponding to the target tag object.

Further, according to the above method, when all target tags in the rendering tree have canvas tags, and corresponding DOM pictures or CSS pictures are inserted into the canvas tags, the rendering tree is converted into a screenshot rendering tree .

S17: Send the screenshot rendering tree to the terminal and perform rendering processing on the screenshot rendering tree, so as to display the target page covered by the DOM image and/or the CSS image on the terminal .

In this step, by sending the screenshot rendering tree to the terminal, and then rendering the screenshot rendering tree through the rendering component, a target page with content consistent with the original target page but covered with DOM pictures and/or the CSS pictures will be obtained, so that Because the terminal is able to pick up the color of the pixels in the picture on the page.

S202: When it is detected that the pointer of the terminal moves or clicks on the page picture, identify the pointer position of the pointer on the page picture, and obtain a specified pixel corresponding to the pointer position on the page picture The specified color value of , and display the specified color value on the terminal.

In this step, by identifying the pointer position of the pointer on the page picture, the specified color value of the specified pixel corresponding to the pointer position on the page picture is obtained, so that the terminal user only needs to move or click the pointer to It can pick up the colors used by each component on the target page, which improves the picking efficiency of page color picking, and avoids the problem of slow running of the terminal caused by picking up multiple colors on different web pages, which is beneficial for end users to follow-up The picked colors are further designed to ensure the unity of colors in subsequent designs.

In this embodiment, the terminal can be a desktop computer, or a notebook computer, or a smart phone, or a tablet computer.

When the terminal is a desktop computer or a notebook computer, by monitoring the mouse pointer of the desktop computer or notebook to move on the page picture, identify whether the pointer of the terminal moves on the page picture, and/or by monitoring the mouse pointer The method of generating the click event on the page picture identifies whether the pointer of the terminal clicks on the page picture.

When the terminal is a smartphone or a tablet computer, by monitoring whether the user slides on the smartphone or tablet computer and generating a swipe (swipe) event, identify whether the pointer of the terminal is moving on the page, and/or monitor whether the user is in the The method of touching or tapping on the smart phone or tablet computer and generating a touch event is to identify whether the pointer of the terminal clicks on the page picture; wherein, the pointer is the position where the user contacts with the smart phone or tablet computer.

Specifically, the acquiring the specified color value of the specified pixel corresponding to the pointer position on the page picture includes:

Calling the get Image Data method to obtain the specified color value of the specified pixel, wherein the get ImageData method is a method preset in the html2canvas component for picking up the pixel color. The html2canvas component is a JavaScript class library that uses some new features of html5 and css3 to realize the function of taking screenshots of web pages on the client side. html2canvas obtains the DOM of the page and the style information of the elements, and renders it into a canvas image, so as to realize the function of screenshotting the page.

Specifically, the displaying the specified color value on the terminal includes:

display said specified color value in a dialog box preset on the terminal; or

loading the specified color value into a preset prompt box, and popping up the prompt box on the terminal to display the specified color value; or

Displaying the specified color value on the pointer in the terminal, for example: displaying the specified color value in a data display box preset around the pointer.

In this embodiment, the specified color value is an RGB value, and the RGB value is to represent each color through the change of the three color channels of red (R), green (G), and blue (B) and their mutual superposition. color standard.

Example 2:

Please refer to Figure 3, this application provides a page color picking method, including:

S301: Obtain a target page and construct a page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for the picked color.

This step is consistent with S201 in Embodiment 1.

S302: Calculating a page dominant color value reflecting an average color value of all pixels in the page picture, and displaying the page dominant color value on the terminal;

In this step, by calculating the main color value of the page reflecting the average color value of all pixels in the page picture, it is used to feed back the comprehensive situation of various colors in the page picture to the terminal, and provide a reference for the color usage ratio for the subsequent design of the terminal.

Preferably, the calculation of the main color value of the page reflecting the color mean value of all pixels in the page picture includes:

S31: Identify at least one pixel from the page image according to a preset selection rule, and set the identified pixel as a main color pixel;

S32: Acquire the color value of the primary color pixel, calculate an average value of the color value of at least one primary color pixel, and set the average value as the page primary color value.

Specifically, identify the coordinate range of the page picture in the network page through the API of canvas, extract at least one pixel within the coordinate range through the selection rule, and calculate the mean value of the color value of the at least one pixel, The mean value is set as the main color value of the page.

Wherein, the selection rules include: regular rules and/or random rules;

The number of interval rows and the number of interval columns are defined in the rule, and the pixel located in the first row and first column in the page picture is used as the starting pixel, starting from the start pixel, according to the interval row number and interval The number of columns sequentially identifies pixels in the page picture, and sets the identified pixels as primary color pixels.

The random rule means that a number n of pixel coordinates are randomly generated by a preset random coordinate generator, and the pixels corresponding to the pixel coordinates in the page picture are set as the main color pixels.

In this embodiment, the get Image Data method is used to obtain the color value of the main color pixel from the canvas tag corresponding to the page picture, and the color value of the main color pixel is an RGB value

S303: When it is detected that the pointer of the terminal moves or clicks on the page picture, identify the pointer position of the pointer on the page picture, and obtain a specified pixel corresponding to the pointer position on the page picture The specified color value of , and display the specified color value on the terminal.

This step is consistent with S202 in Embodiment 1.

Example 3:

Please refer to Figure 4, this application provides a page color picking method, including:

S401: Obtain a target page and construct a page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a web page for the picked color.

This step is consistent with S201 in Embodiment 1.

S402: When it is detected that the pointer on the terminal pulls a selection box on the page picture, calculate the main color value of the selection reflecting the average color value of all pixels in the selection box, and set the main color value of the selection box the color value is displayed on said terminal;

In this step, by calculating the frame selection main color value reflecting the comprehensive situation of the pixels in the selection box, it is used to feed back the comprehensive situation of various colors in the selection box to the terminal, and provide the color usage ratio for the subsequent design of the terminal refer to.

Preferably, the calculation reflects the selected main color value of the color mean value of all pixels in the selected box, including:

S41: Set the range corresponding to the pull-down box in the page picture as a target range, acquire at least one pixel from the target range according to preset selection rules, and set the acquired pixel as a frame selection pixel ;

S42: Acquire the color value of the frame-selected pixel, calculate an average value of the color values of at least one frame-selected pixel, and set the average value as the frame-selected main color value.

Specifically, identify the coordinate range of the page picture in the network page through the API of canvas, extract at least one pixel within the coordinate range through the selection rule, and calculate the mean value of the color value of the at least one pixel, Set the mean value as the main color value of the frame selection.

Wherein, the selection rules include: regular rules and/or random rules;

The number of interval rows and the number of interval columns are defined in the rule, and the pixel located in the first row and first column in the page picture is used as the starting pixel, starting from the start pixel, according to the interval row number and interval The number of columns sequentially identifies pixels in the page picture, and sets the identified pixels as primary color pixels.

The random rule means that a number n of pixel coordinates are randomly generated by a preset random coordinate generator, and the pixels corresponding to the pixel coordinates in the page picture are set as the main color pixels.

In this embodiment, the get Image Data method is used to obtain the color value of the main color pixel from the canvas tag corresponding to the page image, and the color value of the framed pixel is an RGB value.

S403: When it is detected that the pointer of the terminal moves or clicks on the page picture, identify the pointer position of the pointer on the page picture, and obtain a specified pixel corresponding to the pointer position on the page picture The specified color value of , and display the specified color value on the terminal.

This step is consistent with S202 in Embodiment 1.

Example 4:

Please refer to Figure 5, this application provides a page color picking method, including:

S501: Obtain a target page and construct a page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for the picked color.

This step is consistent with S201 in Embodiment 1.

S502: When it is detected that the pointer of the terminal moves or clicks on the page picture, identify the pointer position of the pointer on the page picture, and obtain a specified pixel corresponding to the pointer position on the page picture The specified color value of , and display the specified color value on the terminal.

This step is consistent with S202 in Embodiment 1.

S503: enlarge the size of the designated pixel to obtain the designated enlarged pixel, and enlarge the size of the adjacent pixels located around the designated pixel on the page picture to obtain the adjacent enlarged pixel, and load the designated enlarged pixel and the adjacent enlarged pixel into It is preset in the enlargement frame of the terminal, and is used to enlarge the designated pixel and the adjacent pixels.

In this step, the specified enlarged pixel and adjacent enlarged pixels are obtained by enlarging the size of the specified pixel and adjacent pixels, and then loaded into the magnifying frame preset in the terminal, so that the end user can observe the specified pixel corresponding to the pointer through the magnifying frame , as well as the pixels located around the specified pixel, so as to facilitate the user to identify the pixel he needs.

Preferably, enlarging the size of the specified pixel to obtain the specified enlarged pixel, and enlarging the size of adjacent pixels located around the specified pixel on the page picture to obtain the adjacent enlarged pixel include:

S51: Construct an adjacency range with the pointer position where the specified pixel is located as the center and a preset adjacency size as the radius, and set pixels within the adjacency range as the adjoining pixels;

S52: Enlarging the size of the specified pixel according to a preset magnification ratio to obtain a specified magnified pixel, and magnifying the size of the adjacent pixel according to the magnification ratio to obtain an adjacent magnified pixel, wherein the magnification ratio defines the specified pixel and the magnification ratio of the side lengths of the adjacent pixels.

In this embodiment, the adjacent size defines the range of the adjacent pixels around the specified pixel, which can be adjusted as needed; the magnification ratio defines the enlarged size of the specified pixel and adjacent pixels, which can be adjusted as needed.

S504: Calculate an enlarged color value reflecting the color average value of the specified pixel and the adjacent pixels, and display the enlarged color value on the terminal.

This step calculates the magnified color value that reflects the color average of the specified pixel and adjacent pixels, so that the end user can obtain the comprehensive information of all pixels in the magnified frame, and provide a reference for the color usage ratio for the subsequent design of the terminal.

In the technical solution of this application, the collection, storage, use, processing, transmission, provision, and disclosure of financial data or user data and other information involved are in compliance with relevant laws and regulations, and do not violate public order and good customs.

Example 5:

Please refer to FIG. 6, the present application provides a page color picking device 1, including:

The screenshot covering module 11 is used to obtain the target page and construct the page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for being picked up;

The color pick-up module 12 is used to identify the pointer position of the pointer on the page picture when the pointer of the terminal is monitored to move or click on the page picture, and obtain the position of the pointer on the page picture relative to the pointer. the specified color value of the specified pixel corresponding to the position, and display the specified color value on the terminal.

Optionally, the screenshot covering module 11 includes:

The target determination unit 111 is configured to receive the picking instruction sent by the terminal, and set the web page currently displayed in the browser of the terminal as the target page;

a label determining unit 112, configured to acquire the rendering tree of the target page, and set the rendering label in the rendering tree consistent with the predefined picking label as the target label;

A category identification unit 113, configured to identify the category of the element object in the target tag, wherein the category reflects the source of the element object;

The DOM image unit 114 is configured to acquire DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category being HTML represents that the source of the element object is Hypertext Markup Language;

The CSS picture unit 115 is used to access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category is that CSS characterizes the element object The source is Cascading Style Sheets.

Optionally, the screenshot covering module 11 also includes:

The rendering tree construction unit 116 is configured to construct a canvas tag associated with the target tag in the rendering tree, and insert a DOM image or a CSS image corresponding to the target tag into the canvas tag; When all target tags have been associated with the canvas tags inserted with DOM pictures or CSS pictures, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag;

A screenshot overlay unit 117, configured to send the screenshot rendering tree to the terminal and perform rendering processing on the screenshot rendering tree, so as to display the target page covered with the DOM image and/or the CSS image on said terminal.

Optionally, the page color picking device 1 also includes:

The page dominant color module 13 is configured to calculate a page dominant color value reflecting the average color value of all pixels in the page picture, and display the page dominant color value on the terminal.

Optionally, the page color picking device also includes:

The frame selection main color module 14 is used to calculate the frame selection main color value reflecting the color mean value of all pixels in the pull box when the pointer on the terminal is monitored to pull the box on the page picture , displaying the frame-selected dominant color value on the terminal.

Optionally, the page color picking device 1 also includes:

The enlarged display module 15 is used to enlarge the size of the designated pixel to obtain the designated enlarged pixel, and to enlarge the size of the adjacent pixel located on the periphery of the designated pixel on the page picture to obtain the adjacent enlarged pixel, and the designated enlarged pixel and the adjacent The enlarged pixels are loaded into the enlarged frame preset in the terminal, so as to enlarge the specified pixel and the adjacent pixels.

Optionally, the page color picking device 1 also includes:

The magnification calculation module 16 is configured to calculate an magnification color value reflecting the color mean value of the designated pixel and the adjacent pixels, and display the magnification color value on the terminal.

Embodiment 6:

To achieve the above object, the present application also provides a computer device 4, including: a processor and a memory connected in communication with the processor; the memory stores computer-executed instructions; the processor executes the computer-executed instructions stored in the memory. instruction to implement the page color picking method described above. Among them, the components of the page color picking device 1 can be dispersed in different computer equipment, and the computer equipment 4 can be a smart phone, a tablet computer, a notebook computer, a desktop computer, a rack server, a blade server, a tower computer, etc. server or cabinet server (including an independent server, or a server cluster composed of multiple application servers), etc. The computer device in this embodiment at least includes but is not limited to: a memory 41 and a processor 42 that can be communicatively connected to each other through a system bus, as shown in FIG. 7 . It should be noted that FIG. 7 only shows a computer device with components - but it should be understood that it is not required to implement all the components shown and more or fewer components may be implemented instead. In this embodiment, the memory 41 (that is, a readable storage medium) includes a flash memory, a hard disk, a multimedia card, a card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), Programmable Read Only Memory (PROM), Magnetic Memory, Magnetic Disk, Optical Disk, etc. In some embodiments, the memory 41 may be an internal storage unit of a computer device, such as a hard disk or internal memory of the computer device. In some other embodiments, the memory 41 can also be an external storage device of the computer device, such as a plug-in hard disk equipped on the computer device, a smart memory card (SmartMedia Card, SMC), a secure digital (Secure Digital, SD) card , Flash Card (Flash Card) and so on. Of course, the memory 41 may also include both the internal storage unit of the computer device and its external storage device. In this embodiment, the memory 41 is usually used to store the operating system and various application software installed in the computer equipment, such as the program code of the page color picking device in the third embodiment. In addition, the memory 41 can also be used to temporarily store various types of data that have been output or will be output. The processor 42 may be a central processing unit (Central Processing Unit, CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 42 is generally used to control the overall operation of the computer device. In this embodiment, the processor 42 is used to run the program codes stored in the memory 41 or process data, for example, to run the page color picking device, so as to realize the page color picking methods in the first and second embodiments.

The above-mentioned integrated modules implemented in the form of software function modules may be stored in a computer-readable storage medium. The above-mentioned software function modules are stored in a storage medium, and include several instructions to make a computer device (which may be a personal computer, server, or network device, etc.) or a processor execute some steps of the methods described in various embodiments of the present application. It should be understood that the above-mentioned processor may be a central processing unit (Central Processing Unit, referred to as CPU), and may also be other general-purpose processors, a digital signal processor (Digital Signal Processor, referred to as DSP), an application specific integrated circuit (Application Specific Integrated Circuit, referred to as ASIC) and so on. A general-purpose processor may be a microprocessor, or the processor may be any conventional processor, and the like. The steps of the method disclosed in conjunction with the application can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules in the processor. The storage may include a high-speed RAM memory, and may also include a non-volatile storage NVM, such as at least one disk storage, and may also be a U disk, a mobile hard disk, a read-only memory, a magnetic disk, or an optical disk.

To achieve the above object, the present application also provides a computer-readable storage medium, such as flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory ( SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, server, App application store, etc., on which storage The computer executes instructions, and the program realizes corresponding functions when executed by the processor 42 . The computer-readable storage medium of this embodiment is used to store computer-executed instructions for implementing the page color picking method, and when executed by the processor 42, the page color picking methods of Embodiment 1 and Embodiment 2 are realized.

The above-mentioned storage medium can be realized by any type of volatile or non-volatile storage device or their combination, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable In addition to programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. A storage media may be any available media that can be accessed by a general purpose or special purpose computer.

An exemplary storage medium is coupled to the processor such the processor can read information from, and write information to, the storage medium. Of course, the storage medium may also be a component of the processor. The processor and the storage medium may be located in application specific integrated circuits (Application Specific Integrated Circuits, ASIC for short). Of course, the processor and the storage medium can also exist in the computer device or the main control device as discrete components.

The present application provides a computer program product, including a computer program, and when the computer program is executed by a processor, the above-mentioned page color picking method is realized.

It should be noted that, in this document, the term "comprising", "comprising" or any other variation thereof is intended to cover a non-exclusive inclusion such that a process, method, article or apparatus comprising a set of elements includes not only those elements, It also includes other elements not expressly listed, or elements inherent in the process, method, article, or device. Without further limitations, an element defined by the phrase "comprising a ..." does not preclude the presence of additional identical elements in the process, method, article, or apparatus comprising that element.

Other embodiments of the present application will be readily apparent to those skilled in the art from consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any modification, use or adaptation of the application, these modifications, uses or adaptations follow the general principles of the application and include common knowledge or conventional technical means in the technical field not disclosed in the application . The specification and examples are to be considered exemplary only, with a true scope and spirit of the application indicated by the following claims.

It should be understood that the present application is not limited to the precise constructions which have been described above and shown in the accompanying drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the application is limited only by the appended claims.

Claims (17)

1. A page color picking method, characterized in that, comprising: Obtaining the target page and constructing a page picture of the target page, and displaying the target page covered with the page picture on the terminal, wherein the target page refers to a web page for the picked color; When the pointer of the terminal is monitored to move or click on the page picture, identify the pointer position of the pointer on the page picture, and acquire the designation of the specified pixel corresponding to the pointer position on the page picture A color value, displaying the specified color value on the terminal. 2. The page color picking method according to claim 1, wherein said acquiring the target page and constructing the page picture of the target page comprises: receiving the picking instruction sent by the terminal, and setting the web page currently displayed in the browser of the terminal as the target page; Acquire the rendering tree of the target page, and set the rendering tag in the rendering tree that is consistent with the predefined picking tag as the target tag; identifying the category of the element object in the target tag, wherein the category reflects the source of the element object; If the category is HTML, then obtain the DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category being HTML represents the source of the element object is hypertext markup language; If the category is CSS, then access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category being CSS represents the element object The source of is Cascading Style Sheets. 3. The page color picking method according to claim 2, wherein displaying the target page covered with the page picture on the terminal comprises: Construct the canvas tag associated with the target tag in the rendering tree, insert the DOM image or CSS image corresponding to the target tag into the canvas tag; when all the target tags in the rendering tree have been associated and inserted When the canvas tag of a DOM picture or a CSS picture is used, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag; Sending the screenshot rendering tree to the terminal and performing rendering processing on the screenshot rendering tree, so as to display the target page covered with the DOM image and/or the CSS image on the terminal. 4. The page color picking method according to claim 1, characterized in that, after displaying the target page covered with the page picture on the terminal, the method further comprises: Calculating a page dominant color value reflecting the color mean value of all pixels in the page picture, and displaying the page dominant color value on the terminal. 5. The page color picking method according to claim 1, characterized in that, after the target page covered with the page picture is displayed on the terminal, the method further comprises: When the pointer on the terminal is monitored to pull the pull-out box on the page picture, calculate the selected main color value reflecting the color mean value of all pixels in the selected box, and select the main color value of the selected box displayed on said terminal. 6. The page color picking method according to any one of claims 1-5, characterized in that, after the specified color value is displayed on the terminal, the method further comprises: enlarging the size of the specified pixel to obtain the specified enlarged pixel, and enlarging the size of the adjacent pixels located around the specified pixel on the page image to obtain the adjacent enlarged pixel, and loading the specified enlarged pixel and the adjacent enlarged pixel into the preset In the enlargement frame of the terminal, it is used to enlarge the specified pixel and the adjacent pixels. 7. The page color picking method according to any one of claims 6, characterized in that, loading the specified enlarged pixel and adjacent enlarged pixels into the enlarged frame preset in the terminal for After enlarging the designated pixel and the adjacent pixels, the method further includes: calculating an enlarged color value reflecting the color mean value of the specified pixel and the adjacent pixels, and displaying the enlarged color value on the terminal. 8. A page color picking device, characterized in that it comprises: The screenshot covering module is used to obtain the target page and construct the page picture of the target page, and display the target page covered with the page picture on the terminal, wherein the target page refers to a network page for being picked up; The color picking module is used to identify the pointer position of the pointer on the page picture when the pointer of the terminal is monitored to move or click on the page picture, and obtain the position of the pointer on the page picture and the position of the pointer and displaying the specified color value on the terminal corresponding to the specified color value of the specified pixel. 9. The page color picking device according to claim 8, wherein the screenshot covering module comprises: The target determination unit is configured to receive the picking instruction sent by the terminal, and set the web page currently displayed in the browser of the terminal as the target page; a tag determining unit, configured to obtain a rendering tree of the target page, and set a rendering tag in the rendering tree consistent with a predefined picked tag as a target tag; a category identification unit, configured to identify the category of the element object in the target tag, wherein the category reflects the source of the element object; A DOM image unit, configured to acquire DOM information corresponding to the rendering tag, and generate a DOM image corresponding to the target tag according to the DOM information, wherein the category being HTML indicates that the source of the element object is a hypertext text markup language; A CSS picture unit, used to access the source address corresponding to the element object in the target tag, and set the picture currently displayed in the source address as a CSS picture, wherein the category is CSS to represent the source of the element object for Cascading Style Sheets. 10. The page color picking device according to claim 9, wherein the screenshot covering module further comprises: a rendering tree construction unit, configured to construct a canvas tag associated with the target tag in the rendering tree, and insert a DOM image or a CSS image corresponding to the target tag into the canvas tag; when all When the target tags have been associated with the canvas tags inserted with DOM pictures or CSS pictures, the rendering tree is set as a screenshot rendering tree; wherein, the rendering level of the canvas tag is higher than the rendering level of the target tag; A screenshot covering unit, configured to send the screenshot rendering tree to the terminal and perform rendering processing on the screenshot rendering tree, so as to display the target page covered with the DOM image and/or the CSS image on the on the terminal. 11. page color pick-up device according to claim 8, is characterized in that, described page color pick-up device also comprises: The page dominant color module is configured to calculate a page dominant color value reflecting the color mean value of all pixels in the page picture, and display the page dominant color value on the terminal. 12. The page color picking device according to claim 8, characterized in that, the page color picking device further comprises: The frame selection main color module is used to calculate the frame selection main color value reflecting the color mean value of all pixels in the pull box when the pointer on the terminal is monitored to pull the box on the page picture, and displaying the frame-selected primary color values on the terminal. 13. The page color picking device according to any one of claims 8-12, wherein the page color picking device further comprises: Enlarging and displaying module, for enlarging the size of the specified pixel to obtain the specified enlarged pixel, and enlarging the size of adjacent pixels located around the specified pixel on the page picture to obtain the adjacent enlarged pixel, and the specified enlarged pixel and the adjacent enlarged pixel The pixels are loaded into a magnification frame preset in the terminal to magnify the specified pixel and the adjacent pixels. 14. The page color picking device according to any one of claims 13, characterized in that, the page color picking device further comprises: An enlargement calculation module, configured to calculate an enlarged color value reflecting the color average value of the specified pixel and the adjacent pixels, and display the enlarged color value on the terminal. 15. A computer device, comprising: a processor and a memory communicatively connected to the processor; the memory stores computer-executable instructions; The processor executes the computer-executed instructions stored in the memory, so as to realize the page color picking method according to any one of claims 1-7. 16. A computer-readable storage medium, wherein computer-executable instructions are stored in the computer-readable storage medium, and the computer-executable instructions are used to implement any one of claims 1 to 7 when executed by a processor The page color picking method described. 17. A computer program product, characterized by comprising a computer program, and when the computer program is executed by a processor, the page color picking method according to any one of claims 1-7 is implemented.

Images