专利名称：图片显示方法和装置的制作方法
技术领域：
本发明涉及网页浏览和用户交互技术领域，更为具体地，涉及一种昏暗环境中的图片显示方法和装置。
背景技术：
随着社会的进步和技术的发展，人们越来越多地使用接入终端来以无线或者有线的方式接入因特网来交流、获取信息。在这种情况下，从终端用户的浏览体验来说，除了终端的数据处理能力和网络带宽，浏览器的显示方式也至关重要。现阶段的浏览器，在昏暗的环境下，如关闭了外部光源的情况下，即使降低终端设备显示器的亮度，用户在浏览网页时终端设备显示器本身提供的光源所发出的光还是比较刺眼。比如，用户在晚上关灯、正式入睡前可能会有继续使用手持设备例如手机继续浏览网页的需求，这时候用户所在环境的光线是非常昏暗的。但手机本身或者是应用程序界面本身的亮度相比而言是很明亮的，在光线对比这么强烈的环境下，用户浏览页面感受就会很不舒服甚至会损害他的视力。针对上述问题，虽然现在的浏览器产品中也有对显示界面进行一些调整以适应这一光线变化的技术，如用户根据自己的需求手动调节显示器的背光亮度或者通过在浏览器的显示界面上添加额外的图片来调整所显示的亮度。这两种技术虽然能够取得一定的成效，但手动调节显示器的背光亮度的方式页面显示效果比较生硬，浏览器最终的显示效果仍然不够理想。添加额外的图片的方式显示出的页面还是比较明亮，并且只能针对一些固定的图片，如用户界面中的图片，比如说用户界面的所有图片可以添加两套，一套是正常时候显示的，另外一套是昏暗环境下显示的。而且添加额外的图片的方式还有两个不足
1.增加客户端的体积，因为包含了两套图片；
2.对于网页中这种动态变化的图片无法处理，因为这些图片都不是固定的，均不适宜用户阅读。因此，需要有一种能够使用户不增加客户端负担的情况下满足昏暗环境中舒适浏览网页的技术。
发明内容
鉴于上述问题，本发明的目的是提供一种改进的网页上在昏暗环境下对图片进行显示的处理方案，在无需增加图片的情况下，通过对图片的亮度和色彩进行调整，使之能够在昏暗环境下，以更加柔和协调的方式进行显示，为用户提供一个更加舒适的浏览体验。根据本发明的一个方面，提供了一种昏暗环境下的图片显示方法，包括 判断待显示处理的图片是否背景图片；
如果所述待显示处理的图片不是背景图片，则对所述待显示处理的图片进行覆盖半透明遮罩的处理；否则
所述待显示处理的图片是背景图片，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。其中，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理的步骤进一步包括
进一步判断所述背景图片是否重复填充的背景图片并且填充的区域较大； 如果所述背景图片是重复填充的背景图片并且填充的区域较大，则在显示处理后不显示所述背景图片；否则
对所述背景图片进行覆盖透明度相当于所述覆盖非背景图片的透明度的1/6 1/2的半透明遮罩的处理。根据本发明的另一方面，提供了一种昏暗环境下的图片显示装置，包括 图片类型判断单元，用于判断待显示处理的图片是否背景图片；
前景图片处理单元，用于在所述图片类型判断单元判断出所述待显示处理的图片不是背景图片时，对所述待显示处理的图片进行覆盖半透明遮罩的处理；以及
背景图片处理单元，用于在所述图片类型判断单元判断出所述待显示处理的图片是背景图片时，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。其中，所述背景图片处理单元进一步包括背景图片分析单元，用于分析所述背景图片是否重复填充的背景图片并且填充的区域较大，如果所述背景图片是重复填充的背景图片并且填充的区域较大，则所述背景图片处理单元在显示处理后不显示所述背景图片； 否则所述背景图片处理单元对所述背景图片进行覆盖透明度相当于所述覆盖非背景图片的透明度的半透明遮罩的1/6 1/2的处理。本发明的有益效果包括以下几点
(1)对比其他浏览器没在昏暗环境下对图片处理，本技术在昏暗环境下图片显示进行了亮度和色彩进行调整，能显著提高用户的阅读感受。(2)客户端不需要添加额外的图片，不需增加客户端体积，这对手机这种存储容量受限的设备上更加适合；
(3)对比其他一些复杂的图像处理技术如直接对图片数据进行变换等，本技术对图片的处理较简单，对客户端速度的影响很小，速度要快得多，特别适合在手机这种速度受限的设备上使用。
为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。然而， 这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。
通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中
图1示出了根据本发明昏暗环境下的图片显示方法的流程图；以及图2为本发明对网页前景图片进行处理前后的显示效果对比示意图；图3为本发明对网页背景图片进行处理前后的显示效果对比示意图； 图4为本发明对含透明色的图片进行处理前后的显示效果对比示意5示出了根据本发明昏暗环境下的图片显示装置的方框示意图。在所有附图中相同的标号指示相似或相应的特征或功能。
具体实施例方式以下将结合附图对本发明的具体实施例进行详细描述。本发明通过对浏览器显示的图片覆盖该图片背景区域颜色的半透明遮罩的方法进行变换，从而改变图片的显示亮度和色彩感受，并使其与浏览器的其它显示区域良好的融合，使得浏览器能够在昏暗环境下呈现给用户更佳的效果显示。为了更清楚的表述本发明的技术方案，在本实施例中将浏览器显示的图片分为背景图片和前景图片两类来处理，其中背景图片指的是网页内的背景图；前景图片指的是网页前景图片和用户界面图片，网页前景图片表示网页内的用于前景显示的、表示网页内容的图片，用户界面的图片指的是浏览器中非网页内容部分的其他界面部分的图片。在此，需要说明的是，在本发明中认为用户界面没有背景图片，全部为前景图片。对于网页前景图片或者用户界面的图片，本发明根据接入终端当前用户设置的显示模式，对相关的图片进行覆盖半透明遮罩的变换，从而改变图片的显示亮度和色彩感受， 使之能够在昏暗环境下以更佳的效果进行显示。对于背景图片，则采用透明度低于覆盖前景图片的半透明遮罩的半透明遮罩覆盖，以在昏暗环境下突出前景的其他东西。对前景图片中含有透明底色的图片，为了进一步改善显示效果，相关的图片转换会根据图片所在背景区域的特点进行调整，以保证在图片变换好后能够与网页中其他显示的区域良好地融合。图1示出了根据本发明的昏暗环境下图片显示方法的流程图。如图1所示，在昏暗环境下，用户在浏览器上选择使用昏暗模式下的显示模式后， 浏览器切换显示模式，并启动对浏览器中所显示的背景图片、网页内图片以及用户界面中的图片的显示处理。首先，判断待显示处理的图片是否背景图片(步骤S110)，如果不是背景图片，则说明该图片是前景图片即网页前景图片或者用户界面图片，对该网页前景图片或者用户界面图片进行覆盖半透明遮罩的处理(步骤S120)；如果是背景图片，进一步判断该背景图片是否重复填充的背景图片并且填充的区域较大(步骤S130)，即判断该背景图片上是否设置了 r印eatX或者r印eatY属性，并且不算上缩放比例，填充区域约为两三行文本的高度、两三个字的宽度，实际的长度和宽度大于45 50像素，如果是，则在显示处理后不显示该背景图片，即相当于为该背景图片覆盖透明度为0的半透明遮罩(步骤S140)，否则对该背景图片进行覆盖透明度略小于上述覆盖前景图片的透明度的半透明遮罩的处理(步骤 S150)，一般为覆盖非背景图片的透明度的1/6 1/2即可。在上述步骤S130中判断背景图片是否重复填充的背景图片并且填充的区域较大的过程中，“是否重复填充的背景图片”和“填充的区域较大”两个条件需要同时满足才能进入步骤S140，因为在网页的编辑渲染过程中，一些重复填充的背景图片仅仅是用作网页装饰，并且一般是浅色的，如果显示了反而难看，但又不能对所有重复填充的背景图片都做不显示处理，而一般来说用作装饰用的重复填充的背景图片区域都相对较大，因此在本发明中就取区域较大的且重复填充的背景图做不显示处理，其他情况下就做显示处理。其中对于某些背景图片不显示的原因是，如果在昏暗模式下所有的背景图片都显示的话，就会和昏暗模式下的其他字体的色调冲突(昏暗模式下其他字体已经处理为相对较深的颜色)，造成对比不明显的问题，会影响用户的阅读体验，因此不显示某些背景图片， 基本不会影响网页整体排版，也能提高昏暗模式下的观感。用于覆盖背景图片的半透明遮罩的透明度之所以比覆盖前景图片的半透明遮罩的透明度要小，是因为背景图片需要比前景图片更大比例的降低亮度，即背景图片比前景图片需要亮度更低，才能突出显示出前景图片。也就是说，对于网页来说，背景图片只是配色，不需要显示得那么清楚，亮度相对低一些更能在昏暗的环境下突出前景的内容。具体地，在本发明的一个优选实施例中，步骤120进一步包括如下步骤
5121将前景图片正常显示于终端屏幕上；
5122判断该前景图片的背景是否透明，即该前景图片中是否含有透明色；
S123:如果该前景图片的背景是透明的，则将所述半透明遮罩的颜色设置为该前景图片所在区域的背景颜色，然后转至步骤S125 ；否则转至步骤S1M。具体地，将半透明遮罩的颜色设置为该前景图片所在区域的背景颜色的过程为取出该前景图片所在区域的背景颜色，假设取出的颜色值为SX1X2X3X4X5X6，然后将半透明遮罩的颜色maskColor设置为 =SX1X2X3X4X5X6 ；
SlM:如果该前景图片的背景是不透明的，相当于该前景图片的背景颜色为黑色，则将半透明遮罩的颜色设置为黑色，即设置maskCOlOr=#000000 (黑色)；
S125 在该前景图片所处的矩形区域上覆盖一颜色值为maskColor、透明度为35% 45%的遮罩。在本发明的一个优选实施方式中，步骤S125中在前景图片所处的矩形区域上覆盖的遮罩的透明度优选为40%。通过上述在待显示处理图片上方覆盖一个半透明的遮罩(黑色/背景区域颜色)， 由于黑色和背景区域的颜色均为深色，而昏暗环境下背景区域的颜色已经处理为较深的颜色，因此经过上述显示处理后就能够明显降低终端显示图片的亮度，使得用户浏览起来不会显得那么刺眼。对于含有透明色的图片，即图片背景是透明的，如果覆盖在图片上方的半透明遮罩为黑色的话，透明部分就会显示出黑色，而非背景区域的颜色，这样就会和背景区域的颜色不一致，显得图片不是透明了 ；但是如果使用的是背景区域的颜色去作为半透明遮罩的颜色，则能够保持遮罩后的图片看上去依然是透明的。所以对于含透明色、不含透明色的图片，半透明的遮罩的颜色值会不一样。同样，对于步骤S150，对背景图片进行覆盖透明度小于上述覆盖前景图片的透明度的半透明遮罩的处理的具体过程如下
5151将背景图片正常显示于终端屏幕上；
5152在该背景图片所填充的矩形区域之上再填充一层颜色值为#000000、透明度为
6% 20%的遮罩。在本发明的一个优选实施方式中，步骤S152中在背景图片所填充的矩形区域之上再填充的遮罩的透明度优选为19%。
7
通过上述对图片的处理，在无需要额外添加图片的情况下，通过对已有的图片进行一些较为简单变换，就能够有效地改进网页乃至整个用户界面的图片显示效果。图2、图3和图4分别示出了本发明对不同类型图片处理前后的效果对比示意图。其中图2为对网页前景图片进行处理前后的显示效果对比示意图。如图2所示， 图2 (a)为正常情况下浏览某网页时网页显示效果；图2 (b)为昏暗模式下，已经对网页内的文本进行了处理，但是没有对图片进行处理的网页显示效果，可以看出，没有经过处理的图片显得很亮而且刺眼，不利于用户阅读；图2 (c)为采用本发明对图片进行处理过的的网页显示效果，通过在正常显示该图片后，在上面再覆盖一层半透明(透明度为40%)黑色遮罩的处理，可以看出，显示终端所显示的图片亮度显著较低，在昏暗模式下显得更加柔和，更适合阅读。图3为对网页背景图片进行处理前后的显示效果对比示意图。如图3所示，图3 (a)为正常情况下浏览某网页时网页显示效果，其中“移动运营商讨论版块”、“手机资源版块”处后面为填充的背景图片。图3 (b)为昏暗模式下，已经对网页内的文本进行了处理， 但是没有对背景和前景图片进行处理的网页的显示效果，可以看出，没有经过处理的背景图片和前景图片显得很亮而且刺眼，不利于用户阅读。图3 (c)为昏暗模式下，使用相同透明度的遮罩对背景图片和前景图片采用同样的处理方式进行处理的网页显示效果，可以看出，这种不区分前景图片和背景图片遮罩透明度的处理方式会使得背景图片部分显得较亮，和前景图片以及前面的文字对比不够强烈，也会影响用户的阅读体验。图3 (d)为采用本发明对图片进行处理过的网页显示效果，即在对前景图片进行半透明遮罩的覆盖后，在背景图片的区域上面再覆盖一层透明度比覆盖前景图片的遮罩的透明度低的遮罩，可以看出，显示终端所显示的背景图片的亮度显得更低，在昏暗模式下和文字以及前景图片的对比更加明显，更适合阅读。图4为对用户界面图片中含透明色的图片进行处理前后的显示效果对比示意图。 如图4所示，图4 (a)为正常模式下终端用户界面的显示情况，上方四个图标均为图片，并且均含透明色，即图片四周均为透明。图4 (b)为昏暗模式下，没有经过任何处理的终端用户界面的显示效果，可以看出，没有经过处理的用户界面显得很亮而且刺眼，不利于用户阅读。图4 (c)为昏暗模式下，对该含透明色的图片依然使用黑色半透明遮罩的显示效果，则在图片四周会出现一些残类阴影，不美观。图4 (d)为采用本发明对含有透明色的图片进行处理过的网页显示效果，即在显示完用户界面图片后，再取出该用户界面图片背景区域的颜色值，如当前为深灰色，然后就在此图片区域上加上一层透明度为40%的遮罩，不过颜色值为背景的深灰色，这样处理后背景图片还是显得透明，不会有残影。如上参照图1描述了根据本发明昏暗环境下的图片显示方法。本发明的上述方法，可以采用软件实现，也可以采用硬件实现，或采用软件和硬件组合的方式实现。图5示出了根据本发明昏暗环境下的图片显示装置的方框示意图。如图5所示，图片显示装置包括图片类型判断单元510、前景图片处理单元520和背景图片处理单元530。 其中，图片类型判断单元510用于判断待显示处理的图片是否背景图片；前景图片处理单元520用于在所述图片类型判断单原判断出所述待显示处理的图片不是背景图片时，对所述待显示处理的图片进行覆盖半透明遮罩的处理；背景图片处理单元530，用于在所述图片类型判断单元判断出所述待显示处理的图片是背景图片时，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。其中，优选的，背景图片处理单元530进一步包括背景图片分析单元532，用于分析所述背景图片是否重复填充的背景图片并且填充的区域较大，如果所述背景图片是重复填充的背景图片并且填充的区域较大，则背景图片处理单元530在显示处理后不显示所述背景图片；否则背景图片处理单元530对所述背景图片进行覆盖透明度相当于所述覆盖非背景图片的透明度的1/6 1/2的半透明遮罩的处理。在本发明的一个优选实施方式中，前景图片处理单元520进一步包括 图片显示单元521，用于将所述前景图片正常显示于终端屏幕上；
前景图片分析单元522，用于分析判断所述前景图片中是否含有透明色； 前景图片遮罩生成单元523，用于在所述图片的背景是透明的情况下生成颜色为该图片所在区域的背景颜色的半透明遮罩；在所述图片的背景是不透明的情况下生成颜色为黑色的半透明遮罩；并将所述半透明遮罩的透明度设置为35% 45% ；
前景图片遮罩覆盖单元524，用于将所述前景图片遮罩生成单元生成的半透明遮罩覆盖在所述前景图片所处的矩形区域上。作为更为优选的实施例，前景图片遮罩生成单元将所述半透明遮罩的透明度设置为 40% ο背景图片处理单元530进一步包括
背景图片显示单元531，用于将所述背景图片正常显示于终端屏幕上； 背景图片遮罩生成单元533，用于根据所述背景图片分析单元对背景图片的分析结果生成半透明遮罩；
背景图片遮罩覆盖单元534，用于将所述背景图片遮罩生成单元生成的半透明遮罩覆盖在所述背景图片所处的矩形区域上。在本发明的一个优选实施方式中，背景图片遮罩生成单元所生成的半透明遮罩为颜色值为#000000、透明度为6% 20%的遮罩。本发明针对网页图片的来源一般对客户端是不可控，在无需要额外添加图片的情况下，通过对已有的图片进行一些较为简单变换，有效地改进了网页乃至整个用户界面的图片显示效果，提升了产品的用户体验，并且有助于保护用户的视力，同时，本发明的技术也有助于减少终端应用程序的安装体积和内存消耗。如上参照图1和图2以示例的方式描述根据本发明的图片显示方法和装置。但是， 本发明不单可以应用于网页的浏览，还可以进一步扩展到所有其它用户界面的图片处理， 通过采用大致相同的技术手段，能够在无需增加新图片的方式下将这个界面的图片等其他区域的元素进行亮度和色彩的调整，达到在昏暗环境下为用户提供一个更好的观看体验。 因此，本领域技术人员应当理解，对于上述本发明所提出的图片显示方法及装置，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。
权利要求
1.一种昏暗环境下的图片显示方法，包括 判断待显示处理的图片是否背景图片；如果所述待显示处理的图片不是背景图片，则对所述待显示处理的图片进行覆盖半透明遮罩的处理；否则所述待显示处理的图片是背景图片，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。
2.如权利要求1所述的图片显示方法，其中，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理的步骤进一步包括进一步判断所述背景图片是否重复填充的背景图片并且填充的区域较大； 如果所述背景图片是重复填充的背景图片并且填充的区域较大，则在显示处理后不显示所述背景图片；否则对所述背景图片进行覆盖透明度相当于所述覆盖非背景图片的透明度的1/6 1/2的半透明遮罩的处理。
3.如权利要求2所述的图片显示方法，其中，所述对背景图片进行覆盖透明度小于上述覆盖前景图片的透明度的半透明遮罩的处理的具体过程如下5151将背景图片正常显示于终端屏幕上；5152在该背景图片所填充的矩形区域之上再填充一层颜色值为#000000、透明度为 6% 20%的遮罩。
4.如权利要求3所述的图片显示方法，其中，在所述步骤S152中， 在背景图片所填充的矩形区域之上再填充的遮罩的透明度为19%。
5.如权利要求1所述的图片显示方法，其中，如果所述待显示处理的图片不是背景图片，则所述待显示处理的图片为前景图片，对所述前景图片进行覆盖半透明遮罩的处理的步骤还包括5121将所述图片正常显示于终端屏幕上；5122判断所述图片中是否含有透明色；S123:如果该前景图片的背景是透明的，则将所述半透明遮罩的颜色设置为该前景图片所在区域的背景颜色，然后转至步骤S125 ；否则转至步骤SlM ；具体地，将半透明遮罩的颜色设置为该前景图片所在区域的背景颜色的过程为取出该前景图片所在区域的背景颜色，假设取出的颜色值为SX1X2X3X4X5X6，然后将半透明遮罩的颜色maskColor设置为 =SX1X2X3X4X5X6 ；SlM:如果该前景图片的背景是不透明的，相当于该前景图片的背景颜色为黑色，则将半透明遮罩的颜色设置为黑色，即设置maskCOlOr=#000000 ；S125 在该前景图片所处的矩形区域上覆盖一颜色值为maskColor、透明度为35% 45%的遮罩。
6.如权利要求5所述的图片显示方法，其中，在所述步骤S125中， 在前景图片所处的矩形区域上覆盖的遮罩的透明度为40%。
7.一种昏暗环境下的图片显示装置，包括图片类型判断单元，用于判断待显示处理的图片是否背景图片； 前景图片处理单元，用于在所述图片类型判断单元判断出所述待显示处理的图片不是背景图片时，对所述待显示处理的图片进行覆盖半透明遮罩的处理；以及背景图片处理单元，用于在所述图片类型判断单元判断出所述待显示处理的图片是背景图片时，对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。
8.如权利要求7所述的图片显示装置，其中，所述背景图片处理单元进一步包括背景图片分析单元，用于分析所述背景图片是否重复填充的背景图片并且填充的区域较大，如果所述背景图片是重复填充的背景图片并且填充的区域较大，则所述背景图片处理单元在显示处理后不显示所述背景图片；否则所述背景图片处理单元对所述背景图片进行覆盖透明度相当于所述覆盖非背景图片的透明度的1/6 1/2的半透明遮罩的处理。
9.如权利要求8所述的图片显示装置，其中，所述背景图片处理单元进一步包括 背景图片显示单元，用于将所述背景图片正常显示于终端屏幕上；背景图片遮罩生成单元，用于根据所述背景图片分析单元对背景图片的分析结果生成半透明遮罩；背景图片遮罩覆盖单元，用于将所述背景图片遮罩生成单元生成的半透明遮罩覆盖在所述背景图片所处的矩形区域上。
10.如权利要求9所述的图片显示装置，其中，所述背景图片遮罩生成单元所生成的半透明遮罩为颜色值为#000000、透明度为6% 20%的遮罩。
11.如权利要求8所述的图片显示装置，其中，所述前景图片处理单元进一步包括 前景图片显示单元，用于将所述前景图片正常显示于终端屏幕上；前景图片分析单元，用于分析判断所述前景图片中是否含有透明色； 前景图片遮罩生成单元，用于在所述图片的背景是透明的情况下生成颜色为该图片所在区域的背景颜色的半透明遮罩；在所述图片的背景是不透明的情况下生成颜色为黑色的半透明遮罩；并将所述半透明遮罩的透明度设置为35% 45% ；前景图片遮罩覆盖单元，用于将所述前景图片遮罩生成单元生成的半透明遮罩覆盖在所述前景图片所处的矩形区域上。
12.如权利要求11所述的图片显示装置，其中，所述前景图片遮罩生成单元将所述半透明遮罩的透明度设置为40%。
全文摘要
本发明提供了一种昏暗环境下的图片显示方法及装置，该方法包括判断待显示处理的图片是否背景图片；如果所述待显示处理的图片不是背景图片，则对所述待显示处理的图片进行覆盖半透明遮罩的处理；否则进一步判断所述待显示处理的图片是否重复填充的背景图片并且填充的区域较大；如果所述待显示处理的图片是重复填充的背景图片并且填充的区域较大，则在显示处理后不显示所述背景图片；否则对所述背景图片进行覆盖透明度小于所述覆盖非背景图片的透明度的半透明遮罩的处理。利用本发明，在无需要额外添加图片的情况下，能够有效地改进网页乃至整个用户界面的图片显示效果，提升产品的用户体验。
文档编号G06F17/30GK102163216SQ20111007150
公开日2011年8月24日 申请日期2011年3月24日 优先权日2010年11月24日
发明者李海翔, 梁捷 申请人:广州市动景计算机科技有限公司