CN111596998A - 一种水墨屏的页面处理方法及终端 - Google Patents
一种水墨屏的页面处理方法及终端 Download PDFInfo
- Publication number
- CN111596998A CN111596998A CN202010403662.9A CN202010403662A CN111596998A CN 111596998 A CN111596998 A CN 111596998A CN 202010403662 A CN202010403662 A CN 202010403662A CN 111596998 A CN111596998 A CN 111596998A
- Authority
- CN
- China
- Prior art keywords
- page
- text
- text content
- node
- presentation area
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 16
- 238000009877 rendering Methods 0.000 claims abstract description 67
- 238000000034 method Methods 0.000 claims abstract description 18
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 claims abstract description 7
- 239000010410 layer Substances 0.000 description 19
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 9
- 238000012545 processing Methods 0.000 description 8
- 238000012986 modification Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 230000009286 beneficial effect Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 3
- 230000005236 sound signal Effects 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000001133 acceleration Effects 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 230000015572 biosynthetic process Effects 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 230000000295 complement effect Effects 0.000 description 1
- 239000012792 core layer Substances 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 230000010354 integration Effects 0.000 description 1
- 238000013507 mapping Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 238000003786 synthesis reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本申请涉及页面加载技术领域，本申请实施例提供了一种水墨屏的页面处理方法及终端，该方法包括：先确定页面上的文字内容以及对应的文字内容呈现区域；再调整文字内容的字体灰度值，和文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面；最后向用户展示目标渲染页面。调整页面中文字内容的字体灰度值，和文字内容呈现区域的背景灰度值，提高文字内容和背景图片的灰度值区别度，令重新渲染后的页面可以清楚呈现文字内容，便于用户阅读。
Description
技术领域
本申请涉及页面加载技术领域，提供了一种水墨屏的页面处理方法及终端。
背景技术
具有水墨屏的终端适应了电子市场的需求，得到了广泛应用，例如用户使用水墨屏阅读文章。由于水墨屏的物理特性，对于终端加载的RGB彩色页面在水墨屏上只能够显示为灰度页面，当文字内容的字体灰度值与背景图片的背景灰度值比较接近时，用户无法区分灰度页面上的文字内容和背景图片，影响用户阅读文字内容。
有鉴于此，本申请实施例提供了一种新的水墨屏的页面处理方法及终端。
发明内容
本申请实施例提供一种水墨屏的页面处理方法及终端，用以提高水墨屏的页面清晰度。
第一方面，本申请实施例提供了一种水墨屏电子终端，包括处理器、水墨屏：
所述处理器，被配置为确定页面上的文字内容以及对应的文字内容呈现区域；
调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面；
所述水墨屏，被配置为在显示界面中显示所述目标渲染页面。
可选的，包括：
所述页面为初始渲染页面；或者，
所述页面为所述目标渲染页面的第一部分页面，其中，所述第一部分页面是基于动态加载资源生成的页面；
所述页面为所述目标渲染页面的第二部分页面，其中，所述第二部分页面是基于对应的脚本实时渲染生成的页面。
可选的，确定页面上的文字内容以及对应的文字内容呈现区域，所述处理器被配置为：
将所述页面中文本节点的文本属性值作为所述文字内容，其中，所述文本节点表征所述页面中文本类型的节点；
获取所述文字内容对应的样式信息，确定所述文字内容呈现区域。
可选的，调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，所述处理器被配置为：
在确定所述文字内容呈现区域与所述文本节点的图片呈现区域不重叠时，通过调整所述文本节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
可选的，调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，所述处理器被配置为：
在确定所述文字内容区域内与所述图片呈现区域重叠时，在所述文本节点下生成所述文字内容对应的文本子节点；
通过调整所述文本子节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本子节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
第二方面，本申请实施例还提供了一种水墨屏的页面处理方法，包括：
确定页面上的文字内容以及对应的文字内容呈现区域；
调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面，并通过显示界面显示所述目标渲染页面。
可选的，包括：
所述页面为初始渲染页面；或者，
所述页面为所述目标渲染页面的第一部分页面，其中，所述第一部分页面是基于动态加载资源生成的页面；
所述页面为所述目标渲染页面的第二部分页面，其中，所述第二部分页面是基于对应的脚本实时渲染生成的页面。
可选的，确定页面上的文字内容以及对应的文字内容呈现区域，包括：
将所述页面中文本节点的文本属性值作为所述文字内容，其中，所述文本节点表征所述页面中文本类型的节点；
获取所述文字内容对应的样式信息，确定所述文字内容呈现区域。
可选的，调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，包括：
在确定所述文字内容呈现区域与所述文本节点的图片呈现区域不重叠时，通过调整所述文本节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
可选的，调整所述文字内容的字体颜色，和所述文字内容呈现区域的背景颜色，包括：
在确定所述文字内容区域内与所述图片呈现区域重叠时，在所述文本节点下生成所述文字内容对应的文本子节点；
通过调整所述文本子节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本子节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
第三方面，本申请实施例还提供了一种计算机可读存储介质，其包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行上述任意一种水墨屏的页面处理方法的步骤。
本申请有益效果如下：
本申请实施例提供了一种水墨屏的页面处理方法及终端，该方法包括：先确定页面上的文字内容以及对应的文字内容呈现区域；再调整文字内容的字体灰度值，和文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面；最后向用户展示目标渲染页面。调整页面中文字内容的字体灰度值，和文字内容呈现区域的背景灰度值，提高字体灰度值和背景灰度值之间的区别度，令重新渲染后的页面可以清楚呈现文字内容，便于用户阅读。
本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本申请实施例提供的一种水墨屏电子终端的结构示意图；
图2示例性示出了本申请实施例提供的一种水墨屏电子终端的软件架构示意图；
图3示例性示出了本申请实施例提供的水墨屏电子终端的用户界面示意图；
图4示例性示出了本申请实施例提供的第一种水墨屏的页面处理方法流程图；
图5a示例性示出了本申请实施例中未调整的分类导航页面示意图；
图5b示例性示出了分类导航页面的文档类型节点树；
图5c示例性示出了本申请实施例中有浅色背景、深色字体的分类导航页面示意图；
图5d示例性示出了本申请实施例中有白底黑字的分类导航页面示意图；
图6a示例性示出了本申请实施例中未调整的电影推荐页面示意图；
图6b示例性示出了本申请实施例中有浅色背景、深色字体的电影推荐页面示意图；
图6c示例性示出了本申请实施例中有白底黑字的电影推荐页面示意图；
图7示例性示出了本申请实施例提供的第二种水墨屏的页面处理方法流程图。
具体实施方式
为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请技术方案的一部分实施例，而不是全部的实施例。基于本申请文件中记载的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请技术方案保护的范围。
图1示出了水墨屏电子终端100的结构示意图。下面以水墨屏电子终端100为例对实施例进行具体说明。应该理解的是，图1所示水墨屏电子终端100仅是一个范例，并且水墨屏电子终端100可以具有比图1中所示的更多的或者更少的部件，可以组合两个或多个的部件，或者可以具有不同的部件配置。图中所示出的各种部件可以在包括一个或多个信号处理和/或专用集成电路在内的硬件、软件、或硬件和软件的组合中实现。
图1中示例性示出了根据示例性实施例中水墨屏电子终端100的硬件配置框图。如图1所示，水墨屏电子终端100包括：射频(radio frequency，RF)电路110、存储器120、水墨屏130、摄像头140、传感器150、音频电路160、音频播放部件170、无线保真(WirelessFidelity，Wi-Fi)模块180、处理器190、蓝牙模块1100、以及电源1200等部件。
RF电路110可用于在收发信息或通话过程中信号的接收和发送，可以接收基站的下行数据后交给处理器190处理；可以将上行数据发送给基站。通常，RF电路110包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等器件。
存储器120可用于存储软件程序及数据。处理器190通过运行存储在存储器120的软件程序或数据，从而执行水墨屏电子终端100的各种功能以及数据处理。存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。存储器120存储有使得水墨屏电子终端100能运行的操作系统。本申请中存储器120可以存储操作系统及各种应用程序，还可以存储执行本申请实施例所述方法的代码。
水墨屏130可用于接收输入的数字或字符信息，产生与水墨屏电子终端100的用户设置以及功能控制有关的信号输入，具体地，显示单元130可以包括设置在水墨屏电子终端100正面的触摸屏1301，可收集用户在其上或附近的触摸操作，例如点击按钮，拖动滚动框等。
水墨屏130还可用于显示由用户输入的信息或提供给用户的信息以及终端100的各种菜单的图形用户界面(graphical user interface，GUI)。具体地，显示单元130可以包括设置在终端100正面的显示屏1302。其中，显示屏1302可以为彩色液晶屏，可以采用液晶显示器、发光二极管等形式来配置。显示单元130可以用于显示本申请中所述的各种图形用户界面。
其中，触摸屏1301可以覆盖在显示屏1302之上，也可以将触摸屏1301与显示屏1302集成而实现终端100的输入和输出功能，集成后可以简称触摸显示屏。本申请中水墨屏130可以显示应用程序以及对应的操作步骤。
摄像头140可用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给处理器190转换成数字图像信号。
水墨屏电子终端100还可以包括至少一种传感器150，比如加速度传感器151、距离传感器152、指纹传感器153、温度传感器154。水墨屏电子终端100还可配置有陀螺仪、气压计、湿度计、温度计、红外线传感器、光传感器、运动传感器等其他传感器。
音频电路160、音频播放部件170可提供用户与终端100之间的音频接口。音频电路160可将接收到的音频数据转换后的电信号，传输到扬声器171，由扬声器171转换为声音信号输出。水墨屏电子终端100还可配置音量按钮，用于调节声音信号的音量。另一方面，麦克风172将收集的声音信号转换为电信号，由音频电路160接收后转换为音频数据，再将音频数据输出至RF电路110以发送给比如另一终端，或者将音频数据输出至存储器120以便进一步处理。本申请中麦克风172可以获取用户的语音。
Wi-Fi属于短距离无线传输技术，水墨屏电子终端100可以通过Wi-Fi模块180帮助用户收发电子邮件、浏览网页和访问流媒体等，它为用户提供了无线的宽带互联网访问。
处理器190是水墨屏电子终端100的控制中心，利用各种接口和线路连接整个终端的各个部分，通过运行或执行存储在存储器120内的软件程序，以及调用存储在存储器120内的数据，执行水墨屏电子终端100的各种功能和处理数据。在一些实施例中，处理器190可包括一个或多个处理单元；处理器190还可以集成应用处理器和基带处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，基带处理器主要处理无线通信。可以理解的是，上述基带处理器也可以不集成到处理器190中。本申请中处理器190可以运行操作系统、应用程序、用户界面显示及触控响应，以及本申请实施例所述的处理方法。另外，处理器190与水墨屏130耦接。
蓝牙模块1100，用于通过蓝牙协议来与其他具有蓝牙模块的蓝牙设备进行信息交互。例如，水墨屏电子终端100可以通过蓝牙模块1100与同样具备蓝牙模块的可穿戴电子设备(例如智能手表)建立蓝牙连接，从而进行数据交互。
水墨屏电子终端100还包括给各个部件供电的电源1200(比如电池)。电源可以通过电源管理系统与处理器190逻辑相连，从而通过电源管理系统实现管理充电、放电以及功耗等功能。水墨屏电子终端100还可配置有电源按钮，用于终端的开机和关机，以及锁屏等功能。
图2是本申请实施例的水墨屏电子终端100的软件结构框图。
分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将安卓Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。
应用程序层可以包括一系列应用程序包。
如图2所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供水墨屏电子终端100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图片、布局文件、视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，终端振动，指示灯闪烁等。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓系统的调度和管理。
核心库包含两部分：一部分是java语言需要调用的功能函数，另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理，堆栈管理，线程管理，安全和异常的管理，以及垃圾回收等功能。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(Media Libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
图3是用于示出水墨屏电子终端(例如图1的水墨屏电子终端100)上的用户界面的示意图。在一些具体实施中，用户通过触摸用户界面上的应用图标可以打开相应的应用程序，或者通过触摸用户界面上的文件夹图标可以打开相应的文件夹。
在用户在水墨屏电子终端的水墨屏上操作，开启浏览器加载页面的过程中，水墨屏电子终端会调用浏览器，加载与用户输入的域名对应的资源文件，生成灰度页面，当文字内容的字体灰度值与背景图片的背景灰度值比较接近时，用户将无法区分文字内容和背景图片，影响用户阅读文字内容。
基于上述问题，本申请实施例提供一种水墨屏的页面处理方法，如图4所示，包括以下步骤：
S401:确定页面上的文字内容以及对应的文字内容呈现区域。
当页面为以下三类中的一种时，将触发浏览器执行步骤401：
类型一：所述页面为初始渲染页面。
初始渲染页面指的是，浏览器采用传统页面加载方式生成的页面。加载页面的具体过程为：浏览器先向域名系统(Domain Name System，DNS)服务器发送域名查询请求，以获取与用户输入的域名成映射关系的互联网协议(Internet Protocol，IP)地址；浏览器再根据IP地址与Web服务器建立通信连接，向Web服务器发送资源文件请求，并接收Web服务器返回的资源文件；最后，浏览器解析资源文件得到文件对象模型(Document Object Model，DOM)树和级联样式表对象模型(Cascading Style Sheet Object Model，CSSOM)，基于DOM树和CSSOM得到渲染树，并基于渲染树绘制得到初始渲染页面。
页面渲染所需时间较长，浏览器通过调用进度更新回调，监听渲染进程的渲染进度，当渲染进度达到100％时，确定已生成初始渲染页面；或者，浏览器在接收到渲染进程发送的加载完成回调时，确定已生成初始渲染页面。
在生成初始渲染页面后，浏览器先对初始渲染页面进行解析，得到初始渲染页面对应的节点树；再从上至下依次遍历节点树，若遍历到文本节点，则将文本节点的文本属性值作为文字内容，同时获取文字内容对应的样式信息，确定文字内容呈现区域，其中，文本节点表征初始渲染页面中文本类型的节点，本申请实施例使用文本属性、字体属性，表示文本节点的不同特征，每个属性对应的属性值表示所述特征的实际参数值，如文本属性值是文字内容，字体属性值是字体样式、字体灰度值、字体大小。
类型二：所述页面为目标渲染页面的第一部分页面，其中，第一部分页面是基于动态加载资源生成的页面。
在生成目标渲染页面之后，若浏览器基于动态加载资源的方式，对目标渲染页面上的某个区域重新渲染，生成对应的第一部分页面，这样若第一部分页面中文字内容的灰度值与背景图片的灰度值比较接近时，用户依然无法区分文字内容和背景图片，影响用户阅读。例如，音乐播放页面上的歌词显示区域，需要采用动态加载资源的方式，实时接收Web服务器发送的资源文件，在歌词显示区域上加载资源文件，生成歌词滚动显示页面。
浏览器通过调用数据获取回调接口，监听到目标渲染页面中存在基于动态加载生成的页面时，仅对第一部分页面进行解析，得到第一部分页面对应的节点树；再从上至下依次遍历节点树，若遍历到文本节点，则将文本节点的文本属性值作为文字内容，同时获取文字内容对应的样式信息，确定文字内容呈现区域，其中，文本节点表征第一部分页面中的文本元素。
类型三：所述页面为目标渲染页面的第二部分页面，其中，第二部分页面是基于对应的脚本实时渲染生成的页面。
在生成目标渲染页面之后，若浏览器基于运行对应的脚本，对目标渲染页面上的某个区域重新渲染，生成对应的第二部分页面，这样若第二部分页面中文字内容的灰度值与背景图片的灰度值比较接近时，用户依然无法区分文字内容和背景图片，影响用户阅读。例如，基于运行对应的脚本，在搜索页面的右下方区域，弹出一个广告界面。
浏览器通过调用变动观察器MutationObeserver接口，监听到目标渲染页面中存在基于对应的脚本实时渲染生成的页面时，仅对第二部分页面进行解析，得到第二部分页面对应的节点树；再从上至下依次遍历节点树，若遍历到文本节点，则将文本节点的文本属性值作为文字内容，同时获取文字内容对应的样式信息，确定文字内容呈现区域，其中，文本节点表征第二部分页面中的文本元素。
S402：调整文字内容的字体灰度值，和文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面。
可选的，本申请实施例提供了以下两种调整方式：
方式一：在确定文字内容呈现区域与文本节点的图片呈现区域不重叠时，通过调整文本节点的字体属性值，调整文字内容的字体灰度值，以及通过调整文本节点的背景属性值，调整文字内容呈现区域的背景灰度值。
当文字内容区域与图片呈现区域不重叠时，文字内容区域的背景灰度值与整个页面的背景灰度值相同。灰度值的取值范围为[0,255]，当灰度值取为0时，呈现黑色；当灰度值取为255时，呈现白色。为了提高字体灰度值与背景灰度值之间的区别度，可以将字体灰度值调小，呈现深色字体；将背景灰度值调大，呈现浅色背景，有利于用户阅读文字内容。
如图5a所示的分类导航页面，分类导航页面上的字体灰度值与背景灰度值比较接近，难以识别页面上的文字内容。浏览器的页面一般是用超文本标记语言(Hyper TextMarkup Language，HTML)编辑得到的，对图5a所示的分类导航页面进行解析，得到对应的HTML DOM节点树，HTML DOM中共有12种不同类型的节点，图5b仅示出了文档类型节点树。图5b中的Document表示文档类型的节点，根元素指的是文档元素，每个文档中有且只有一个文档元素，即html元素；Element表示元素类型的节点，所述元素为文档中除文档元素外的其它元素，且其它元素均为文档元素的子元素；Text表示文本类型的节点(即本申请实施例中的文本节点)。
从上至下依次遍历文档类型节点树，直至遍历完所述节点树下的所有文本节点为止，每遍历一个文本节点，读取所述一个文本节点的字体属性值，同时获取所述一个文本节点对应的样式信息，确定文字内容呈现区域，和所述呈现区域的背景属性值；将字体灰度值从225调整为25，呈现深色字体；将背景灰度值从125调整为235，呈现浅色背景；最后，在确定所有文本节点的参数值均调整完毕后，基于调整后的参数值重新渲染页面，得到如图5c所示的页面，在图5c的页面上呈现出浅色背景、深色字体的文字内容，方便用户阅读。
或者，对图5a所示的分类导航页面进行解析，得到对应的节点树，从上至下依次遍历节点树，在遍历到文档类型的节点时，继续遍历该节点下的所有文本节点，每遍历一个文本节点，读取所述一个文本节点的字体属性值，同时获取所述一个文本节点对应的样式信息，确定文字内容呈现区域，和所述呈现区域的背景属性值；将所述一个文本节点的字体灰度值调整为0，将背景灰度值调整为255；最后，在确定所有文本节点的参数值均调整完毕后，基于调整后的参数值重新渲染页面，得到如图5d所示的页面，在图5d的页面上呈现出白底黑字的文字内容，方便用户阅读。
方式二：在确定文字内容区域内与所述图片呈现区域重叠时，在文本节点下生成文字内容对应的文本子节点；
通过调整文本子节点的字体属性值，调整文字内容的字体颜色，以及通过调整文本子节点的背景属性值，调整文字内容呈现区域的背景颜色。
当文字内容区域与图片呈现区域重叠时，文字内容区域的背景灰度值与图片呈现区域的背景灰度值相同，受背景灰度值的影响，可能出现看不清文字内容的情况。同样地，为了提高字体灰度值与背景灰度值之间的区别度，可以将字体灰度值调小，呈现深色字体；将背景灰度值调大，呈现浅色背景，有利于用户阅读文字内容。
如图6a所示的电影推荐页面，因电影推荐页面上的字体灰度值与背景灰度值比较接近，难以识别页面上的文字内容。对图6a所示的电影推荐页面进行解析，得到对应的节点树，从上至下依次遍历节点树，在遍历到文档类型的节点时，继续遍历该节点下的所有文本节点，每遍历一个文本节点，读取所述一个文本节点的字体属性值，同时获取所述一个文本节点对应的样式信息，确定文字内容呈现区域，和所述呈现区域的背景属性值；将字体灰度值从225调整为25，呈现深色字体；将背景灰度值从125调整为235，呈现浅色背景；最后，在确定所有文本节点的参数值均调整完毕后，基于调整后的参数值重新渲染页面，得到如图6b所示的页面，在图6b的页面上呈现出浅色背景、深色字体的文字内容，方便用户阅读。
对图6a所示的分类导航页面进行解析，得到对应的节点树，从上至下依次遍历节点树，在遍历到文档类型的节点时，继续遍历该节点下的所有文本节点，每遍历一个文本节点，读取所述一个文本节点的字体属性值，同时获取所述一个文本节点对应的样式信息，确定文字内容呈现区域，和所述呈现区域的背景属性值；将所述一个文本节点的字体灰度值调整为0，将背景灰度值调整为255；最后，在确定所有文本节点的参数值均调整完毕后，基于调整后的参数值重新渲染页面，得到如图6c所示的页面，在图6c的页面上呈现出白底黑字的文字内容，方便用户阅读。
S403：通过显示界面显示目标渲染界面。
通过调整文字内容的字体灰度值和文字内容呈现区域的背景灰度值，令水墨屏的显示界面显示出浅色背景、深色字体的清晰页面，方便用户阅读。
由于水墨屏的特性，会呈现出黑白分明的灰度页面，为了让字体灰度值与背景灰度值之间的区别度达到最大值，本申请实施例还提供了一种水墨屏的页面处理方法，如图7所示，包括以下步骤：
S701：确定页面上的文字内容以及对应的文字内容呈现区域。
当页面为以下三类中的一种时，将触发浏览器执行步骤701：
类型一：所述页面为初始渲染页面；
类型二：所述页面为目标渲染页面的第一部分页面，其中，第一部分页面是基于动态加载资源生成的页面；
类型三：所述页面为目标渲染页面的第二部分页面，其中，第二部分页面是基于对应的脚本实时渲染生成的页面。
针对每类页面，确定文字内容以及对应的文字内容呈现区域的过程上述已经介绍，在此不再赘述。
S702：将文字内容的字体灰度值调整为0，将文字内容呈现区域的背景灰度值调整为255，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面。
将字体灰度值调整为0(即黑色)，将背景灰度值调整为255(即白色)，令最终渲染的页面上呈现出白底黑字的文字内容，有利于用户阅读。
S703：通过显示界面显示目标渲染页面。
在一些可能的实施方式中，本申请提供的业务控制方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在计算机设备上运行时，程序代码用于使计算机设备执行本说明书上述描述的根据本申请各种示例性实施方式的针对水墨屏的页面展示方法中的步骤，例如，计算机设备可以执行如图1中所示的步骤。
程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。
本申请的实施方式的用于业务控制的程序产品可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在计算装置上运行。然而，本申请的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被命令执行系统、装置或者器件使用或者与其结合使用。
可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由命令执行系统、装置或者器件使用或者与其结合使用的程序。
可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等，或者上述的任意合适的组合。
可以以一种或多种程序设计语言的任意组合来编写用于执行本申请操作的程序代码，程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算装置上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算装置上部分在远程计算装置上执行、或者完全在远程计算装置或服务器上执行。在涉及远程计算装置的情形中，远程计算装置可以通过任意种类的网络包括局域网(LAN)或广域网(WAN)连接到用户计算装置，或者，可以连接到外部计算装置(例如利用因特网服务提供商来通过因特网连接)。
尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
Claims (10)
1.一种水墨屏电子终端，其特征在于，包括处理器、水墨屏：
所述处理器，被配置为确定页面上的文字内容以及对应的文字内容呈现区域；
调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面；
所述水墨屏，被配置为在显示界面中显示所述目标渲染页面。
2.如权利要求1所述的水墨屏电子终端，其特征在于，包括：
所述页面为初始渲染页面；或者，
所述页面为所述目标渲染页面的第一部分页面，其中，所述第一部分页面是基于动态加载资源生成的页面；
所述页面为所述目标渲染页面的第二部分页面，其中，所述第二部分页面是基于对应的脚本实时渲染生成的页面。
3.如权利要求1所述的水墨屏电子终端，其特征在于，确定页面上的文字内容以及对应的文字内容呈现区域，所述处理器被配置为：
将所述页面中文本节点的文本属性值作为所述文字内容，其中，所述文本节点表征所述页面中文本类型的节点；
获取所述文字内容对应的样式信息，确定所述文字内容呈现区域。
4.如权利要求3所述的水墨屏电子终端，其特征在于，调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，所述处理器被配置为：
在确定所述文字内容呈现区域与所述文本节点的图片呈现区域不重叠时，通过调整所述文本节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
5.如权利要求3所述的终端，其特征在于，调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，所述处理器被配置为：
在确定所述文字内容区域内与所述图片呈现区域重叠时，在所述文本节点下生成所述文字内容对应的文本子节点；
通过调整所述文本子节点的字体属性值，调整所述文字内容的字体灰度值，以及通过调整所述文本子节点的背景属性值，调整所述文字内容呈现区域的背景灰度值。
6.一种水墨屏的页面处理方法，其特征在于，包括：
确定页面上的文字内容以及对应的文字内容呈现区域；
调整所述文字内容的字体灰度值，和所述文字内容呈现区域的背景灰度值，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面，并通过显示界面显示所述目标渲染页面。
7.如权利要求6所述的方法，其特征在于，包括：
所述页面为初始渲染页面；或者，
所述页面为所述目标渲染页面的第一部分页面，其中，所述第一部分页面是基于动态加载资源生成的页面；
所述页面为所述目标渲染页面的第二部分页面，其中，所述第二部分页面是基于对应的脚本实时渲染生成的页面。
8.如权利要求6所述的方法，其特征在于，确定页面上的文字内容以及对应的文字内容呈现区域，包括：
将所述页面中文本节点的文本属性值作为所述文字内容，其中，所述文本节点表征所述页面中文本类型的节点；
获取所述文字内容对应的样式信息，确定所述文字内容呈现区域。
9.一种水墨屏的页面处理方法，其特征在于，包括：
确定页面上的文字内容以及对应的文字内容呈现区域；
将所述文字内容的字体灰度值调整为0，将所述文字内容呈现区域的背景灰度值调整为255，并基于调整后的文字内容和文字内容呈现区域，生成目标渲染页面，并通过显示界面显示所述目标渲染页面。
10.一种计算机可读存储介质，其特征在于，其包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行权力要求6～9中任一所述方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010403662.9A CN111596998A (zh) | 2020-05-13 | 2020-05-13 | 一种水墨屏的页面处理方法及终端 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010403662.9A CN111596998A (zh) | 2020-05-13 | 2020-05-13 | 一种水墨屏的页面处理方法及终端 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111596998A true CN111596998A (zh) | 2020-08-28 |
Family
ID=72191318
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010403662.9A Pending CN111596998A (zh) | 2020-05-13 | 2020-05-13 | 一种水墨屏的页面处理方法及终端 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111596998A (zh) |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113053322A (zh) * | 2021-03-12 | 2021-06-29 | 广州文石信息科技有限公司 | 一种电子墨水屏的显示优化方法及相关装置 |
| CN113407135A (zh) * | 2021-06-23 | 2021-09-17 | 青岛海信移动通信技术股份有限公司 | 应用于墨水屏的显示控制方法及相关装置 |
| CN113589980A (zh) * | 2021-07-06 | 2021-11-02 | 青岛海信移动通信技术股份有限公司 | 一种水墨屏的界面调节方法及终端设备 |
| CN113934340A (zh) * | 2021-09-22 | 2022-01-14 | 青岛海信移动通信技术股份有限公司 | 一种终端设备和进度条显示方法 |
| CN113989404A (zh) * | 2021-11-05 | 2022-01-28 | 北京字节跳动网络技术有限公司 | 图片处理方法、装置、设备、存储介质和程序产品 |
| CN114974148A (zh) * | 2022-07-29 | 2022-08-30 | 广州文石信息科技有限公司 | 用于墨水屏的字体显示增强方法、装置、设备和存储介质 |
| CN115576517A (zh) * | 2022-11-08 | 2023-01-06 | 广州文石信息科技有限公司 | 一种文字显示方法、装置、设备及存储介质 |
| CN117290627A (zh) * | 2023-11-27 | 2023-12-26 | 福瑞莱环保科技（深圳）股份有限公司 | 一种服务器端页面组件渲染方法、系统及介质 |
| CN113934340B (zh) * | 2021-09-22 | 2024-04-19 | 青岛海信移动通信技术有限公司 | 一种终端设备和进度条显示方法 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544931A (zh) * | 2013-10-12 | 2014-01-29 | Tcl集团股份有限公司 | 一种文字的生成方法、装置及应用终端 |
| CN107086027A (zh) * | 2017-06-23 | 2017-08-22 | 青岛海信移动通信技术股份有限公司 | 文字显示方法及装置、移动终端及存储介质 |
-
2020
- 2020-05-13 CN CN202010403662.9A patent/CN111596998A/zh active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103544931A (zh) * | 2013-10-12 | 2014-01-29 | Tcl集团股份有限公司 | 一种文字的生成方法、装置及应用终端 |
| CN107086027A (zh) * | 2017-06-23 | 2017-08-22 | 青岛海信移动通信技术股份有限公司 | 文字显示方法及装置、移动终端及存储介质 |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113053322A (zh) * | 2021-03-12 | 2021-06-29 | 广州文石信息科技有限公司 | 一种电子墨水屏的显示优化方法及相关装置 |
| CN113053322B (zh) * | 2021-03-12 | 2022-08-02 | 广州文石信息科技有限公司 | 一种电子墨水屏的显示优化方法及相关装置 |
| CN113407135A (zh) * | 2021-06-23 | 2021-09-17 | 青岛海信移动通信技术股份有限公司 | 应用于墨水屏的显示控制方法及相关装置 |
| CN113589980A (zh) * | 2021-07-06 | 2021-11-02 | 青岛海信移动通信技术股份有限公司 | 一种水墨屏的界面调节方法及终端设备 |
| CN113934340A (zh) * | 2021-09-22 | 2022-01-14 | 青岛海信移动通信技术股份有限公司 | 一种终端设备和进度条显示方法 |
| CN113934340B (zh) * | 2021-09-22 | 2024-04-19 | 青岛海信移动通信技术有限公司 | 一种终端设备和进度条显示方法 |
| CN113989404A (zh) * | 2021-11-05 | 2022-01-28 | 北京字节跳动网络技术有限公司 | 图片处理方法、装置、设备、存储介质和程序产品 |
| CN114974148A (zh) * | 2022-07-29 | 2022-08-30 | 广州文石信息科技有限公司 | 用于墨水屏的字体显示增强方法、装置、设备和存储介质 |
| CN114974148B (zh) * | 2022-07-29 | 2022-11-18 | 广州文石信息科技有限公司 | 用于墨水屏的字体显示增强方法、装置、设备和存储介质 |
| CN115576517A (zh) * | 2022-11-08 | 2023-01-06 | 广州文石信息科技有限公司 | 一种文字显示方法、装置、设备及存储介质 |
| CN117290627A (zh) * | 2023-11-27 | 2023-12-26 | 福瑞莱环保科技（深圳）股份有限公司 | 一种服务器端页面组件渲染方法、系统及介质 |
| CN117290627B (zh) * | 2023-11-27 | 2024-03-08 | 福瑞莱环保科技（深圳）股份有限公司 | 一种服务器端页面组件渲染方法、系统及介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111596998A (zh) | 一种水墨屏的页面处理方法及终端 | |
| US11914850B2 (en) | User profile picture generation method and electronic device | |
| CN111597000B (zh) | 一种小窗口管理方法及终端 | |
| CN111367456A (zh) | 通信终端及多窗口模式下的显示方法 | |
| CN113835571A (zh) | 一种终端设备、信息展示方法和存储介质 | |
| CN113313804A (zh) | 一种图像渲染方法、装置、电子设备和存储介质 | |
| CN111176766A (zh) | 一种通信终端及组件显示方法 | |
| CN112835472B (zh) | 通信终端及显示方法 | |
| CN112000408B (zh) | 移动终端及其显示方法 | |
| CN113038141A (zh) | 视频帧处理方法及电子设备 | |
| CN113360122B (zh) | 移动终端及其文本显示方法 | |
| CN111399955B (zh) | 移动终端及其应用程序的界面显示方法 | |
| CN114863432A (zh) | 一种终端设备、对比度调整方法、装置及介质 | |
| CN114067758B (zh) | 移动终端及其图像显示方法 | |
| CN114546219A (zh) | 图片列表的处理方法及相关装置 | |
| CN114594894A (zh) | 界面元素的标记方法及终端设备、存储介质 | |
| CN111240776B (zh) | 动态壁纸设置方法、装置、存储介质及电子设备 | |
| CN113900740A (zh) | 加载多项列表数据的方法及装置 | |
| US11405341B1 (en) | Audience-based content optimization in a messaging system | |
| CN115033199A (zh) | 移动终端及其图像显示方法 | |
| CN113220954A (zh) | 一种信息展示方法、装置及投影设备 | |
| CN109948095B (zh) | 显示网页内容的方法、装置、终端及存储介质 | |
| CN114063945A (zh) | 移动终端及其图像显示方法 | |
| CN114463730B (zh) | 一种页面识别方法及终端设备 | |
| CN111414142B (zh) | 移动终端及其应用界面的显示方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200828 |