CN103543995B - 一种网站换肤的方法及装置 - Google Patents

Abstract

本发明公开了一种网站换肤的方法及装置，包括生成变色配置文件，根据目标颜色，按照生成的变色配置文件进行网站换肤。本发明支持对图片和样式文件素材变色，由于变色和模板修改都是自动完成的，因此，大大增强了颜色可变的范围，提高了更换素材颜色的灵活性，减少了人为制作发布素材的工作量。

Description

一种网站换肤的方法及装置

技术领域

本发明涉及换肤技术，尤指一种网站换肤的方法及装置。

背景技术

对于大多数网站来说，一个页面除了中心的主题内容外，其它内容都是所有页面共有的网站标志、菜单导航等公共元素。通常，在页面改版时，主要是针对公共元素重新设计菜单、背景以及排版方式等，而对于中心的主题内容如文字或图片等，是不会有改动的。换肤就是指实现对公共元素的颜色的替换。

网站换肤功能已广泛应用于WEB领域。各大门户网站首页均有更换皮肤功能，比如：腾讯网站www.qq.com的首页导航部分等。

目前，网站换肤主要是通过更改网页的样式表，来改变文字边框等超文本标记语言(HTML)元素的颜色，通过预先制作好的图片模板更换图片类元素的颜色。无疑，现有网站换肤的方法，每添加一种新的皮肤颜色都需要前台技术人员配合开发，不能实现自动化；而且，对于图片类元素需要预先制作好几种颜色的图片，可选择的颜色也比较单一，素材制作由工作人员人为完成，模板制作、模板更换程序都比较繁琐。

发明内容

有鉴于此，本发明的主要目的在于提供一种网站换肤的方法及装置，能够丰富网站素材颜色的范围，提高更换素材颜色的灵活性，大大减少网站变更的工作量。

为达到上述目的，本发明的技术方案是这样实现的：

一种网站换肤的方法，包括：生成变色配置文件；根据目标颜色，按照生成的变色配置文件进行网站换肤。

所述变色配置文件包括：图片素材变色配置文件和文本素材变色配置文件的存储路径信息。

所述图片素材变色配置文件包括：站点原始图片路径、是否采用滤镜，目标分发路径；和/或，

所述变色配置文件按站点标识ID分文件夹存储。

所述目标颜色为用户通过交互界面选择的RGB色彩码。

所述根据目标颜色按照生成的变色配置文件进行网站换肤，包括：按照所述目标颜色，根据所述变色配置文件分别进行变色；将所有素材保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；预览确认后，从所述变色配置文件中读取目标服务器列表，分别发送素材文件和页面文件到对应的服务器。

所述根据变色配置文件中的图片素材变色配置文件分别进行变色之后，将所有素材保存到待发布目录并生成预览页面之前，该方法还包括：判断是否需要对单张图片进行微调，如果是，针对单张图片选择单独调整，之后继续执行将所有素材保存到待发布目录并生成预览页面的步骤；否则，执行将所有素材保存到待发布目录并生成预览页面的步骤。

所述根据变色配置文件中的图片素材变色配置文件分别进行变色包括：将用户通过交互界面生成的RGB色彩码转换为HSV色彩值；读取原始图片，根据所述HSV色彩值获取所述原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照目标颜色码生成目标图片，同时修改模板的图片路径为所述目标图片的路径。

一种网站换肤的装置，至少包括配置文件生成单元、目标颜色获取单元、以及换肤单元，其中，

配置文件生成单元，用于生成变色配置文件；

目标颜色获取单元，用于接收来自用户的用于表示变色的目标颜色信息；

换肤单元，用于根据目标颜色，按照生成的变色配置文件进行网站换肤。

所述换肤单元，具体用于：按照所述目标颜色信息，根据所述变色配置文件分别进行变色；将所有素材保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；预览确认后，从所述变色配置文件中读取目标服务器列表，分别发送素材文件和页面文件到相应的服务器。

所述换肤单元，还用于在需要对单张图片进行微调时，针对单张图片选择单独调整。

所述换肤单元根据图片素材变色配置文件分别进行变色，具体包括：将用户通过交互界面生成的RGB色彩码转换为HSV色彩值；读取原始图片，根据HSV色彩值获取原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照目标颜色码生成目标图片，同时修改模板的图片路径为所述目标图片的路径。

从上述本发明提供的技术方案可以看出，包括生成变色配置文件，根据目标颜色，按照生成的变色配置文件进行网站换肤。本发明支持对图片素材和文本素材变色，由于变色和模板修改都是自动完成的，因此，大大增强了颜色可变的范围，提高了更换素材颜色的灵活性，减少了人为制作发布素材的工作量。

附图说明

图1为本发明网站换肤的方法的流程示意图；

图2为本发明网站换肤的装置的组成结构示意图；

图3为本发明网站换肤的方法的实施例的流程示意图；

图4为本发明网站换肤中，全图变色的实施例的流程示意图。

具体实施方式

图1为本发明网站换肤的方法的流程示意图，如图1所示，包括以下步骤：

步骤100：生成变色配置文件。

使用人员通过管理后台的输入界面填写图片素材的素材配置信息，输入界面将填写好的素材配置信息提交到管理后台的处理器，处理器生成图片素材变色配置文件。图片素材变色配置文件包括该站点原始图片路径(即图片素材)、是否采用滤镜、目标分发路径。所述图片素材是指网站已存在的可供换肤的图片。

使用人员通过管理后台的输入界面填写文本素材的素材配置信息，如如何对样式文本做渐变颜色处理等，输入界面将填写好的素材配置信息提交到管理后台的处理器，处理器生成文本素材变色配置文件，将文本素材变色配置文件存储在某一路径下，该存储路径可以在服务器本地，也可以在其他服务器。文本素材变色配置文件包括文字颜色渐变处理方式，如文字颜色如何渐变。

处理器将包括图片素材变色配置文件和文本素材变色配置文件的存储路径信息的变色配置文件，存储到服务器的本地硬盘。生成的变色配置文件按站点标识(ID)分文件夹存储，站点ID可以由数据库统一存储，以自增形式申请。

步骤101：根据目标颜色，按照生成的变色配置文件进行网站换肤。

本步骤中，当接收到用于表示变色的目标颜色信息时，针对在交互界面设置的目标颜色信息，读取变色配置文件，利用变色配置文件对网站素材进行变色，具体地：将用户通过交互界面生成的RGB色彩码，转换为HSV色彩值；读取原始图片、即图片素材，根据HSV色彩值获取原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照目标颜色码生成目标图片，同时将模板的图片路径修改为目标图片的路径；根据变色配置文件中的文本素材变色配置文件的存储路径信息读取存储在对应位置的文本素材变色配置文件，根据文本素材变色配置文件对文本素材进行颜色渐变处理。

进一步地，将所有素材(目标图片和渐变后的文字)保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；预览确认后，从所述变色配置文件中读取目标分发路径、如目标服务器列表，分别发送目标图片和文本素材到相应的服务器。

本发明能够支持对图片和样式文件素材变色，由于变色和模板路径修改都是自动完成的，因此，大大增强了颜色可变的范围，减少了人为制作发布素材的工作量。

针对本发明方法还提供一种网站换肤的装置，如图2所示，至少包括配置文件生成单元、目标颜色获取单元，以及换肤单元，其中，

配置文件生成单元，用于生成变色配置文件；

目标颜色获取单元，用于接收来自用户的用于表示变色的目标颜色信息；

换肤单元，用于根据目标颜色，按照生成的变色配置文件进行网站换肤。

其中，换肤单元，具体用于按照所述目标颜色信息，根据站点的变色配置文件分别进行变色；将所有素材保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；预览确认后，从所述变色配置文件中读取目标分发路径、如目标服务器列表，分别发送素材文件和页面文件到相应的服务器。

换肤单元，还用于在需要对单张图片进行微调时，针对单张图片选择单独调整。

换肤单元中根据站点的变色配置文件分别进行变色，具体为：针对目标颜色信息，读取变色配置文件，利用变色配置文件对网站素材进行变色，更为具体地：将用户通过交互界面生成的RGB色彩码转换为HSV色彩值；读取原始图片、即图片素材，根据HSV色彩值获取原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照目标颜色码生成目标图片，同时修改模板图片路径；根据变色配置文件中的文本素材变色配置文件的存储路径信息读取存储在对应位置的文本素材变色配置文件，根据文本素材变色配置文件对文本素材进行颜色渐变处理。

下面结合实施例对本发明方法进行详细描述。

图3为本发明网站换肤的方法的实施例的流程示意图，如图3所示，图1中步骤101包括：

步骤300：用户在交互界面选择目标颜色，以RGB色彩码作为目标颜色信息提交。

步骤301：接收到用户在页面中输入的目标颜色信息，根据站点的变色配置文件分别进行变色。

站点的变色配置文件包括图片素材变色配置文件和文本素材变色配置文件的存储路径信息。其中，图片素材变色配置文件包括该站点原始图片路径、是否采用滤镜，目标分发路径。变色配置文件按站点ID分文件夹存储，ID可以由数据库统一存储，以自增形式申请。

将用户通过交互界面生成的RGB色彩码，转换为HSV色彩值；读取原始图片、即图片素材，根据HSV色彩值获取原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码，按照目标颜色码生成目标图片。

根据变色配置文件中的文本素材变色配置文件的存储路径信息读取存储在对应位置的文本素材变色配置文件(比如CSS、JS、HTML模板)，根据文本素材变色配置文件更改色彩定义相关内容为目标颜色的RGB码，对文本素材进行颜色渐变处理。

步骤302：生成模板，具体地，将模板的图片路径修改为目标图片的路径，将生成的文本素材路径替换模板中的相应路径。

其中，文本素材文件生成可以采用标签替换的方法。模板文件预先以特定标签定义好需要变色的内容，变更时，只需替换标签位置即可。这种方式增强了模板的灵活性，方便了模板的灵活修改。

模板文件是指最终用户看到的WEB页面。一个用户看到的WEB页面包含了文本素材和图片素材两部分。变色后的文本素材和图片素材，最终是由这个WEB页面引用进来展现给用户的。

步骤303：全图变色后，是否需要对单张图片进行微调，如果是，针对单张图片选择单独调整，之后进入步骤304；否则，进入步骤304。

本步骤中，用户可以通过交互界面预览图片变色效果，如果对变色效果不满意，需要对单张图片进行微调，用户可以提交需要进行微调的图片，提交后会先备份原有图片，变色后返回到展示界面；再由用户决定对该单张图片是否还原或保存。其中，可供调整的参数包括：滤镜(红、黄、绿、青、蓝、洋红)、色相、饱和度、明度等。

步骤304：用户提交确认操作后，将所有素材保存到待发布目录并生成预览DEMO页面，供用户在发布前提前预览变色后的效果。

步骤305：预览确认后，用户提交发布指令；从变色配置文件中读取目标服务器列表，分别发送素材文件和页面文件到相应的服务器。

图4为本发明网站换肤中，全图变色的实施例的流程示意图，如图4所示，图3中步骤301、302具体包括以下步骤：

步骤400：用户在交互界面中根据色相、饱和度分别调整选择的色彩值，确定后生成作为目标颜色信息的RGB色彩码。

步骤401：将用户提交的RGB颜色码转换为HSV色彩值。

本步骤中，因为HSV色彩定义法是根据色相、饱和度、明度来区分不同的色系，不同色系间是线性递进的关系。因此，本发明方法中利用HSV色彩值，很容易的勾画出了颜色值的一种线性关系，即方便地转换了颜色。

以采用红色作为基准颜色为例，HSV是设备依赖RGB的简单变换，(h，s，v)三元组定义的颜色依赖于所使用的特定红色、绿色和蓝色“加法原色”。所以，可以根据RGB色彩码计算出目标颜色和基准颜色的HSV差值，根据这个差值通过GIF、PNG图片的编码原则来生成目标颜色。具体实现方法属于本领域技术人员的惯用技术手段，不用于限定本发明的保护范围，这里不再赘述。

同时，本步骤还包括：根据配置不同，对一些特殊的图片设置特定的变色区间进行区域变色。也就是说，有些图片色彩反差比较大，当选定要变色的图片的时候，可以认为按照指定HSV色彩值区间内的颜色变色。比如有的图片是白色底色，上面有红色图案。开发人员可以指定参数，只针对红色区域的颜色变色，变色后图片仍然保持白色背景，这就是区域变色。

步骤402～步骤403：读取原始图片、即图片素材，根据HSV色彩值获取原始图片每个像素点的色彩值(BITMAP)，根据步骤401传入的不同滤镜区间选择性的生成目标颜色码。

步骤401是根据用户提交到后台的RGB色彩码转换HSV色彩值，即将RGB编码转换为HSV编码。步骤401～步骤403是用户完成一个提交操作的三个步骤，即步骤401完成后会调用函数，传递色彩值参数来完成步骤402、403。

目标颜色码的生成，可以通过调用图片变色程序来完成。图片变色程序的逻辑是，读取原始图片、即图片素材，根据HSV色彩值获取原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码。

对于带有颜色过度效果的图片，如果按照全图变色，会破环原始图片本来的纹路特征，因此，本步骤中，还可以对某些单张图片进行滤镜微调。比如：一张图片为由蓝渐渐过度为白色的图片效果，变色后需要实现由黄色渐渐过度为白色的效果，类似这种情况如果应用全局变色则会破坏白色部分的颜色效果。所以需要支持滤镜功能，即只针对某个颜色区间内的颜色值进行变色。现有系统支持红、黄、绿、青、蓝、洋红六种颜色滤镜的单图变色，当传入参数为所有(ALL)时，会对全图修改BITMAP值；当传入红(red)、黄(yellow)、绿(green)、洋红(magenta)、蓝(blue)、青(cyan)，则会根据HSV色彩值的16色基本颜色表来生成区间值。

步骤404：按照目标颜色码生成目标图片，同时修改模板的图片路径为目标图片的路径。

上述修改过程实际上就是路径替换过程，把原来文件里原始图片的地址替换为变色处理后的目标图片的地址。这个操作属于字符串替换过程。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种网站换肤的方法，其特征在于，包括：生成变色配置文件；

接收用户通过交互界面选择的RGB色彩码，将所述RGB色彩码确定为用于表示变色的目标颜色；

将所述RGB色彩码转换为HSV色彩值，根据所述变色配置文件中的图片素材变色配置文件的存储路径信息读取原始图片，根据所述HSV色彩值获取所述原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照所述目标颜色码生成目标图片，将模板的图片路径修改为所述目标图片的路径；

根据所述变色配置文件中的文本素材变色配置文件的存储路径信息读取存储在对应位置的文本素材变色配置文件，根据文本素材变色配置文件对网站的文本素材进行颜色渐变处理。

2.根据权利要求1所述的方法，其特征在于，

所述图片素材变色配置文件包括：站点原始图片路径、是否采用滤镜，目标分发路径；和/或，

所述变色配置文件按站点标识ID分文件夹存储。

3.根据权利要求1或2所述的方法，其特征在于，所述方法还包括：

将所有素材保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；

预览确认后，从所述变色配置文件中读取目标服务器列表，分别发送素材文件和页面文件到对应的服务器。

4.根据权利要求3所述的方法，其特征在于，所述根据变色配置文件中的图片素材变色配置文件分别进行变色之后，将所有素材保存到待发布目录并生成预览页面之前，该方法还包括：

判断是否需要对单张图片进行微调，如果是，针对单张图片选择单独调整，之后继续执行将所有素材保存到待发布目录并生成预览页面的步骤；否则，执行将所有素材保存到待发布目录并生成预览页面的步骤。

5.一种网站换肤的装置，其特征在于，至少包括配置文件生成单元、目标颜色获取单元、以及换肤单元，其中，

配置文件生成单元，用于生成变色配置文件；

目标颜色获取单元，用于接收用户通过交互界面选择的RGB色彩码，将所述RGB色彩码确定为用于表示变色的目标颜色；

换肤单元，用于将所述RGB色彩码转换为HSV色彩值，根据生成的变色配置文件中的图片素材变色配置文件的存储路径信息读取原始图片，根据所述HSV色彩值获取所述原始图片每个像素点的色彩值BITMAP，并根据传入的不同滤镜区间选择性的生成目标颜色码；按照所述目标颜色码生成目标图片，将模板的图片路径修改为所述目标图片的路径；

所述换肤单元，还用于根据所述变色配置文件中的文本素材变色配置文件的存储路径信息读取存储在对应位置的文本素材变色配置文件，根据文本素材变色配置文件对网站的文本素材进行颜色渐变处理。

6.根据权利要求5所述的装置，其特征在于，所述换肤单元，还用于：

将所有素材保存到待发布目录并生成预览页面，供用户在发布前提前预览变色后的效果；

预览确认后，从所述变色配置文件中读取目标服务器列表，分别发送素材文件和页面文件到相应的服务器。

7.根据权利要求6所述的装置，其特征在于，所述换肤单元，还用于在需要对单张图片进行微调时，针对单张图片选择单独调整。