CN103761079B - 页面自动变灰的方法和装置 - Google Patents

Abstract

本发明公开了一种页面自动变灰的方法和装置；其中的方法包括：获取页面的源程序代码；从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；根据图片的名称以及存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储信息与所述图片在所述页面的源程序代码中的存储信息对应设置；将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

Description

页面自动变灰的方法和装置

技术领域

本发明涉及网络通讯技术，具体涉及一种页面自动变灰的方法以及页面自动变灰的装置。

背景技术

网站有时会有将其页面变灰的需求，例如，在国家遇到重大灾难或者到某些纪念日时，为了表示哀悼或者缅怀等情感，很多网站都会将其页面变成灰度页面。

现有的将页面变灰的方式通常为：网站服务器在接收到浏览器客户端通过其所在的终端设备发送来的请求消息后，在其向浏览器客户端下发的消息（如HTTP消息）的消息内容中插入滤镜属性或者CSS3gray参数等，并向浏览器客户端所在的终端设备下发该消息；浏览器客户端在终端设备接收到服务器下发的消息后，对该消息进行解析和渲染处理，且浏览器客户端会在解析和渲染处理过程中根据消息中的滤镜属性或者CSS3gray参数对该消息中的图片或者字体或者背景等的颜色进行相应的处理，从而浏览器客户端为用户呈现出灰度页面。

发明人在实现本发明过程中发现，利用上述方式将页面变灰由于需要浏览器客户端在页面解析和渲染过程中进行变色处理，因此，浏览器客户端向用户显示页面的速度会受到很大的影响，在页面内容较多的情况下，会出现浏览器客户端无法向用户正常显示页面的情况。另外，为了避免页面显示速度问题，网站服务器通常仅会在网站首页内容下发时，在消息的消息内容中插入滤镜属性或者CSS3gray参数等，这样，除了网站首页之外的网页往往不会被显示为灰度页面。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的页面自动变灰的方法以及相应的页面自动变灰的装置。

依据本发明的一个方面，提供了一种页面自动变灰的方法，所述方法包括：获取页面的源程序代码；从页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储信息与所述图片在所述页面的源程序代码中的存储信息对应设置；将该颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

根据本发明的另一方面，提供了一种页面自动变灰的装置，其中，所述装置包括：获取模块，适于获取页面的源程序代码；识别模块，适于从页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；第一转换模块，适于根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储与所述图片在所述页面的源程序代码中的存储信息对应设置；第二转换模块，适于将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

本发明的页面自动变灰的方法以及装置通过对页面的源程序代码进行识别，可以方便快捷准确的获得页面中的图片的存储路径信息以及颜色变量对应的颜色值，通过将存储路径信息对应的图片转换为灰度图片，将颜色值转换为灰度值，并将灰度图片的存储位置与图片在页面的源程序代码中的存储路径信息对应设置，将灰度值更新页面的源程序代码中颜色变量对应的颜色值，这样，利用更新后的源程序代码向浏览器客户端下发的页面内容即为基于灰度页面的页面内容，从而本发明在不需要浏览器客户端执行变色处理的情况下，即可为用户呈现出灰度页面；而且，为用户呈现的灰度页面不仅可以是网站首页，还可以是其他页面；另外，由于向用户下发的页面内容中的图片为灰度图片，而不是彩色图片，因此，本发明还可以提高页面访问速度。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。说明书附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明实施例一的页面自动变灰的方法流程图；

图2示出了根据本发明实施例二的页面自动变灰的装置示意图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

实施例一、页面自动变灰的方法。下面结合图1对本实施例的方法进行详细说明。

图1中，S100、获取页面的源程序代码。

具体的，本实施例中的页面也可以称为WEB页面，且该WEB页面可以是网站首页的WEB页面，也可以是网站首页下的子链接对应的WEB页面。

WEB页面通常会引用Javascript、CSS（Cascading Style Sheets，级联样式表）、图片、Flash以及视频等资源。WEB页面的源程序代码主要用于设计网站网页，且WEB网页的源程序代码通常会包括HTML程序代码以及CSS程序代码等。

本步骤中的获取页面的源程序代码可以包括：获取需要进行页面变灰处理的页面所对应的源程序代码的文件名称等，进而根据该文件名称获取到页面的源程序代码。

S110、从页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值，之后，分别到S120以及S130。

具体的，本步骤需要在页面的源程序代码中查找需要进行颜色变灰处理的内容（也即对象或者颜色转换对象）。在通常情况下，WEB网页中需要将颜色变为灰色的内容主要是图片以及CSS中所使用的颜色（如背景颜色以及字体颜色等），也就是说，本发明实施例需要针对图片以及CSS中所使用的颜色进行识别，识别过程中所使用到的关键词（也可以称为特定字符）可以包括图片标签如“img”等，也可以包括图片名称后缀，如“.png”或者“.jpg”等；还可以包括颜色变量的名称，如“color：”等。

一个具体的例子，设定一页面的源程序代码既包含有HTML代码，还包含有CSS代码，且HTML代码和CSS代码分别如下：

HTML代码：

新一代安全上网导航

CSS代码:

在上述HTML代码中，涉及到的图片包括“logo.png”和“1.jpg”；其中，图片“logo.png”的存储路径信息为“.././resources/img/”，而图片“1.jpg”的存储路径信息为“../../resources/img/”。通过利用正则表达式（如包括“img”、“.jpg”以及“.png”在内的正则表达式）等方式对上述HTML代码进行识别，可以准确定位出图片“logo.png”的存储路径信息“.././resources/img/”以及图片“1.jpg”的存储路径信息“../../resources/img/”。

在上述CSS代码中，所使用到的颜色值包括：.cls中的“#888”和“#00ff00”以及header中的“#ff0000”，且上述CSS代码中还涉及到图片“2.jpg”。通过利用正则表达式（如包括“color：”在内的正则表达式）等方式对上述CSS代码进行识别，可以准确定位出颜色值“#888”、“#00ff00”以及“#ff0000”；通过正则表达式（如包括“img”、“.jpg”以及“.png”在内的正则表达式）等方式对上述CSS代码进行识别，可以准确定位出图片“2.jpg”的存储路径信息“../img/”。

本步骤利用正则表达式（如利用“img”、“.jpg”、“.png”、“color：”以及“/”等特定字符形成的正则表达式）等方式从源程序代码中识别并获取图片的存储路径信息以及颜色变量对应的颜色值的具体实现过程在此不再详细说明。

S120、根据识别获取到的图片的名称以及存储路径信息获取图片，之后到S121。

具体的，根据上述识别而获取到的图片的名称以及图片的存储路径信息可以准确的定位到唯一的一张图片，从而可以获取到唯一的一张图片。

S121、将该图片转换为灰度图片，之后，到S122。

具体的，本实施例可以采用现有的图片转换工具将获取到的图片转换为灰度图片，例如，本实施例可以通过调用Imagemagic函数库中的图像过滤器函数将上述获取到的图片转换为灰度图片；再例如，通过调用Php gd函数库中的图像过滤器函数将上述获取到的图片转换为灰度图片。

一个具体的例子，在使用Php gd函数库中的图像过滤器函数将图片转换为灰度图片可以使用下述程序代码实现：

$img=imagecreatefrompng($filePath);

imagefilter($img,IMG_FILTER_GRAYSCALE);

imagealphablending($img,false);

imagesavealpha($img,true);

imagepng($img,$filePath);

imagedestroy($img);

其中，如果上述filePath被设置为.././resources/img/logo.png，则图片“logo.png”被转换为灰度图片；如果上述程序代码中的filePath被设置为../../resources/img/1.jpg，则图片“1.jpg”被转换为灰度图片；如果上述程序代码中的filePath被设置为../img/2.jpg，则图片“2.jpg”被转换为灰度图片。

S122、将该灰度图片的存储信息与图片在上述页面的源程序代码中的存储信息对应设置。

具体的，本步骤的主要目的是：将页面的源程序代码中的图片的存储信息与灰度图片的实际存储信息相对应，以便于在利用源程序代码形成具体的页面时，所提取到的图片为转换后的灰度图片，而不是原来的图片（如彩色图片）。

上述存储信息可以为图片的存储路径信息以及图片名称，本实施例可以采用下述四种方式实现上述对应设置：

方式一、将转换后的灰度图片按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，且该灰度图片的图片名称与原图片的图片名称相同，从而使对应上述存储路径信息的原图片被转换后的灰度图片所覆盖；即利用页面的源程序代码中的原图片的存储路径信息以及原图片的图片名称可以获取到转换后的灰度图片。该方式不需要对页面的源程序代码进行修改，是一种较好的实现方式。

方式二、将转换后的灰度图片按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，且该灰度图片的图片名称与原图片的图片名称不相同，从而使转换后的灰度图片不会覆盖上述原图片；本方式需要修改页面的源程序代码中的原图片的图片名称，使修改后的源程序代码中的原图片的存储路径信息和新的图片名称与灰度图片的实际存储路径信息和图片名称相对应，即利用修改后的源程序代码中的原图片的存储路径信息以及转换后的灰度图片的图片名称可以获取到转换后的灰度图片。该方式保留了原图片。

方式三、转换后的灰度图片不再按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，而是存储于其他地方，从而使该灰度图片对应一条不同于原图片的存储路径信息的新的存储路径信息，但是，该灰度图片的图片名称可以与原图片的图片名称相同；本方式需要修改源程序代码中的原图片的存储路径信息但不需要修改原图片的图片名称，使修改后的源程序代码中的新的存储路径信息和原图片的图片名称与灰度图片的实际存储路径信息和灰度图片的图片名称相对应，即利用修改后的源程序代码中的新的存储路径信息以及原图片的图片名称可获取到转换后的灰度图片。该方式保留了原图片。

方式四、转换后的灰度图片不再按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，而是存储于其他地方，从而使该灰度图片对应一条不同于原图片的存储路径信息的新的存储路径信息，而且，该灰度图片的图片名称与原图片的图片名称不相同；本方式需要修改源程序代码中的原图片的存储路径信息以及原图片的图片名称，使修改后的源程序代码中的新的存储路径信息和新的图片名称与灰度图片的实际存储路径信息和灰度图片的图片名称相对应，即利用修改后的源程序代码中的新的存储路径信息以及新的图片名称可以获取到转换后的灰度图片。该方式保留了原图片。

S130、将颜色变量对应的颜色值转换为灰度值，之后，到S131。

具体的，本步骤的执行与上述S120的执行没有必然的先后顺序限制，如在查找到一个需要进行颜色变灰处理的内容就执行一次转换的情况下，S120和S130执行转换操作的先后顺序取决于从网页的源程序代码中获取到的需要进行颜色变灰处理的内容的先后顺序；再例如，在从网页的源程序代码中查找到所有的需要进行颜色变灰处理的内容之后再执行转换的情况下，S120和S130在通常情况下会同时执行转换操作。

针对采用十六进制颜色值的背景颜色以及字体颜色等，将其颜色值转换为灰度值时，应先将该十六进制颜色值转换为RGB颜色值，然后，再将RGB颜色值转换为灰度值。

将十六进制颜色值转换为RGB颜色值的一个具体例子如下所示：

在将十六进制的颜色值转换为RGB颜色值后，可以通过下面的公式（1）将RGB颜色转换为灰度值：

$gray=intval($color['R']×0.299+$color['G']×0.587+$color['B']×0.114); 公式（1）

S131、利用上述转换后的灰度值更新页面的源程序代码中颜色变量对应的颜色值。

具体的，针对S110中例举的CSS代码，在将其所包含的十六进制的颜色值（即.cls中的“#888”和“#00ff00”以及header中的“#ff0000”）转换为灰度值，并利用该灰度值替换页面的源程序代码中的颜色变量对应的颜色值之后，CSS代码如下所示：

CSS代码:

经过上述处理后而形成的更新后的页面的源程序代码主要用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。也就是说，本实施例的方法还可以将经过上述处理后而形成的更新后的页面的源程序代码上线，使更新后的页面的源程序代码设置于网站服务器中。一个具体的例子，在针对页面的源程序代码中的所有图片以及所有颜色变量均处理完成后，将页面的源程序代码上线，之后，网站服务器在接收到浏览器客户端传输来的页面请求后，根据该页面对应的源程序代码向浏览器客户端下发承载有基于灰度图片以及灰度值的页面内容的消息，从而浏览器客户端在接收到该消息后，直接对该消息进行解析和渲染，即可为用户呈现出灰度页面。

由上述描述可知，在将彩色图片转换为灰度图片后，可以大大减少图片的文件大小，如图片1.jpg的文件大小会从110K减小到38K，从而本发明实施例可以提升页面的访问速度，使用户浏览页面更快捷。

实施例二、页面自动变灰的装置。该页面自动变灰的装置可以设置于开发网页的设备中，也可以设置于网站的服务器中。下面结合图2对本实施例的装置进行详细说明。

图2中示出的装置主要包括：获取模块200、识别模块210、第一转换模块220以及第二转换模块230。

获取模块200与识别模块210连接；获取模块200主要适于获取页面的源程序代码。

具体的，获取模块200所获取的网页的源程序代码通常会包括HTML程序代码以及CSS程序代码等。获取模块200可以先获取需要进行页面变灰处理的页面所对应的源程序代码的文件名称，进而可以根据该文件名称获得该页面的源程序代码。

识别模块210除了与获取模块200连接之外，还与第一转换模块220以及第二转换模块230分别连接；识别模块210主要适于从页面的源程序代码中获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值。

具体的，识别模块210需要在页面的源程序代码中查找需要进行颜色变灰处理的内容（也即对象或者颜色转换对象）。在通常情况下，WEB网页中需要将颜色变为灰色的内容主要是图片以及CSS中所使用的颜色（如背景颜色以及字体颜色等），也就是说，识别模块210需要针对图片以及CSS中所使用的颜色进行识别，识别过程中所使用到的关键词（也可以称为特定字符）可以包括图片标签如“img”等，也可以包括图片名称后缀，如“.png”或者“.jpg”等；还可以包括颜色变量的名称，如“color：”等。

一个具体的例子，设定一页面的源程序代码既包含有HTML代码，还包含有CSS代码，且HTML代码和CSS代码分别如下：

HTML代码：

新一代安全上网导航

CSS代码:

在上述HTML代码中，涉及到的图片包括“logo.png”和“1.jpg”；其中，图片“logo.png”的存储路径信息为“.././resources/img/”，而图片“1.jpg”的存储路径信息为“../../resources/img/”。识别模块210通过利用正则表达式（如包括“img”、“.jpg”以及“.png”在内的正则表达式）等方式对上述HTML代码进行识别，可以准确定位出图片“logo.png”的存储路径信息“.././resources/img/”以及图片“1.jpg”的存储路径信息“../../resources/img/”。

在上述CSS代码中，所使用到的颜色值包括：.cls中的“#888”和“#00ff00”以及header中的“#ff0000”，且上述CSS代码中还涉及到图片“2.jpg”。识别模块210通过利用正则表达式（如包括“color：”在内的正则表达式）等方式对上述CSS代码进行识别，可以准确定位出颜色值“#888”、“#00ff00”以及“#ff0000”；识别模块210通过正则表达式（如包括“img”、“.jpg”以及“.png”在内的正则表达式）等方式对上述CSS代码进行识别，可以准确定位出图片“2.jpg”的存储路径信息“../img/”。

识别模块210利用正则表达式（如利用“img”、“.jpg”、“.png”、“color：”以及“/”等特定字符形成的正则表达式）等方式从源程序代码中识别并获取图片的存储路径信息以及颜色变量对应的颜色值的具体实现过程在此不再详细说明。

第一转换模块220与识别模块210连接；第一转换模块220主要适于根据图片的名称和存储路径信息获取图片，将图片转换为灰度图片，并将该灰度图片的存储与上述图片在页面的源程序代码中的存储信息对应设置。

具体的，第一转换模块220根据识别模块210识别而获取到的图片的名称以及图片的存储路径信息可以准确的定位到唯一的一张图片，从而第一转换模块220可以获取到唯一的一张图片。

第一转换模块220可以采用现有的图片转换工具将其获取到的图片转换为灰度图片，例如，第一转换模块220可以通过调用Imagemagic函数库中的图像过滤器函数将上述获取到的图片转换为灰度图片；再例如，第一转换模块220可以通过调用Php gd函数库中的图像过滤器函数将上述获取到的图片转换为灰度图片。

一个具体的例子，在使用Php gd函数库中的图像过滤器函数将图片转换为灰度图片的情况下，第一转换模块220可以利用下述程序代码实现（即第一转换模块220包括下述程序代码）：

$img=imagecreatefrompng($filePath);

imagefilter($img,IMG_FILTER_GRAYSCALE);

imagealphablending($img,false);

imagesavealpha($img,true);

imagepng($img,$filePath);

imagedestroy($img);

其中，如果上述filePath被第一转换模块220设置为.././resources/img/logo.png，则图片“logo.png”被转换为灰度图片；如果上述程序代码中的filePath被第一转换模块220设置为../../resources/img/1.jpg，则图片“1.jpg”被转换为灰度图片；如果上述程序代码中的filePath被第一转换模块220设置为../img/2.jpg，则图片“2.jpg”被转换为灰度图片。

第一转换模块220可以采用下述四种方式实现上述灰度图片的存储与上述图片在页面的源程序代码中的存储信息的对应设置：

方式一、第一转换模块220将转换后的灰度图片按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，且该灰度图片的图片名称与原图片的图片名称相同，从而第一转换模块220使对应上述存储路径信息的原图片被转换后的灰度图片所覆盖；即利用页面的源程序代码中的原图片的存储路径信息和原图片的图片名称可以获取到第一转换模块220转换后的灰度图片。该方式不需要第一转换模块220对页面的源程序代码进行修改，是一种较好的实现方式。

方式二、第一转换模块220将转换后的灰度图片按照页面的源程序代码中的相应图片（即原图片）的存储路径信息进行存储，且该灰度图片的图片名称与原图片的图片名称不相同，从而第一转换模块220使转换后的灰度图片不会覆盖上述原图片；第一转换模块220需要修改页面的源程序代码中的原图片的图片名称，使修改后的源程序代码中的原图片的存储路径信息和新的图片名称与灰度图片的实际存储路径信息和图片名称相对应，即利用修改后的源程序代码中的原图片的存储路径信息以及转换后的灰度图片的图片名称可以获取到转换后的灰度图片。该方式保留了原图片。

方式三、第一转换模块220不再按照页面的源程序代码中的相应图片（即原图片）的存储路径信息来对转换后的灰度图片进行存储，而是将转换后的灰度图片存储于其他地方，从而第一转换模块220使该灰度图片对应一条不同于原图片的存储路径信息的新的存储路径信息，但是，该灰度图片的图片名称可以与原图片的图片名称相同；第一转换模块220需要修改源程序代码中的原图片的存储路径信息但不需要修改原图片的图片名称，使修改后的源程序代码中的新的存储路径信息和原图片的图片名称与灰度图片的实际存储路径信息和灰度图片的图片名称相对应，即利用修改后的源程序代码中的新的存储路径信息以及原图片的图片名称可获取到转换后的灰度图片。该方式保留了原图片。

方式四、第一转换模块220不再按照页面的源程序代码中的相应图片（即原图片）的存储路径信息来对转换后的灰度图片进行存储，而是将转换后的灰度图片存储于其他地方，从而第一转换模块220使该灰度图片对应一条不同于原图片的存储路径信息的新的存储路径信息，而且，该灰度图片的图片名称与原图片的图片名称不相同；第一转换模块220需要修改源程序代码中的原图片的存储路径信息以及原图片的图片名称，使修改后的源程序代码中的新的存储路径信息和新的图片名称与灰度图片的实际存储路径信息和灰度图片的图片名称相对应，即利用修改后的源程序代码中的新的存储路径信息以及新的图片名称可以获取到转换后的灰度图片。该方式保留了原图片。

第二转换模块230与识别模块210连接，第二转换模块230主要适于将颜色变量对应的颜色值转换为灰度值，并利用灰度值更新页面的源程序代码中颜色变量对应的颜色值。

具体的，第二转换模块230所执行的操作与上述第一转换模块230所执行的操作没有必然的先后顺序限制，例如，在查找到一个需要进行颜色变灰处理的内容就执行一次转换的情况下，第二转换模块230和第一转换模块230所执行的转换操作的先后顺序取决于识别模块210从网页的源程序代码中查找到需要进行颜色变灰处理的内容的先后顺序；再例如，在识别模块210从网页的源程序代码中查找到所有需要进行颜色变灰处理的内容之后再执行转换的情况下，第二转换模块230和第一转换模块230在通常情况下会同时执行转换操作。

针对采用十六进制颜色值的背景颜色以及字体颜色等，在将其颜色值转换为灰度值时，第二转换模块230应先将该十六进制颜色值转换为RGB颜色值，然后，第二转换模块230再将RGB颜色值转换为灰度值。

第二转换模块230将十六进制颜色值转换为RGB颜色值的一个具体例子如下所示（第二转换模块230包含有下述程序代码）：

在将十六进制的颜色值转换为RGB颜色值后，第二转换模块230可以通过下面的公式（1）将RGB颜色转换为灰度值：

$gray=intval($color['R']×0.299+$color['G']×0.587+$color['B']×0.114); 公式（1）

针对在识别模块210描述中所例举的CSS代码，在第二转换模块230将其所包含的十六进制的颜色值（即.cls中的“#888”和“#00ff00”以及header中的“#ff0000”）转换为灰度值，并利用该灰度值替换页面的源程序代码中的颜色变量对应的颜色值之后，CSS代码如下所示：

CSS代码:

经过上述第一转换模块220和第二转换模块230处理后而形成的更新后的页面的源程序代码主要用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。也就是说，本装置还可以将经过上述处理后而形成的更新后的页面的源程序代码上线，使更新后的页面的源程序代码设置于网站服务器中。

A1、一种页面自动变灰的方法，其包括：

获取页面的源程序代码；

从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；

根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储信息与所述图片在所述页面的源程序代码中的存储信息对应设置；

将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；

所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

A2、如A1所述的方法，其中，所述从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值包括：

根据图片标签、图片名称后缀以及颜色变量的名称从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值。

A3、如A1所述的方法，其中，所述将所述图片转换为灰度图片包括：

调用Imagemagic函数库中的图像过滤器函数将所述图片转换为灰度图片；或者

调用Php gd函数库中的图像过滤器函数将所述图片转换为灰度图片。

A4、如A1所述的方法，其中，所述将所述灰度图片的存储位置与所述图片在所述页面的源程序代码中的存储路径信息对应设置包括：

根据所述页面的源程序代码中的图片的存储路径信息存储所述灰度图片，使所述灰度图片覆盖原存储于所述存储路径信息中的图片。

A5、如A1所述的方法，其中，所述将所述颜色变量对应的颜色值转换为灰度值包括：

将所述颜色变量对应的颜色值转换为RGB颜色值，再将所述RGB颜色值转换为灰度值。

A6、如A5所述的方法，其中，所述将所述RGB颜色值转换为灰度值包括:

利用下述公式将所述RGB颜色值转换为灰度值：

$gray=intval（$color['R']×0.299+$color['G']×0.587+$color['B']×0.114)。

A7、如A1至A6中任一所述的方法，其中，所述方法还包括：

将所述更新后的页面的源程序代码上线，使所述更新后的页面的源程序代码设置于网站服务器中。

B8、一种页面自动变灰的装置，其包括：

获取模块，适于获取页面的源程序代码；

识别模块，适于从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；

第一转换模块，适于根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储与所述图片在所述页面的源程序代码中的存储信息对应设置；

第二转换模块，适于将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；

所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

B9、如B8所述的装置，其中，所述识别模块还适于：

根据图片标签、图片名称后缀以及颜色变量的名称从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值。

B10、如B8所述的装置，其中，所述第一转换模块还适于：

调用Imagemagic函数库中的图像过滤器函数将所述图片转换为灰度图片；或者

调用Php gd函数库中的图像过滤器函数将所述图片转换为灰度图片。

B11、如B8所述的装置，其中，所述第一转换模块还适于：

根据所述页面的源程序代码中的图片的存储路径信息存储所述灰度图片，使所述灰度图片覆盖原存储于所述存储路径信息中的图片。

B12、如B8所述的装置，其中，所述第二转换模块还适于：

将所述颜色变量对应的颜色值转换为RGB颜色值，再将所述RGB颜色值转换为灰度值。

B13、如B12所述的装置，其中，所述第二转换模块还适于：

利用下述公式将所述RGB颜色值转换为灰度值：

$gray=intval（$color['R']×0.299+$color['G']×0.587+$color['B']×0.114)。

B14、如B8至B13中任一所述的装置，其中，所述装置还包括：

将所述更新后的页面的源程序代码上线，使所述更新后的页面的源程序代码设置于网站服务器中。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书（包括伴随的权利要求、摘要和附图）中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书（包括伴随的权利要求、摘要和附图）中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的页面自动变灰的装置中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序（例如，计算机程序和计算机程序产品）。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是，上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

Claims (14)

1.一种页面自动变灰的方法，其包括：

获取页面的源程序代码；

从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；

根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储信息与所述图片在所述页面的源程序代码中的存储信息对应设置；

将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；

所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

2.如权利要求1所述的方法，其中，所述从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值包括：

根据图片标签、图片名称后缀以及颜色变量的名称从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值。

3.如权利要求1所述的方法，其中，所述将所述图片转换为灰度图片包括：

调用Imagemagic函数库中的图像过滤器函数将所述图片转换为灰度图片；或者

调用Php gd函数库中的图像过滤器函数将所述图片转换为灰度图片。

4.如权利要求1所述的方法，其中，所述将所述灰度图片的存储信息与所述图片在所述页面的源程序代码中的存储信息对应设置包括：

根据所述页面的源程序代码中的图片的存储路径信息存储所述灰度图片，使所述灰度图片覆盖原存储于所述存储路径信息中的图片。

5.如权利要求1所述的方法，其中，所述将所述颜色变量对应的颜色值转换为灰度值包括：

将所述颜色变量对应的颜色值转换为RGB颜色值，再将所述RGB颜色值转换为灰度值。

6.如权利要求5所述的方法，其中，所述将所述RGB颜色值转换为灰度值包括：

利用下述公式将所述RGB颜色值转换为灰度值：

$gray＝intval($color[′R′]×0.299+$color[′G′]×0.587+$color[′B′]×0.114)。

7.如权利要求1至6中任一权利要求所述的方法，其中，所述方法还包括：

将所述更新后的页面的源程序代码上线，使所述更新后的页面的源程序代码设置于网站服务器中。

8.一种页面自动变灰的装置，其包括：

获取模块，适于获取页面的源程序代码；

识别模块，适于从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值；

第一转换模块，适于根据所述图片的名称和存储路径信息获取图片，将所述图片转换为灰度图片，并将所述灰度图片的存储与所述图片在所述页面的源程序代码中的存储信息对应设置；

第二转换模块，适于将所述颜色变量对应的颜色值转换为灰度值，并利用所述灰度值更新所述页面的源程序代码中颜色变量对应的颜色值；

所述更新后的页面的源程序代码用于网站服务器根据浏览器客户端的页面请求向浏览器客户端下发承载有相应页面内容的消息。

9.如权利要求8所述的装置，其中，所述识别模块还适于：

根据图片标签、图片名称后缀以及颜色变量的名称从所述页面的源程序代码中识别并获取页面中图片的名称、图片的存储路径信息以及颜色变量对应的颜色值。

10.如权利要求8所述的装置，其中，所述第一转换模块还适于：

调用Imagemagic函数库中的图像过滤器函数将所述图片转换为灰度图片；或者

调用Php gd函数库中的图像过滤器函数将所述图片转换为灰度图片。

11.如权利要求8所述的装置，其中，所述第一转换模块还适于：

根据所述页面的源程序代码中的图片的存储路径信息存储所述灰度图片，使所述灰度图片覆盖原存储于所述存储路径信息中的图片。

12.如权利要求8所述的装置，其中，所述第二转换模块还适于：

将所述颜色变量对应的颜色值转换为RGB颜色值，再将所述RGB颜色值转换为灰度值。

13.如权利要求12所述的装置，其中，所述第二转换模块还适于：

利用下述公式将所述RGB颜色值转换为灰度值：

$gray＝intval($color[′R′]×0.299+$color[′G′]×0.587+$color[′B′]×0.114)。

14.如权利要求8至13中任一权利要求所述的装置，其中，所述装置还包括：

将所述更新后的页面的源程序代码上线，使所述更新后的页面的源程序代码设置于网站服务器中。