WO2022105536A1 - 用于生成页面的方法和装置 - Google Patents

用于生成页面的方法和装置 Download PDF

Info

Publication number
WO2022105536A1
WO2022105536A1 PCT/CN2021/125722 CN2021125722W WO2022105536A1 WO 2022105536 A1 WO2022105536 A1 WO 2022105536A1 CN 2021125722 W CN2021125722 W CN 2021125722W WO 2022105536 A1 WO2022105536 A1 WO 2022105536A1
Authority
WO
WIPO (PCT)
Prior art keywords
color
target element
target
color information
initial
Prior art date
Application number
PCT/CN2021/125722
Other languages
English (en)
French (fr)
Inventor
周於煜
苏昊欣
赵越
Original Assignee
北京沃东天骏信息技术有限公司
北京京东世纪贸易有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 北京沃东天骏信息技术有限公司, 北京京东世纪贸易有限公司 filed Critical 北京沃东天骏信息技术有限公司
Priority to US18/037,634 priority Critical patent/US20230410380A1/en
Publication of WO2022105536A1 publication Critical patent/WO2022105536A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/103—Formatting, i.e. changing of presentation of documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/151—Transformation
    • G06F40/154—Tree transformation for tree-structured or markup documents, e.g. XSLT, XSL-FO or stylesheets

Definitions

  • the embodiments of the present disclosure relate to the field of computer technologies, in particular to the field of network technologies, and in particular, to a method and apparatus for generating a page.
  • mobile devices are more and more widely used in people's daily life, but some special groups (such as colorblind or colorblind patients) may have difficulty in identifying when using applications loaded on mobile devices.
  • barrier-free design for special groups usually includes the following forms: some specific applications provide barrier-free color matching modes for special groups, and an exclusive color scheme can be used in the application; Identify different colors; some applications have built-in picture-to-speech function modules to provide users with color information by voice.
  • Embodiments of the present disclosure propose methods and apparatuses for generating pages.
  • an embodiment of the present disclosure provides a method for generating a page, the method comprising: acquiring initial color information and size information of a target element in a viewport of an initial page; and using a first color transform based on the initial color information
  • the strategy is to generate simulated color information of the target element, and the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of the characteristic population; in response to determining that the simulated color information of the target element satisfies the preset condition, based on the initial color of the target element
  • the second color transformation strategy is used to generate the target color information of the target element, and the preset conditions represent the friendliness of the simulated color to the characteristic crowd; based on the target color information and size information, the target element is redrawn to obtain the target page.
  • the target element is determined through the steps of: asynchronously obtaining the intersection state of the element in the initial page and the viewport of the initial page by using a cross-object interface; in response to determining that the intersection ratio of the element in the initial page and the viewport of the initial page reaches a predetermined ratio Set the cross threshold to determine the element as the target element.
  • the method further includes: asynchronously acquiring simulated color information of each target element in the initial page by using a cross-object interface, and performing the following steps for each target element: comparing the simulated color information of the target element with a preset color range, determine whether the simulated color information is in the color range, and obtain the first comparison result; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, determine the simulated color information of the area where the target element and the adjacent target elements meet The difference between the difference and the preset color difference threshold is compared to determine whether the difference is less than the color difference threshold, and a second comparison result is obtained, wherein the adjacent target element is the boundary of the target element in the initial page.
  • the target element in response to the target element including a plurality of simulated color information, determine the difference between each simulated color information of the target element, and compare the difference with the color difference threshold, determine whether the difference is less than the color difference threshold, obtain The third comparison result; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target element are not all "No", it is determined that the target element meets the preset condition.
  • the initial color information and size information of the target element are obtained through the following steps: asynchronously obtaining the text object model of the initial page using a cross-object interface; extracting the cascading style sheet of the target element from the text object model; from the cascading style sheet The initial color information and size information of the target element are extracted from ; the simulated color information of the target element is obtained through the following steps: the cross-object interface is used to adjust the initial color information according to the first color transformation strategy, and the simulated color information is obtained; the target color information of the target element is obtained.
  • the target color information of the target element is generated through the following steps: based on the initial color information of the target element, determining each color component R (red, red), G (green, green), B (blue, blue) ); the target value of color component R is updated to the initial value of color component G, the target value of color component G is updated to the initial value of color component B, the target value of color component B is updated to the initial value of color component R The initial value to get the target color information of the target element.
  • an embodiment of the present disclosure provides an apparatus for generating a page, the apparatus comprising: an information acquisition unit configured to acquire initial color information and size information of a target element in a window of an initial page; a color simulation unit , is configured to use the first color transformation strategy based on the initial color information to generate simulated color information of the target element, and the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of the characteristic crowd; the color optimization unit is configured In response to determining that the simulated color information of the target element satisfies the preset condition, based on the initial color information of the target element, a second color transformation strategy is used to generate the target color information of the target element, and the preset condition represents the friendliness of the simulated color to the characteristic crowd ; The page update unit is configured to redraw the target element based on the target color information and size information to obtain the target page.
  • the apparatus further includes a target element determination unit configured to: asynchronously acquire the cross state of the element in the initial page and the viewport of the initial page by using the cross object interface; in response to determining the element in the initial page and the initial page When the intersection ratio of the window reaches the preset intersection threshold, the element is determined as the target element.
  • the apparatus further includes a color comparison unit configured to: asynchronously acquire simulated color information of each target element in the initial page by using a cross-object interface, and perform the following steps for each target element: compare the simulated color information of the target element
  • the color information and the preset color range are determined to determine whether the simulated color information is in the color range, and the first comparison result is obtained; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, the target element and the adjacent target element are determined.
  • a third comparison result is obtained; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target element are not all "No", it is determined that the target element meets the preset condition.
  • the information obtaining unit is further configured to: asynchronously obtain the text object model of the initial page using the cross-object interface; extract the cascading style sheet of the target element from the text object model; extract the cascading style sheet of the target element from the cascading style sheet initial color information and size information;
  • the color simulation unit is further configured to: use the cross-object interface to adjust the initial color information according to the first color transformation strategy to obtain simulated color information;
  • the color optimization unit is further configured to: use the cross-object interface to adjust the initial color information according to the second color transformation strategy;
  • the color transformation strategy adjusts the initial color information to obtain the target color information;
  • the page update unit is further configured to: based on the target color information and size information of the target element, adopt a text object model, update the color style of the target element, and obtain the redrawn target element.
  • the color optimization unit further includes: an initial color component acquisition module, configured to determine, based on the initial color information of the target element, each color component R (red, red), G (green, green), B ( blue, blue); the color component optimization module is configured to update the target value of the color component R to the initial value of the color component G, update the target value of the color component G to the initial value of the color component B, and update the target value of the color component G to the initial value of the color component B.
  • the target value of color component B is updated to the initial value of color component R, and the target color information of the target element is obtained.
  • the method and apparatus for generating a page acquire initial color information and size information of a target element in a window of an initial page, generate simulated color information based on the initial color information, and compare the simulated color information with the pre-defined color information. Set the conditions to determine the friendliness of the initial color of the target element to the characteristic population (colorblind or color-weak patients). If the simulated color information meets the preset conditions, the target color information is generated based on the initial color information of the target element, and based on the target color information and Size information, redraw the target element, and get the optimized target page. It can automatically redraw the color of the target element in the page presented by the browser application. On the one hand, it can reduce the difficulty of identifying each element in the page for the characteristic crowd; on the other hand, it can reduce the designer's use of color in the application development stage. limit.
  • FIG. 1 is an exemplary system architecture diagram to which some embodiments of the present disclosure may be applied;
  • FIG. 2 is a flowchart of one embodiment of a method for generating a page according to the present disclosure
  • Fig. 3 is a scene schematic diagram of the process flow of the method for generating a page shown in Fig. 2;
  • FIG. 4 is a flowchart of yet another embodiment of a method for generating a page according to the present disclosure
  • FIG. 5 is a schematic structural diagram of an embodiment of an apparatus for generating a page according to the present disclosure
  • FIG. 6 is a schematic structural diagram of an electronic device suitable for implementing embodiments of the present disclosure.
  • FIG. 1 illustrates an exemplary system architecture 100 of a method for generating a page or an apparatus for generating a page to which embodiments of the present disclosure may be applied.
  • the system architecture 100 may include terminal devices 101 , 102 , and 103 , a network 104 and a server 105 .
  • the network 104 is a medium used to provide a communication link between the terminal devices 101 , 102 , 103 and the server 105 .
  • the network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.
  • Terminal devices 101, 102, 103 are loaded with various browser applications, such as shopping applications, website client applications, stock applications, etc. With the help of browser applications, users can use terminal devices 101, 102, 103 to communicate with servers through network 104 105 interaction to receive or send messages, etc. For example, the user can enter the website address they want to visit in the browser application, the terminal device sends the access request to the server 105, and receives the HTML (Hyper Text Markup Language, hypertext) sent by the server. markup language) document, and then the browser application loaded on the terminal device parses and renders the HTML document, and presents it on the display screen of the terminal device in the form of a web page.
  • HTML Hyper Text Markup Language
  • the terminal device Before the terminal device presents the web page to the user, the terminal device can first obtain the initial color information and size information of each target element in the initial page of the web page, and then optimize and redraw the color of the target element that meets the preset conditions, and will get The target page is presented to the user.
  • the terminal devices 101, 102, and 103 may be hardware or software.
  • the terminal devices 101, 102, and 103 may be electronic devices with communication functions, including but not limited to smart phones, tablet computers, e-book readers, laptop computers, and the like.
  • the terminal devices 101, 102, and 103 are software, they can be installed in the electronic devices listed above. It can be implemented, for example, as multiple software or software modules for providing distributed services, or as a single software or software module. There is no specific limitation here.
  • the server 105 may be a server that provides various services, for example, a background web server that receives web page access requests sent by terminal devices 101, 102, and 103 and returns HTML documents indicated by the web page access requests to the terminal devices.
  • Servers can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster composed of multiple servers, or can be implemented as a single server. When the server is software, it may be implemented as multiple software or software modules for providing distributed services, or may be implemented as a single software or software module. There is no specific limitation here.
  • the method for generating a page provided by the embodiments of the present disclosure may be executed by the terminal devices 101 , 102 and 103 , and correspondingly, the apparatus for generating a page may be set in the terminal devices 101 , 102 and 103 .
  • the method for generating a page includes the following steps:
  • Step 201 Acquire initial color information and size information of a target element in a window of an initial page.
  • the window size of each browser application is usually larger than or equal to the screen size of the electronic device
  • the element in the window is the page content presented to the user by the browser
  • the target element in this embodiment is the text or picture in the window.
  • the initial color information of the target element in this embodiment includes the initial color information of each box that constitutes the target element, and correspondingly, the size information Refers to the size information of each box that constitutes the target element, such as the length and width of each box.
  • the target element may be text and the block where the text is located, then the initial color information of the target element includes the initial color of the text and the initial color of the block where the text is located (that is, the background color of the text), for example, R can be used (red, red), G (green, green), B (blue, blue) components represent color, and the size information of the target element includes the size information of the text and the size information of the block where the text is located. For example, you can Characterize the length and width of text and blocks in terms of number of pixels.
  • the electronic device on which the method for generating a page runs may directly obtain the Cascading Style Sheets (CSS) of each target element in the viewport from the HTML document of the current page, and then obtain the Cascading Style Sheets (CSS) of each target element in the viewport from the HTML document of the current page.
  • the CSS of the target element extracts the initial color information (such as the value of RGB color components) and size information of each box constituting each target element, and obtains the initial color information and size information of each target element.
  • the method for generating a page may further include: asynchronously acquiring the intersection state of the element in the initial page and the viewport of the initial page by using an intersection observe API; It is determined that the intersection ratio of the element in the initial page and the viewport of the initial page reaches a preset intersection threshold, and the element is determined as the target element.
  • the electronic device can continuously obtain the cross state of each element in the initial page and the window through the cross object model, and plays the role of monitoring the initial page, so that the target element can be determined in time and the sensitivity of the response can be improved.
  • Step 202 Based on the initial color information, a first color transformation strategy is used to generate simulated color information of the target element, and the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of characteristic people.
  • the first color transformation strategy is used to represent the corresponding relationship between the original color and the simulated color.
  • it may be a colorblindness simulation matrix.
  • the colorblindness simulation matrix may include three types of prosthetic blindness, green blindness and blue blindness. Analog matrix.
  • the colorblindness simulation matrix is a result obtained by medical research, which is common knowledge in the field, and will not be repeated in this application.
  • the electronic device may construct the initial color vector of each box based on the initial RGB component values of each box in the target element, and the initial color information of the target element is a set composed of initial color vectors of each box. After that, the electronic device multiplies each initial color vector by the three types of colorblind simulation matrices to the left to obtain three simulated color vectors corresponding to each box. Types of visual effects in the eyes of patients.
  • the simulated color information of the target element is a set of simulated color vectors of each box.
  • Step 203 in response to determining that the simulated color information of the target element satisfies a preset condition, and based on the initial color information of the target element, a second color transformation strategy is adopted to generate the target color information of the target element, and the preset condition represents the effect of the simulated color on the characteristic population. friendliness.
  • the simulated color that satisfies the preset condition indicates that the initial color corresponding to the simulated color has a low degree of friendliness to the characteristic crowd
  • the second color transformation strategy is used to represent the corresponding relationship between the initial color and the target color. Colors represent colors that are easily recognizable by characteristic groups of people.
  • the second color transformation strategy may be adaptive mapping or geometric transformation mapping.
  • the degree of friendliness of the target element to the characteristic crowd can be represented by the degree of difference between the simulated colors of each box in the target element.
  • a color difference can be used to characterize the degree of color difference, and then a color difference threshold can be preset based on the result of statistical analysis. The preset condition is that the color difference of the simulated colors between two adjacent boxes is smaller than the color difference threshold.
  • the electronic device extracts the simulated color vector of each box from the simulated color information of the target element obtained in step 202, then determines the color difference between two adjacent boxes, and then for each color difference and color difference threshold, respectively, if the color difference If it is less than the color difference threshold, it means that the initial colors of the two adjacent boxes corresponding to the color difference are less friendly to the characteristic crowd.
  • the color difference threshold can be set to 60, and the color difference less than 60 indicates that the characteristic population cannot distinguish two colors or is difficult to distinguish.
  • the electronic device can determine the color difference of two adjacent boxes through the following steps: first, convert the color information represented by the RGB color components into Lab (Lab color space) color components, and then calculate the analog color vector of the two adjacent boxes. The distance in the Lab color space, which is the color difference between the simulated colors of two adjacent boxes.
  • a target element includes 3 boxes, which are 1, 2, and 3 in descending order according to the size of the boxes.
  • the initial color information of the target element is (a, b, c), where a, b and c are the RGB initial color vectors of boxes 1, 2, and 3, respectively.
  • the electronic device multiplies a, b, and c by the three types of colorblind simulation matrices, respectively.
  • the obtained simulated color information of the target element includes the following three types Types of simulated color information: simulated color information for protonopia (a R , b R , c R ), simulated color information for deuteranopia (a G , b G , c G ), and simulated color information for blue blindness (a B , b ) B , c B ).
  • the electronic device converts the above three types of RGB color vectors into Lab color vectors, and calculates the distances in the Lab color space of the three types of analog color vectors of boxes 1 and 2, 2 and 3, respectively, to obtain adjacent Color difference between two boxes under three types: R 12 and R 23 , G 12 and G 23 , B 12 and B 23 .
  • the electronic device compares the above color difference values with the preset color difference thresholds. As long as one of the color difference values is smaller than the color difference threshold, it means that the initial color of the target element is less friendly to some or all of the characteristic crowds, and the electronic device can
  • the adaptive mapping method or the geometric transformation mapping method is used to optimize (a, b, c), and the obtained vector set (A, B, C) is the target color information of the target element.
  • the simulated color information of the target element does not meet the preset conditions, it means that the initial color of the target element has a high degree of friendliness to the characteristic crowd, and no color optimization is required.
  • Step 204 based on the target color information and size information, redraw the target element to obtain the target page.
  • the electronic device can use JS (JavaScript) to modify the CSS of the target element in the HTML document, and the target element
  • JS JavaScript
  • the color information of the target element is updated to the target color information, and the size information of the target element is kept unchanged, so that the color of the target element in the initial page can be optimized to a color that is more friendly to the characteristic population, and the page reflow will not be triggered.
  • the electronic device may also acquire the text object model of the initial page, and then, based on the target color information, set the color attributes of each box of the target element in batches through the text object model, so as to complete the redrawing of the target element.
  • FIG. 3 is another schematic diagram of the flow of the method shown in FIG. 2 .
  • the execution subject 301 is a smartphone.
  • the current page includes 4 target elements: 302, 303, 303 and 304, which are target element 1, target element 2, target element respectively 3 and target element 4, wherein 302, 303 and 303 are text elements, 304 is an image element, and each text element includes two boxes of text and block.
  • target elements 302, 303, 303 and 304, which are target element 1, target element 2, target element respectively 3 and target element 4, wherein 302, 303 and 303 are text elements, 304 is an image element, and each text element includes two boxes of text and block.
  • the execution body extracts the initial color information and size information of the above four target elements from the initial page (taking 302 as an example, the initial color information of text 1 includes the initial color information of the text and the text block The initial color information), and the first color transformation strategy is used to generate the simulated color information of each target element respectively. Then, the execution subject compares the simulated color information of each target element with the preset conditions, and determines that the initial colors of the target element 1 and the target element 3 are less friendly to the characteristic crowd.
  • the execution subject adopts the second color transformation strategy to generate the target color information of the target element 1 and the target element 3, and redraws the target element 1 and the target element 3 based on the size information and the target color information, then the final target page includes, target Element 2, target element 4 and redrawn target element 1 and redrawn target element 3.
  • the color of each element in the target page is optimized, it is more friendly to the characteristic crowd and will not cause identification obstacles to the characteristic crowd.
  • the method and apparatus for generating a page acquire initial color information and size information of a target element in a window of an initial page, generate simulated color information based on the initial color information, and compare the simulated color information with the pre-defined color information. Set the conditions to determine the friendliness of the initial color of the target element to the characteristic population (colorblind or color-weak patients). If the simulated color information meets the preset conditions, the target color information is generated based on the initial color information of the target element, and based on the target color information and Size information, redraw the target element, and get the optimized target page. It can automatically redraw the color of the target element in the page presented by the browser application. On the one hand, it can reduce the difficulty of identifying each element in the page for the characteristic crowd; on the other hand, it can reduce the designer's use of color in the application development stage. limit.
  • the method for generating a page further includes: asynchronously acquiring simulated color information of each target element in the initial page by using a cross-object interface, and performing the following steps on each target element: comparing The simulated color information of the target element and the preset color range, determine whether the simulated color information is in the color range, and obtain the first comparison result; The difference between the simulated color information of the adjacent target elements in the adjacent area, and compare the difference with the preset color difference threshold, determine whether the difference is less than the color difference threshold, and obtain a second comparison result, wherein the adjacent target elements other target elements in the initial page that are in contact with the boundary of the target element; in response to the target element including a plurality of simulated color information, determine the difference between the simulated color information of the target element, and compare the difference with the color difference threshold , determine whether the difference is less than the color difference threshold, and obtain a third comparison result; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target
  • the first comparison result indicates whether the initial color of the target element belongs to a color that is not easily recognizable by a characteristic group, such as the red line and the green line that characterize the stock trend in a stock application.
  • the color interval can be preset based on the difficulty of color recognition by colorblind patients, for example, the RGB value of red is between (255,0,0), (240,0,0) to (255,0,0)
  • the colors of the color are highly similar to red, so (240,0,0) to (255,0,0) can be determined as part of the color range, and then the other parts of the color range can be determined based on green and blue, Then you can get the complete color range. Colors in this color range are less friendly to the characteristic population.
  • the second comparison result indicates whether the color distinction of the two adjacent target elements is easy to identify by the characteristic crowd. For example, if the two borders of the image elements are connected, if the borders of the two images are red and green, the characteristic crowd is difficult to identify. these two pictures.
  • the third comparison result indicates whether the degree of distinction between multiple colors of the same target element is easy to identify by the characteristic crowd. For example, in some ticket-purchasing applications, the same seat picture uses different colors to indicate whether the seat is selected.
  • the electronic device can use the cross-object interface to obtain the simulated color information of each target element generated in step 202, and determine whether the target element meets the preset conditions through the above steps, so that the initial page can be determined more accurately Target elements that are not friendly enough to the characteristic crowd.
  • the following steps may also be used to generate the target color information: based on the initial color information of the target element, determine the color components R (red, red), G (green, green), The initial value of B (blue, blue); the target value of color component R is updated to the initial value of color component G, the target value of color component G is updated to the initial value of color component B, and the target value of color component B is updated. Update the initial value of the color component R to obtain the target color information of the target element.
  • the adaptive mapping method only adjusts the B component in the RGB component, and the final adjustment effect will lose many image color details; the geometric transformation mapping method is to compress the G component in the RGB component, which can retain more. Color details but more time consuming to process.
  • the second color transformation strategy adopted in this implementation mode can complete the transformation process from the initial color information of the target element to the target color information by exchanging the values of each color component, which can simplify the process of color optimization and improve the efficiency of color optimization .
  • the initial color information of a certain target element includes: (255, 100, 150) and (80, 255, 200) two initial color vectors.
  • the target color information of the target element can be directly obtained as: : (100, 150, 255) and (255, 200, 80).
  • the process 400 of the method for generating a page includes the following steps:
  • Step 401 asynchronously acquire the text object model of the initial page by using the cross-object interface; extract the cascading style sheet of the target element from the text object model.
  • the electronic device (for example, the terminal device in FIG. 1 ) on which the method for generating a page runs can obtain the text object model of the initial page through the cross-object interface, the elements in the initial page and the text
  • the nodes of the object model are in one-to-one correspondence, and each node includes various attribute information of the element.
  • steps 402 to 404 may be performed in the running memory of the browser that generated the initial page.
  • step 402 the initial color information and size information of the target element are extracted from the cascading style sheet.
  • Step 403 using the cross-object interface to adjust the initial color information according to the first color transformation strategy to obtain simulated color information.
  • Step 404 in response to determining that the simulated color information of the target element satisfies the preset condition, use the cross-object interface to adjust the initial color information according to the second color transformation strategy to obtain the target color information.
  • steps 403 and 404 correspond to the aforementioned steps 203 and 204, the difference is that the electronic device in this embodiment adopts the cross-object interface to asynchronously execute the color analog transformation and optimization steps, which are not used here. Repeat.
  • Step 405 based on the target color information and size information of the target element, using the text object model, update the color style of the target element to obtain the redrawn target element.
  • the electronic device can set the color styles of the target elements in batches through the text object model obtained in step 401, so as to redraw the target elements according to the target color information.
  • the process 400 of the method for generating a page in this embodiment highlights the use of the cross-object interface to asynchronously obtain the initial color information and size information of the target element, generate the simulated color information and the target color information, and use The step of redrawing the target element in the text object model.
  • the color optimization step of the target element can be completed in the running memory of the browser, which avoids occupying the running memory of the page, which can improve the generation speed of the page and avoid the page caused by color optimization. Stuck and stopped.
  • the present disclosure provides an embodiment of an apparatus for generating a page.
  • the apparatus embodiment corresponds to the method embodiment shown in FIG. 2 .
  • the device can be specifically applied to various electronic devices.
  • the apparatus 500 for generating a page in this embodiment includes: an information acquisition unit 501 configured to acquire initial color information and size information of a target element in a window of an initial page; a color simulation unit 502 configured to Based on the initial color information, the first color transformation strategy is adopted to generate the simulated color information of the target element, and the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of characteristic people; the color optimization unit 503 is configured to respond In order to determine that the simulated color information of the target element satisfies the preset condition, based on the initial color information of the target element, a second color transformation strategy is adopted to generate the target color information of the target element, and the preset condition represents the friendliness of the simulated color to the characteristic crowd; The updating unit 504 is configured to redraw the target element based on the target color information and size information to obtain the target page.
  • the apparatus 500 further includes a target element determination unit, configured to: asynchronously acquire the cross state between the element in the initial page and the viewport of the initial page by using the cross object interface; in response to determining the element in the initial page and the initial page When the intersecting ratio of the windows of the page reaches a preset intersecting threshold, the element is determined as the target element.
  • a target element determination unit configured to: asynchronously acquire the cross state between the element in the initial page and the viewport of the initial page by using the cross object interface; in response to determining the element in the initial page and the initial page When the intersecting ratio of the windows of the page reaches a preset intersecting threshold, the element is determined as the target element.
  • the apparatus 500 further includes a color comparison unit, configured to: asynchronously acquire the simulated color information of each target element in the initial page by using a cross-object interface, and perform the following steps for each target element: compare the Simulate the color information and the preset color range, determine whether the simulated color information is in the color range, and obtain the first comparison result; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, determine the target element and the adjacent target.
  • a color comparison unit configured to: asynchronously acquire the simulated color information of each target element in the initial page by using a cross-object interface, and perform the following steps for each target element: compare the Simulate the color information and the preset color range, determine whether the simulated color information is in the color range, and obtain the first comparison result; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, determine the target element and the adjacent target.
  • the difference value between the simulated color information in the area where the elements are connected and compare the difference value with the preset color difference threshold value, determine whether the difference value is smaller than the color difference threshold value, and obtain a second comparison result, wherein the adjacent target element is the initial page
  • the target element including a plurality of simulated color information determine the difference between each simulated color information of the target element, and compare the difference with the color difference threshold to determine the Whether the difference is smaller than the color difference threshold, a third comparison result is obtained; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target element are not all "No", it is determined that the target element meets the preset condition.
  • the information obtaining unit 501 is further configured to: asynchronously obtain the text object model of the initial page by using the cross-object interface; extract the cascading style sheet of the target element from the text object model; extract the target element from the cascading style sheet the initial color information and size information;
  • the color simulation unit is further configured to: use the cross-object interface to adjust the initial color information according to the first color transformation strategy to obtain simulated color information;
  • the color optimization unit is further configured to: use the cross-object interface to adjust the initial color information according to the first color transformation strategy;
  • the second color transformation strategy adjusts the initial color information to obtain the target color information;
  • the page update unit is further configured to: based on the target color information and size information of the target element, adopt a text object model, update the color style of the target element, and obtain redrawing after the target element.
  • the color optimization unit 503 further includes: an initial color component acquisition module, configured to determine each color component R (red, red), G (green, green), B based on the initial color information of the target element The initial value of (blue, blue); the color component optimization module is configured to update the target value of the color component R to the initial value of the color component G, and update the target value of the color component G to the initial value of the color component B, Update the target value of the color component B to the initial value of the color component R to obtain the target color information of the target element.
  • an initial color component acquisition module configured to determine each color component R (red, red), G (green, green), B based on the initial color information of the target element The initial value of (blue, blue); the color component optimization module is configured to update the target value of the color component R to the initial value of the color component G, and update the target value of the color component G to the initial value of the color component B, Update the target value of the color component B to the initial value of the color component R to obtain the target color information of the target
  • FIG. 6 it shows a schematic structural diagram of an electronic device (eg, the server or terminal device in FIG. 1 ) 600 suitable for implementing the embodiments of the present disclosure.
  • Terminal devices in the embodiments of the present disclosure may include, but are not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Tablet Computers), etc., as well as mobile terminals such as digital TVs, desktop computers, etc. etc. fixed terminal.
  • the terminal device shown in FIG. 6 is only an example, and should not impose any limitation on the function and scope of use of the embodiments of the present disclosure.
  • an electronic device 600 may include a processing device (eg, a central processing unit, a graphics processor, etc.) 601 that may be loaded into random access according to a program stored in a read only memory (ROM) 602 or from a storage device 608 Various appropriate actions and processes are executed by the programs in the memory (RAM) 603 . In the RAM 603, various programs and data required for the operation of the electronic device 600 are also stored.
  • the processing device 601, the ROM 602, and the RAM 603 are connected to each other through a bus 604.
  • An input/output (I/O) interface 605 is also connected to bus 604 .
  • I/O interface 605 input devices 606 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD), speakers, vibration An output device 607 of a computer, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609.
  • Communication means 609 may allow electronic device 600 to communicate wirelessly or by wire with other devices to exchange data. While FIG. 6 shows electronic device 600 having various means, it should be understood that not all of the illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided. Each block shown in FIG. 6 may represent one device, or may represent multiple devices as required.
  • embodiments of the present disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the method illustrated in the flowchart.
  • the computer program may be downloaded and installed from the network via the communication device 609, or from the storage device 608, or from the ROM 602.
  • the processing device 601 When the computer program is executed by the processing device 601, the above-described functions defined in the methods of the embodiments of the present disclosure are performed.
  • the computer-readable medium described in the embodiments of the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the above two.
  • the computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus or device, or a combination of any of the above. More specific examples of computer readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer disks, hard disks, random access memory (RAM), read only memory (ROM), erasable Programmable read only memory (EPROM or flash memory), fiber optics, portable compact disk read only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.
  • a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
  • a computer-readable signal medium may include a data signal in baseband or propagated as part of a carrier wave, carrying computer-readable program code therein. Such propagated data signals may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
  • a computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport the program for use by or in connection with the instruction execution system, apparatus, or device .
  • Program code embodied on a computer readable medium may be transmitted using any suitable medium including, but not limited to, electrical wire, optical fiber cable, RF (radio frequency), etc., or any suitable combination of the foregoing.
  • the above-mentioned computer-readable medium may be included in the above-mentioned electronic device; or may exist alone without being assembled into the electronic device.
  • the above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by the electronic device, the electronic device: obtains the initial color information and size information of the target element in the window of the initial page; For color information, the first color transformation strategy is used to generate simulated color information of the target element, and the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of the characteristic population; in response to determining that the simulated color information of the target element satisfies the preset Condition, based on the initial color information of the target element, the second color transformation strategy is used to generate the target color information of the target element, and the preset condition represents the friendliness of the simulated color to the characteristic crowd; based on the target color information and size information, the target element is redrawn , get the target page
  • Computer program code for carrying out operations of embodiments of the present disclosure may be written in one or more programming languages, including object-oriented programming languages—such as Java, Smalltalk, C++, or a combination thereof, Also included are conventional procedural programming languages - such as the "C" language or similar programming languages.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer, or entirely on the remote computer or server.
  • the remote computer may be connected to the user's computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (eg, using an Internet service provider to via Internet connection).
  • LAN local area network
  • WAN wide area network
  • each block in the flowchart or block diagrams may represent a module, segment, or portion of code that contains one or more logical functions for implementing the specified functions executable instructions.
  • the functions noted in the blocks may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved.
  • each block of the block diagrams and/or flowchart illustrations, and combinations of blocks in the block diagrams and/or flowchart illustrations can be implemented in dedicated hardware-based systems that perform the specified functions or operations , or can be implemented in a combination of dedicated hardware and computer instructions.
  • the units involved in the embodiments of the present disclosure may be implemented in software or hardware.
  • the described unit can also be provided in the processor, for example, it can be described as: a processor includes an information acquisition unit, a color simulation unit, a color optimization unit and a page update unit. Among them, the names of these units do not constitute a limitation of the unit itself under certain circumstances.
  • the information acquisition unit can also be described as "a unit that acquires the initial color information and size information of the target element in the window of the initial page" .

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Data Mining & Analysis (AREA)
  • Image Processing (AREA)

Abstract

一种用于生成页面的方法和装置。该方法包括：获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息(201)；基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息(202)，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果；响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生成目标元素的目标色彩信息(203)，预设条件表征模拟色彩对特征人群的友好程度；基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面(204)。上述方法自动对浏览器应用的页面中的目标元素的色彩进行重绘，可以降低特征人群的辨识难度和设计人员的色彩使用限制。

Description

用于生成页面的方法和装置
交叉引用
本专利申请要求于2020年11月18日提交的、申请号为202011290395.5、发明名称为“用于生成页面的方法和装置”的中国专利申请的优先权，该申请的全文以引用的方式并入本申请中。
技术领域
本公开的实施例涉及计算机技术领域，具体涉及网络技术领域，尤其涉及一种用于生成页面的方法和装置。
背景技术
目前，移动设备在人们的日常生活中的应用越来越广泛，但是一些特殊人群(例如色盲或色弱患者)在使用移动设备上装载的应用时会存在辨识障碍。
相关技术中，针对特殊人群的无障碍设计通常包括以下几种形式：某些特定的应用为特殊人群提供无障碍配色模式，可以在该应用中采用专属的配色方案；还有一些应用中以图形标识不同色彩；再有一些应用中内嵌有图片转语音的功能模块，以语音向用户提供色彩信息。
发明内容
本公开的实施例提出了用于生成页面的方法和装置。
第一方面，本公开的实施例提供了一种用于生成页面的方法，该方法包括：获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果；响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生 成目标元素的目标色彩信息，预设条件表征模拟色彩对特征人群的友好程度；基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面。
在一些实施例中，目标元素经由如下步骤确定：采用交叉对象接口异步获取初始页面中的元素与初始页面的视窗的交叉状态；响应于确定初始页面中的元素与初始页面视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
在一些实施例中，该方法还包括：采用交叉对象接口异步获取初始页面中各目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：对比目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于色彩区间，得到第一对比结果；基于目标元素的模拟色彩信息与相邻目标元素的模拟色彩信息，确定目标元素与相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于色差阈值，得到第二对比结果，其中，相邻目标元素为初始页面中与该目标元素的边界相接的其他目标元素；响应于目标元素包括多个模拟色彩信息，确定目标元素的各模拟色彩信息之间的差值，并对比该差值与色差阈值，确定该差值是否小于色差阈值，得到第三对比结果；响应于确定目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定目标元素符合预设条件。
在一些实施例中，目标元素的初始色彩信息和尺寸信息经由如下步骤获取：采用交叉对象接口异步获取初始页面的文本对象模型；从文本对象模型中提取目标元素的层叠样式表；从层叠样式表中提取出目标元素的初始色彩信息和尺寸信息；目标元素的模拟色彩信息经由如下步骤获取：采用交叉对象接口按照第一色彩变换策略调整初始色彩信息，得到模拟色彩信息；目标元素的目标色彩信息经由如下步骤生成：采用交叉对象接口按照第二色彩变换策略调整初始色彩信息，得到目标色彩信息；以及，基于目标色彩信息和尺寸信息，重绘目标元素，包括：基于目标元素的目标色彩信息和尺寸信息，采用文本对象模型，更新目标元素的色彩样式，得到重绘后的目标元素。
在一些实施例中，目标元素的目标色彩信息经由如下步骤生成：基于目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；将色彩分量R的目标数值更新为色彩分量G的初始数值，将色彩分量G的目标数值更新为色彩分量B的初始数值，将色彩分量B的目标数值更新为色彩分量R的初始数值，得到目标元素的目标色彩信息。
第二方面，本公开的实施例提供了一种用于生成页面的装置，该装置包括：信息获取单元，被配置成获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；色彩模拟单元，被配置成基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果；色彩优化单元，被配置成响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生成目标元素的目标色彩信息，预设条件表征模拟色彩对特征人群的友好程度；页面更新单元，被配置成基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面。
在一些实施例中，该装置还包括目标元素确定单元，被配置成：采用交叉对象接口异步获取初始页面中的元素与初始页面的视窗的交叉状态；响应于确定初始页面中的元素与初始页面视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
在一些实施例中，该装置还包括色彩对比单元，被配置成：采用交叉对象接口异步获取初始页面中各目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：对比目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于色彩区间，得到第一对比结果；基于目标元素的模拟色彩信息与相邻目标元素的模拟色彩信息，确定目标元素与相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于色差阈值，得到第二对比结果，其中，相邻目标元素为初始页面中与该目标元素的边界相接的其他目标元素；响应于目标元素包括多个模拟色彩信息，确定目标元素的各模拟色彩信息之间的差值，并对比该差值与色差阈 值，确定该差值是否小于色差阈值，得到第三对比结果；响应于确定目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定目标元素符合预设条件。
在一些实施例中，信息获取单元被进一步配置成：采用交叉对象接口异步获取初始页面的文本对象模型；从文本对象模型中提取目标元素的层叠样式表；从层叠样式表中提取出目标元素的初始色彩信息和尺寸信息；色彩模拟单元被进一步配置成：采用交叉对象接口按照第一色彩变换策略调整初始色彩信息，得到模拟色彩信息；色彩优化单元被进一步配置成：采用交叉对象接口按照第二色彩变换策略调整初始色彩信息，得到目标色彩信息；以及，页面更新单元被进一步配置成：基于目标元素的目标色彩信息和尺寸信息，采用文本对象模型，更新目标元素的色彩样式，得到重绘后的目标元素。
在一些实施例中，色彩优化单元进一步包括：初始色彩分量获取模块，被配置成基于目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；色彩分量优化模块，被配置成将色彩分量R的目标数值更新为色彩分量G的初始数值，将色彩分量G的目标数值更新为色彩分量B的初始数值，将色彩分量B的目标数值更新为色彩分量R的初始数值，得到目标元素的目标色彩信息。
本公开的实施例提供的用于生成页面的方法和装置，获取初始页面的视窗内的目标元素的初始色彩信息和尺寸信息，并基于初始色彩信息生成模拟色彩信息，通过对比模拟色彩信息与预设条件，确定目标元素的初始色彩对特征人群(色盲或色弱患者)的友好程度，若模拟色彩信息满足预设条件，则基于目标元素的初始色彩信息生成目标色彩信息，并基于目标色彩信息和尺寸信息，重绘目标元素，得到优化后的目标页面。可以自动对浏览器应用呈现的页面中的目标元素的色彩进行重绘，一方面，可以降低特征人群对于页面中各元素的辨识难度；另一方面，可以降低设计人员在应用开发阶段的色彩使用限制。
附图说明
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本公开的其它特征、目的和优点将会变得更明显：
图1是本公开的一些实施例可以应用于其中的示例性系统架构图；
图2是根据本公开的用于生成页面的方法的一个实施例的流程图；
图3是图2所示的用于生成页面的方法的流程的一个场景示意图；
图4是根据本公开的用于生成页面的方法的又一个实施例的流程图；
图5是根据本公开的用于生成页面的装置的一个实施例的结构示意图；
图6是适于用来实现本公开的实施例的电子设备的结构示意图。
具体实施方式
下面结合附图和实施例对本公开作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与有关发明相关的部分。
需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。
图1示出了可以应用本公开的实施例的用于生成页面的方法或用于生成页面的装置的示例性系统架构100。
如图1所示，系统架构100可以包括终端设备101、102、103，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。
终端设备101、102、103装载有各种浏览器应用，例如购物应用、网站客户端应用、股票类应用等等，借助浏览器应用，用户可以使用终端设备101、102、103通过网络104与服务器105交互，以接收或发送消息等，例如用户可以在浏览器应用中输入想要访问的网址，由终端设备将访问请求发送至服务器105，并接收服务器发送的HTML (Hyper Text Markup Language，超文本标记语言)文档，然后由终端设备上装载的浏览器应用对HTML文档解析、渲染后，以网页的形式呈现于终端设备的显示屏上。在终端设备将网页呈现给用户之前，终端设备可以先获取网页的初始页面中各目标元素的初始色彩信息和尺寸信息，然后对满足预设条件的目标元素的色彩进行优化、重绘，将得到的目标页面呈现给用户。
终端设备101、102、103可以是硬件，也可以是软件。当终端设备101、102、103为硬件时，可以是具备通信功能的电子设备，包括但不限于智能手机、平板电脑、电子书阅读器和膝上型便携计算机等等。当终端设备101、102、103为软件时，可以安装在上述所列举的电子设备中。其可以实现成例如用来提供分布式服务的多个软件或软件模块，也可以实现成单个软件或软件模块。在此不做具体限定。
服务器105可以是提供各种服务的服务器，例如接收终端设备101、102、103发送的网页访问请求并将该网页访问请求所指示的HTML文档返回终端设备的后台网络服务器。服务器可以是硬件，也可以是软件。当服务器为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器为软件时，可以实现成例如用来提供分布式服务的多个软件或软件模块，也可以实现成单个软件或软件模块。在此不做具体限定。
需要说明的是，本公开的实施例所提供的用于生成页面的方法可以由终端设备101、102、103执行，相应地，用于生成页面的装置可以设置于终端设备101、102、103中。
继续参考图2，示出了根据本公开的用于生成页面的方法的一个实施例的流程200。该用于生成页面的方法，包括以下步骤：
步骤201，获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息。
在本实施例中，用于生成页面的方法运行于其上的电子设备(例如图1中所述的终端设备)上装载有各种浏览器应用程序，每个浏览器应用的视窗尺寸通常大于或等于电子设备的屏幕尺寸，位于视窗中的元素即为该浏览器呈现给用户的页面内容，本实施例中的目标元素 即为处于视窗中的文本或图片。通常，页面中的元素都是由多个大小不同的盒子模型构成的，因此，本实施例中的目标元素的初始色彩信息包括构成该目标元素的各个盒子的初始色彩信息，相应地，尺寸信息是指构成该目标元素的各个盒子的尺寸信息，例如可以是各个盒子的长度和宽度。
作为示例，目标元素可以为文本以及该文本所在的区块，则该目标元素的初始色彩信息包括文本的初始色彩和文本所在的区块的初始色彩(即文本的背景色彩)，例如可以采用R(red，红色)、G(green，绿色)、B(blue，蓝色)分量的形式表征色彩，该目标元素的尺寸信息则包括文本的尺寸信息和文本所在的区块的尺寸信息，例如可以采用像素数量的形式表征文本和区块的长度和宽度。
在一个具体的示例中，用于生成页面的方法运行于其上的电子设备可以直接从当前页面的HTML文档中获取视窗中各目标元素的层叠样式表(Cascading Style Sheets，CSS)，然后从各目标元素的CSS中提取出构成各目标元素的各个盒子的初始色彩信息(例如RGB色彩分量的数值)和各个盒子的尺寸信息，得到每个目标元素的初始色彩信息和尺寸信息。
在本实施例的一些可选的实现方式中，用于生成页面的方法还可以包括：采用交叉对象接口(intersection observe API)异步获取初始页面中的元素与初始页面的视窗的交叉状态；响应于确定初始页面中的元素与初始页面的视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
在本实现方式中，电子设备可以通过交叉对象模型持续获取初始页面中各元素与视窗的交叉状态，起到监听初始页面的作用，如此可以及时确定目标元素，提高反应的灵敏性。
步骤202，基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果。
在本实施例中，第一色彩变换策略用于表征初始色彩与模拟色彩之间的对应关系，例如可以是色盲模拟矩阵，通常色盲模拟矩阵可以 包括红色盲、绿色盲和蓝色盲三种类型的模拟矩阵。色盲模拟矩阵为医学研究得到的结果，为本领域的公知常识，本申请对此不再赘述。
电子设备可以基于目标元素中各个盒子的初始RGB分量数值构建各个盒子的初始色彩向量，则目标元素的初始色彩信息为各个盒子的初始色彩向量组成的集合。之后电子设备将每个初始色彩向量分别左乘三种类型的色盲模拟矩阵，即可得到每个盒子对应的三个模拟色彩向量，每个模拟色彩向量分别表征该盒子的初始色彩在对应的色盲类型患者眼中的视觉效果。该目标元素的模拟色彩信息即为各盒子的各模拟色彩向量组成的集合。
步骤203，响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生成目标元素的目标色彩信息，预设条件表征模拟色彩对特征人群的友好程度。
在本实施例中，满足预设条件的模拟色彩表示该模拟色彩对应的初始色彩对特征人群的友好度较低，第二色彩变换策略用于表征初始色彩与目标色彩之间的对应关系，目标色彩则表示特征人群易于辨识的颜色。例如，第二色彩变换策略可以为自适应映射法或几何变换映射法。
在本实施例中，可以通过目标元素中各个盒子的模拟色彩的区别程度表征目标元素对特征人群的友好程度。例如可以以色差表征色彩区别程度，然后基于统计分析的结果预设色差阈值，则预设条件为相邻两个盒子之间的模拟色彩的色差小于色差阈值。
作为示例，电子设备从步骤202中得到的目标元素的模拟色彩信息中提取出各个盒子的模拟色彩向量，然后确定相邻两个盒子之间的色差，再分别对于各个色差与色差阈值，若色差小于色差阈值，则表示该色差对应的两个相邻的盒子的初始色彩对特征人群的友好度较低。例如根据医学研究成果，可以将色差阈值设定为60，色差小于60表示特征人群不能分辨出两种颜色或分辨较为困难。
进一步地，电子设备可以通过如下步骤确定相邻两个盒子的色差：首先，将RGB色彩分量表征的色彩信息转化为Lab(Lab color space)色彩分量，然后计算相邻两个盒子的模拟色彩向量在Lab色彩空间中 的距离，该距离即为相邻两个盒子的模拟色彩的色差。
在一个具体的示例中，某个目标元素包括3个盒子，按照盒子的尺寸由大到小依次为1、2和3，目标元素的初始色彩信息为(a，b，c)，其中a、b、c分别为盒子1、2、3的RGB初始色彩向量，首先，电子设备分别将a、b、c左乘三种类型的色盲模拟矩阵，得到的目标元素的模拟色彩信息包括以下三种类型的模拟色彩信息：红色盲的模拟色彩信息(a R、b R、c R)、绿色盲的模拟色彩信息(a G、b G、c G)以及蓝色盲模拟色彩信息(a B、b B、c B)。然后电子设备将以上三种类型的RGB色彩向量转化为Lab色彩向量，并分别计算盒子1和2、2和3的三种类型的模拟色彩向量在Lab色彩空间中的距离，即可得到相邻两个盒子在三种类型下的色差：R 12和R 23，G 12和G 23，B 12和B 23。之后，电子设备分别将以上色差数值与预设的色差阈值对比，只要其中有一个色差数值小于色差阈值，则表示该目标元素的初始色彩对部分或全部特征人群的友好度较低，电子设备可以采用自适应映射法或几何变换映射法对(a，b，c)进行优化处理，得到的向量集合(A，B，C)即为该目标元素的目标色彩信息。
可以理解的是，若目标元素的模拟色彩信息不满足预设条件，表示该目标元素的初始色彩对特征人群的友好度较高，则不需要进行色彩优化。
步骤204，基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面。
在本实施例中，基于步骤201中得到的目标元素的尺寸信息以及步骤203中得到的目标元素的目标色彩信息，电子设备可以采用JS(JavaScript)修改HTML文档中目标元素的CSS，将目标元素的色彩信息更新为目标色彩信息，并保持目标元素的尺寸信息不变，如此可以将初始页面中目标元素的色彩优化为对特征人群更友好的色彩，并且不会触发页面重排。
作为示例，电子设备还可以获取初始页面的文本对象模型，然后基于目标色彩信息，通过文本对象模型对目标元素的各个盒子的色彩属性进行批量设置，完成目标元素的重绘。
继续参见图3，图3是如2所示方法的流程另一个示意图。在图3中，执行主体301为智能手机，如图3(a)所示，当前页面中包括4个目标元素：302、303、303和304，分别为目标元素1、目标元素2、目标元素3和目标元素4，其中302、303和303为文本元素，304为图像元素，每个文本元素均包括文本和区块两个盒子。接着参考图3(b)，执行主体从初始页面中提取出以上4个目标元素的初始色彩信息和尺寸信息(以302为例，文本1的初始色彩信息包括文本的初始色彩信息和文本区块的初始色彩信息)，并采用第一色彩变换策略分别生成各个目标元素的模拟色彩信息。然后执行主体将各个目标元素的模拟色彩信息分别与预设条件对比，从中确定出目标元素1和目标元素3的初始色彩对特征人群的友好度较低。之后执行主体采用第二色彩变换策略生成目标元素1和目标元素3的目标色彩信息，并基于尺寸信息和目标色彩信息重绘目标元素1和目标元素3，则最终得到的目标页面中包括、目标元素2、目标元素4和重绘后的目标元素1以及重绘后的目标元素3。最后参考图3(c)，目标页面中各元素的色彩经优化后，对特征人群的友好度更高，不会对特征人群造成辨识障碍。
本公开的实施例提供的用于生成页面的方法和装置，获取初始页面的视窗内的目标元素的初始色彩信息和尺寸信息，并基于初始色彩信息生成模拟色彩信息，通过对比模拟色彩信息与预设条件，确定目标元素的初始色彩对特征人群(色盲或色弱患者)的友好程度，若模拟色彩信息满足预设条件，则基于目标元素的初始色彩信息生成目标色彩信息，并基于目标色彩信息和尺寸信息，重绘目标元素，得到优化后的目标页面。可以自动对浏览器应用呈现的页面中的目标元素的色彩进行重绘，一方面，可以降低特征人群对于页面中各元素的辨识难度；另一方面，可以降低设计人员在应用开发阶段的色彩使用限制。
在本实施例的一些可选的实现方式中，用于生成页面的方法还包括：采用交叉对象接口异步获取初始页面中各目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：对比目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于色彩区间，得到第一对比结果；基于目标元素的模拟色彩信息与相邻目标元素的模拟色 彩信息，确定目标元素与相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于色差阈值，得到第二对比结果，其中，相邻目标元素为初始页面中与该目标元素的边界相接的其他目标元素；响应于目标元素包括多个模拟色彩信息，确定目标元素的各模拟色彩信息之间的差值，并对比该差值与色差阈值，确定该差值是否小于色差阈值，得到第三对比结果；响应于确定目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定目标元素符合预设条件。
在本实现方式中，第一对比结果表征目标元素的初始色彩是否属于特征人群不易辨识的颜色，例如股票类应用中表征股票走势的红线和绿线。作为示例，可以基于色盲患者对色彩的辨识难度预先设定色彩区间，例如，红色的RGB数值为(255,0,0)，(240,0,0)到(255,0,0)之间的色彩均与红色的相似度较高，因而可将(240,0,0)到(255,0,0)确定为色彩区间的一部分，然后再基于绿色和蓝色确定色彩区间的其他部分，则可以得到完整的色彩区间。位于该色彩区间中的色彩表示对特征人群的友好度较低。
第二对比结果表征相邻的两个目标元素的色彩区别度是否易于特征人群辨识，例如两个边界相接的图片元素，若两个图片的边界处采用红色和绿色，则特征人群难以辨识出这两个图片。
第三对比结果表征同一个目标元素的多个色彩之间的区别度是否易于特征人群辨识，例如，在某些购票类应用中，同一个座椅图片采用不同颜色表征该座位是否被选中。
在本实现方式中，电子设备可以采用交叉对象接口获取步骤202中生成的各目标元素的模拟色彩信息，并通过以上步骤确定目标元素是否符合预设条件，如此，可以更精确地确定出初始页面中对特征人群不够友好的目标元素。
在本实施例的一些可选的实现方式中，还可以采用如下步骤生成目标色彩信息：基于目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；将色彩分量R的目标数值更新为色彩分量G的初始数值，将色彩分量G 的目标数值更新为色彩分量B的初始数值，将色彩分量B的目标数值更新为色彩分量R的初始数值，得到目标元素的目标色彩信息。
可实现色彩变换的各个方法中，适应映射法仅调整了RGB分量中的B分量，最终调整效果会丢失许多图像色彩细节；几何变换映射法则是压缩RGB分量中的G分量，能保留更多的颜色细节但处理起来更为耗时。
本实现方式中采用的第二色彩变换策略，可以通过调换各个色彩分量的数值，完成由目标元素的初始色彩信息向目标色彩信息的变换过程，如此可以简化色彩优化的过程，提高色彩优化的效率。
作为示例，某个目标元素的初始色彩信息包括：(255，100，150)和(80，255，200)两个初始色彩向量，采用本实现方式，可以直接得到该目标元素的目标色彩信息为：(100,150，255)和(255,200,80)。
进一步参考图4，其示出了用于生成页面的方法的又一个实施例的流程400。该用于生成页面的方法的流程400，包括以下步骤：
步骤401，采用交叉对象接口异步获取初始页面的文本对象模型；从文本对象模型中提取目标元素的层叠样式表。
在本实施例中，用于生成页面的方法运行于其上的电子设备(例如可以是图1中的终端设备)可以通过交叉对象接口获取初始页面的文本对象模型，初始页面中的元素与文本对象模型的节点一一对应，每个节点中均包括元素的各种属性信息。电子设备采用交叉对象模型获取初始页面的文本对象模型之后，可以在生成该初始页面的浏览器的运行内存中执行步骤402至步骤404。
步骤402，从层叠样式表中提取出目标元素的初始色彩信息和尺寸信息。
步骤403，采用交叉对象接口按照第一色彩变换策略调整初始色彩信息，得到模拟色彩信息。
步骤404，响应于确定目标元素的模拟色彩信息满足预设条件，采用交叉对象接口按照第二色彩变换策略调整初始色彩信息，得到目标色彩信息。
需要说明的是，步骤403和步骤404与前述步骤203和步骤204 相对应，不同之处在于本实施例中的电子设备采用的是交叉对象接口异步执行色彩的模拟变换和优化步骤，此处不再赘述。
步骤405，基于目标元素的目标色彩信息和尺寸信息，采用文本对象模型，更新目标元素的色彩样式，得到重绘后的目标元素。
在本实施例中，电子设备可以通过步骤401中获取的文本对象模型，对目标元素的色彩样式进行批量设置，以根据目标色彩信息重绘目标元素。
从图4中可以看出，本实施例中的用于生成页面的方法的流程400突出了采用交叉对象接口异步获取目标元素的初始色彩信息和尺寸信息、生成模拟色彩信息和目标色彩信息以及采用文本对象模型重绘目标元素的步骤，如此，可以在浏览器的运行内存中完成目标元素的色彩优化步骤，避免了占用页面的运行内存，可以提高页面的生成速度，避免因色彩优化导致的页面卡顿。
需要说明书的是，上述关于预设条件的对比方法和目标色彩的生成方法同样可以应用于图4所示的实施例中。
进一步参考图5，作为对上述各图所示方法的实现，本公开提供了一种用于生成页面的装置的一个实施例，该装置实施例与图2所示的方法实施例相对应，该装置具体可以应用于各种电子设备中。
如图5所示，本实施例的用于生成页面的装置500包括：信息获取单元501，被配置成获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；色彩模拟单元502，被配置成基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果；色彩优化单元503，被配置成响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生成目标元素的目标色彩信息，预设条件表征模拟色彩对特征人群的友好程度；页面更新单元504，被配置成基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面。
在一些实施例中，该装置500还包括目标元素确定单元，被配置成：采用交叉对象接口异步获取初始页面中的元素与初始页面的视窗 的交叉状态；响应于确定初始页面中的元素与初始页面的视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
在一些实施例中，该装置500还包括色彩对比单元，被配置成：采用交叉对象接口异步获取初始页面中各目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：对比目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于色彩区间，得到第一对比结果；基于目标元素的模拟色彩信息与相邻目标元素的模拟色彩信息，确定目标元素与相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于色差阈值，得到第二对比结果，其中，相邻目标元素为初始页面中与该目标元素的边界相接的其他目标元素；响应于目标元素包括多个模拟色彩信息，确定目标元素的各模拟色彩信息之间的差值，并对比该差值与色差阈值，确定该差值是否小于色差阈值，得到第三对比结果；响应于确定目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定目标元素符合预设条件。
在一些实施例中，信息获取单元501被进一步配置成：采用交叉对象接口异步获取初始页面的文本对象模型；从文本对象模型中提取目标元素的层叠样式表；从层叠样式表中提取出目标元素的初始色彩信息和尺寸信息；色彩模拟单元被进一步配置成：采用交叉对象接口按照第一色彩变换策略调整初始色彩信息，得到模拟色彩信息；色彩优化单元被进一步配置成：采用交叉对象接口按照第二色彩变换策略调整初始色彩信息，得到目标色彩信息；以及，页面更新单元被进一步配置成：基于目标元素的目标色彩信息和尺寸信息，采用文本对象模型，更新目标元素的色彩样式，得到重绘后的目标元素。
在一些实施例中，色彩优化单元503进一步包括：初始色彩分量获取模块，被配置成基于目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；色彩分量优化模块，被配置成将色彩分量R的目标数值更新为色彩分量G的初始数值，将色彩分量G的目标数值更新为色彩分量B的初始数值，将色彩分量B的目标数值更新为色彩分量R的初始数值，得到 目标元素的目标色彩信息。
下面参考图6，其示出了适于用来实现本公开的实施例的电子设备(例如图1中的服务器或终端设备)600的结构示意图。本公开的实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图6示出的终端设备仅仅是一个示例，不应对本公开的实施例的功能和使用范围带来任何限制。
如图6所示，电子设备600可以包括处理装置(例如中央处理器、图形处理器等)601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中，还存储有电子设备600操作所需的各种程序和数据。处理装置601、ROM 602以及RAM603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
通常，以下装置可以连接至I/O接口605：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置606；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607；包括例如磁带、硬盘等的存储装置608；以及通信装置609。通信装置609可以允许电子设备600与其他设备进行无线或有线通信以交换数据。虽然图6示出了具有各种装置的电子设备600，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图6中示出的每个方框可以代表一个装置，也可以根据需要代表多个装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置609从网络上被下载和安装，或者从存储装置608被安装，或者从ROM 602被安装。在该计算机程序被处 理装置601执行时，执行本公开的实施例的方法中限定的上述功能。需要说明的是，本公开的实施例所述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的实施例中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的实施例中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；基于初始色彩信息，采用第一色彩变换策略，生成目标元素的模拟色彩信息，模拟色彩信息指示的色彩表征目标元素的初始色彩在特征人群眼中的视觉效果；响应于确定目标元素的模拟色彩信息满足预设条件，基于目标元素的初始色彩信息，采用第二色彩变换策略，生成目标元素的目标色彩信息，预设条件表征模拟色彩对特征人群的 友好程度；基于目标色彩信息和尺寸信息，重绘目标元素，得到目标页面。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的实施例的操作的计算机程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开的实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括信息获取单元、色彩模拟单元、色彩优化单元和页面更新单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，信息获取单元还可以被描述为“获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息的单元”。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开的实施例中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开的实施例中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (12)

  1. 一种用于生成页面的方法，其中，包括：
    获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；
    基于所述初始色彩信息，采用第一色彩变换策略，生成所述目标元素的模拟色彩信息，所述模拟色彩信息指示的色彩表征所述目标元素的初始色彩在特征人群眼中的视觉效果；
    响应于确定所述目标元素的模拟色彩信息满足预设条件，基于所述目标元素的初始色彩信息，采用第二色彩变换策略，生成所述目标元素的目标色彩信息，所述预设条件表征所述模拟色彩对所述特征人群的友好程度；
    基于所述目标色彩信息和所述尺寸信息，重绘所述目标元素，得到目标页面。
  2. 根据权利要求1所述的方法，其中，所述目标元素经由如下步骤确定：
    采用交叉对象接口异步获取所述初始页面中的元素与所述初始页面的视窗的交叉状态；
    响应于确定所述初始页面中的元素与所述初始页面的视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
  3. 根据权利要求1-2任一项所述的方法，所述方法还包括：
    采用所述交叉对象接口异步获取所述初始页面中各所述目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：
    对比所述目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于所述色彩区间，得到第一对比结果；
    基于所述目标元素的模拟色彩信息与相邻目标元素的模拟色彩信息，确定所述目标元素与所述相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于所述色差阈值，得到第二对比结果，其中，所述相邻目标元素为所述 初始页面中与该目标元素的边界相接的其他目标元素；
    响应于所述目标元素包括多个模拟色彩信息，确定所述目标元素的各模拟色彩信息之间的差值，并对比该差值与所述色差阈值，确定该差值是否小于所述色差阈值，得到第三对比结果；
    响应于确定所述目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定所述目标元素符合预设条件。
  4. 根据权利要求1-3任一项所述的方法，其中，所述目标元素的初始色彩信息和尺寸信息经由如下步骤获取：采用所述交叉对象接口异步获取所述初始页面的文本对象模型；从所述文本对象模型中提取所述目标元素的层叠样式表；从所述层叠样式表中提取出所述目标元素的初始色彩信息和尺寸信息；
    所述目标元素的模拟色彩信息经由如下步骤获取：采用所述交叉对象接口按照所述第一色彩变换策略调整所述初始色彩信息，得到所述模拟色彩信息；
    所述目标元素的目标色彩信息经由如下步骤生成：采用所述交叉对象接口按照所述第二色彩变换策略调整所述初始色彩信息，得到所述目标色彩信息；以及，
    所述基于所述目标色彩信息和所述尺寸信息，重绘所述目标元素，包括：基于所述目标元素的目标色彩信息和尺寸信息，采用所述文本对象模型，更新所述目标元素的色彩样式，得到重绘后的目标元素。
  5. 根据权利要求1-4任一项所述的方法，其中，所述目标元素的目标色彩信息经由如下步骤生成：
    基于所述目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；
    将所述色彩分量R的目标数值更新为所述色彩分量G的初始数值，将所述色彩分量G的目标数值更新为所述色彩分量B的初始数值，将所述色彩分量B的目标数值更新为所述色彩分量R的初始数值，得到所述目标元素的目标色彩信息。
  6. 一种用于生成页面的装置，其中，包括：
    信息获取单元，被配置成获取初始页面的视窗中目标元素的初始色彩信息和尺寸信息；
    色彩模拟单元，被配置成基于所述初始色彩信息，采用第一色彩变换策略，生成所述目标元素的模拟色彩信息，所述模拟色彩信息指示的色彩表征所述目标元素的初始色彩在特征人群眼中的视觉效果；
    色彩优化单元，被配置成响应于确定所述目标元素的模拟色彩信息满足预设条件，基于所述目标元素的初始色彩信息，采用第二色彩变换策略，生成所述目标元素的目标色彩信息，所述预设条件表征所述模拟色彩对所述特征人群的友好程度；
    页面更新单元，被配置成基于所述目标色彩信息和所述尺寸信息，重绘所述目标元素，得到目标页面。
  7. 根据权利要求6所述的装置，其中，所述装置还包括目标元素确定单元，被配置成：
    采用交叉对象接口异步获取所述初始页面中的元素与所述初始页面的视窗的交叉状态；
    响应于确定所述初始页面中的元素与所述初始页面的视窗的相交比例达到预设的交叉阈值，将该元素确定为目标元素。
  8. 根据权利要求6-7任一项所述的装置，所述装置还包括色彩对比单元，被配置成：采用所述交叉对象接口异步获取所述初始页面中各所述目标元素的模拟色彩信息，并对每个目标元素执行如下步骤：
    对比所述目标元素的模拟色彩信息与预设的色彩区间，确定该模拟色彩信息是否处于所述色彩区间，得到第一对比结果；
    基于所述目标元素的模拟色彩信息与相邻目标元素的模拟色彩信息，确定所述目标元素与所述相邻目标元素相接区域的模拟色彩信息之间的差值，并对比该差值与预设的色差阈值，确定该差值是否小于所述色差阈值，得到第二对比结果，其中，所述相邻目标元素为所述 初始页面中与该目标元素的边界相接的其他目标元素；
    响应于所述目标元素包括多个模拟色彩信息，确定所述目标元素的各模拟色彩信息之间的差值，并对比该差值与所述色差阈值，确定该差值是否小于所述色差阈值，得到第三对比结果；
    响应于确定所述目标元素的第一对比结果、第二对比结果和第三对比结果不全为“否”，确定所述目标元素符合预设条件。
  9. 根据权利要求6-8任一项所述的装置，其中，所述信息获取单元被进一步配置成：采用所述交叉对象接口异步获取所述初始页面的文本对象模型；从所述文本对象模型中提取所述目标元素的层叠样式表；从所述层叠样式表中提取出所述目标元素的初始色彩信息和尺寸信息；
    所述色彩模拟单元被进一步配置成：采用所述交叉对象接口按照所述第一色彩变换策略调整所述初始色彩信息，得到所述模拟色彩信息；
    所述色彩优化单元被进一步配置成：采用所述交叉对象接口按照所述第二色彩变换策略调整所述初始色彩信息，得到所述目标色彩信息；以及，
    所述页面更新单元被进一步配置成：基于所述目标元素的目标色彩信息和尺寸信息，采用所述文本对象模型，更新所述目标元素的色彩样式，得到重绘后的目标元素。
  10. 根据权利要求6-9任一项所述的装置，其中，所述色彩优化单元进一步包括：
    初始色彩分量获取模块，被配置成基于所述目标元素的初始色彩信息，确定出各色彩分量R(red，红色)、G(green，绿色)、B(blue，蓝色)的初始数值；
    色彩分量优化模块，被配置成将所述色彩分量R的目标数值更新为所述色彩分量G的初始数值，将所述色彩分量G的目标数值更新为所述色彩分量B的初始数值，将所述色彩分量B的目标数值更新为所 述色彩分量R的初始数值，得到所述目标元素的目标色彩信息。
  11. 一种电子设备，包括：
    一个或多个处理器；
    存储装置，其上存储有一个或多个程序，
    当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-5中任一所述的方法。
  12. 一种计算机可读介质，其上存储有计算机程序，其中，所述程序被处理器执行时实现如权利要求1-5中任一所述的方法。
PCT/CN2021/125722 2020-11-18 2021-10-22 用于生成页面的方法和装置 WO2022105536A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US18/037,634 US20230410380A1 (en) 2020-11-18 2021-10-22 Method and apparatus for generating page

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011290395.5 2020-11-18
CN202011290395.5A CN112380475B (zh) 2020-11-18 2020-11-18 用于生成页面的方法和装置

Publications (1)

Publication Number Publication Date
WO2022105536A1 true WO2022105536A1 (zh) 2022-05-27

Family

ID=74585009

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/125722 WO2022105536A1 (zh) 2020-11-18 2021-10-22 用于生成页面的方法和装置

Country Status (3)

Country Link
US (1) US20230410380A1 (zh)
CN (1) CN112380475B (zh)
WO (1) WO2022105536A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112380475B (zh) * 2020-11-18 2024-04-05 北京沃东天骏信息技术有限公司 用于生成页面的方法和装置
CN113360820B (zh) * 2021-05-29 2024-03-08 北京网聘信息技术有限公司 一种页面展示方法、系统、设备和存储介质
CN115291917B (zh) * 2022-09-29 2023-01-06 天津大学 一种针对app中色彩普适性问题的修复方法

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040212815A1 (en) * 2003-02-28 2004-10-28 Heeman Frederik G Converted digital colour image with improved colour distinction for colour-blinds
CN103310736A (zh) * 2012-03-16 2013-09-18 联想(北京)有限公司 一种显示方法和装置
CN108984632A (zh) * 2018-06-20 2018-12-11 联动优势电子商务有限公司 一种网页设置方法及装置
CN111427573A (zh) * 2020-03-09 2020-07-17 南京贝湾信息科技有限公司 一种模式生成方法、计算设备及存储介质
CN111796889A (zh) * 2020-04-14 2020-10-20 北京沃东天骏信息技术有限公司 终端界面颜色矫正方法、装置、电子设备和终端
CN112380475A (zh) * 2020-11-18 2021-02-19 北京沃东天骏信息技术有限公司 用于生成页面的方法和装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040212815A1 (en) * 2003-02-28 2004-10-28 Heeman Frederik G Converted digital colour image with improved colour distinction for colour-blinds
CN103310736A (zh) * 2012-03-16 2013-09-18 联想(北京)有限公司 一种显示方法和装置
CN108984632A (zh) * 2018-06-20 2018-12-11 联动优势电子商务有限公司 一种网页设置方法及装置
CN111427573A (zh) * 2020-03-09 2020-07-17 南京贝湾信息科技有限公司 一种模式生成方法、计算设备及存储介质
CN111796889A (zh) * 2020-04-14 2020-10-20 北京沃东天骏信息技术有限公司 终端界面颜色矫正方法、装置、电子设备和终端
CN112380475A (zh) * 2020-11-18 2021-02-19 北京沃东天骏信息技术有限公司 用于生成页面的方法和装置

Also Published As

Publication number Publication date
US20230410380A1 (en) 2023-12-21
CN112380475B (zh) 2024-04-05
CN112380475A (zh) 2021-02-19

Similar Documents

Publication Publication Date Title
WO2022105536A1 (zh) 用于生成页面的方法和装置
WO2020155907A1 (zh) 用于生成漫画风格转换模型的方法和装置
WO2020000879A1 (zh) 图像识别方法和装置
CN110021052B (zh) 用于生成眼底图像生成模型的方法和装置
JP2021103506A (ja) 情報を生成するための方法及び装置
CN110288705B (zh) 生成三维模型的方法和装置
CN111915480B (zh) 生成特征提取网络的方法、装置、设备和计算机可读介质
WO2021114979A1 (zh) 视频页面显示方法、装置、电子设备和计算机可读介质
WO2024036847A1 (zh) 图像处理方法和装置、电子设备和存储介质
CN111966255B (zh) 信息显示方法、装置、电子设备和计算机可读介质
CN110069191B (zh) 基于终端的图像拖拽变形实现方法和装置
CN112306793A (zh) 用于监控网页的方法和装置
US20230106202A1 (en) Method and apparatus for generating prediction information, and electronic device and medium
WO2021088790A1 (zh) 用于目标设备的显示样式调整方法和装置
KR20210001858A (ko) 텍스트의 컬러 결정 방법 및 장치
US20230281956A1 (en) Method for generating objective function, apparatus, electronic device and computer readable medium
WO2020006962A1 (zh) 用于处理图片的方法和装置
US20240292052A1 (en) Page display method and apparatus, electronic device and storage medium
CN111461965A (zh) 图片处理方法、装置、电子设备和计算机可读介质
WO2022262473A1 (zh) 图像处理方法、装置、设备及存储介质
WO2022206091A1 (zh) 用于生成数据的方法和装置
CN113706663B (zh) 图像生成方法、装置、设备及存储介质
CN111010449B (zh) 图像信息输出方法、系统、装置、介质及电子设备
CN111062995B (zh) 生成人脸图像的方法、装置、电子设备和计算机可读介质
WO2020011067A1 (zh) 终端的显示方法和装置、终端及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21893684

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21893684

Country of ref document: EP

Kind code of ref document: A1