基于canvas改变图片颜色的方法、装置及存储介质

摘要

本发明公开基于canvas改变图片颜色的方法，包括获取每个旧图标以及所需要替换的颜色，然后通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中；通过扫描WEB页面并获取所有带标记的旧图标，并读取每个旧图标所需要替换的颜色；根据每个旧图标创建生成对应canvas元素，并将每个canvas元素的填充色替换为对应旧图标所需要替换的颜色；根据每个canvas元素生成对应新图标，并将WEB页面中的每个旧图标替换为对应的新图标。本发明解决了现有技术中在图标颜色不适用时需要开发人员重新设计一套新的图标来替换导致产品开发效率低下等问题。本发明还提供基于canvas改变图片颜色的装置及存储介质。

说明书

技术领域

本发明涉及图片颜色处理，尤其涉及基于canvas改变图片颜色的方法、装置及存储介质。

背景技术

在WEB应用页面开发中，开发者通常将较小尺寸的PNG格式的图片作为图标，用于标识WEB应用的相应功能。然而随着开发的需求以及应用的场景等的不同时，现有的WEB应用页面中的图标颜色不再适用，这样开发者往往需要重新设计出新的图标以满足新的需求，给开发者带来更多的工作量，开发效率低下，导致产品的开发周期长，不利于产品开发。

发明内容

为了克服现有技术的不足，本发明的目的之一在于提供基于canvas改变图片颜色的方法，其能够解决现有技术中替换图标颜色时需要开发人员重新设计新的图标进行替换导致产品开发效率低下，产品开发周期长等问题。

本发明的目的之二在于提供基于canvas改变图片颜色的装置，其能够解决现有技术中替换图标时需要开发人员重新设计新的图标进行替换导致产品开发效率低下，产品开发周期长等问题。

本发明的目的之三在于提供一种存储介质，其能够解决现有技术中替换图标时需要开发人员重新设计新的图标进行替换导致产品开发效率低下，产品开发周期长等问题。

本发明的目的之一采用如下技术方案实现：

基于canvas改变图片颜色的方法，所述基于canvas改变图片颜色的方法包括：

标记步骤：获取每个旧图标以及每个旧图标所需要替换的颜色，然后通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中；

扫描步骤：通过扫描WEB页面并获取所有带标记的旧图标，并读取每个旧图标所携带的颜色信息；所述每个旧图标所携带的颜色信息为每个旧图标所需要替换的颜色；

转换步骤：根据每个旧图标创建生成每个旧图标对应的canvas元素，并将每个canvas元素的填充色替换为对应旧图标所携带的颜色信息；

新图标生成步骤：根据每个canvas元素生成对应新图标；

替换步骤：将WEB页面中的每个旧图标替换为对应的新图标。

进一步地，所述替换步骤包括：将每个新图标存储系统内存中，然后将每个旧图标的地址替换为对应新图标的地址，再根据系统内存中存储的每个新图标，将WEB页面中每个旧图标替换为对应新图标。

进一步地，所述替换步骤中将WEB页面冲的每个旧图标替换为对应新图标后，将系统内存中存储的新图标删除。

进一步地，旧图标、新图标均为PNG图片。

本发明的目的之二采用如下技术方案实现：

基于canvas改变图片颜色的装置，包括存储器、处理器以及存储在存储器上并在处理器上运行的计算机程序，所述计算机程序为基于canvas改变图片颜色的程序，所述处理器执行所述基于canvas改变图片颜色的程序时实现以下步骤：

标记步骤：获取每个旧图标以及每个旧图标所需要替换的颜色，然后通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中；

扫描步骤：通过扫描WEB页面并获取所有带标记的旧图标，并读取每个旧图标所携带的颜色信息；所述每个旧图标所携带的颜色信息为每个旧图标所需要替换的颜色；

转换步骤：根据每个旧图标创建生成每个旧图标对应的canvas元素，并将每个canvas元素的填充色替换为对应旧图标所携带的颜色信息；

新图标生成步骤：根据每个canvas元素生成对应新图标；

替换步骤：将WEB页面中的每个旧图标替换为对应的新图标。

进一步地，所述替换步骤包括：将每个新图标存储系统内存中，然后将每个旧图标的地址替换为对应新图标的地址，再根据系统内存中存储的每个新图标，将WEB页面中每个旧图标替换为对应新图标。

进一步地，所述替换步骤中将WEB页面冲的每个旧图标替换为对应新图标后，将系统内存中存储的新图标删除。

进一步地，旧图标、新图标均为PNG图片。

本发明的目的之三采用如下技术方案实现：

一种存储介质，所述存储介质为计算机可读存储介质，其上存储有计算机程序，所述计算机程序为基于canvas改变图片颜色的程序，所述基于canvas改变图片颜色的程序被处理器执行时实现如本发明的目的之一采用的基于canvas改变图片颜色的方法的步骤。

相比现有技术，本发明的有益效果在于：

本发明通过将需要替换的颜色预先标记到旧图标中，然后通过扫描WEB页面来获取每个旧图标，并根据旧图标生成canvas元素并将canvas元素的填充色填充为需要替换的颜色后生成新的图像，这样即可将WEB页面中旧图标替换为新的图标，实现WEB页面中图标的新旧替换，该方法操作简单，方便快捷，避免开发人员重新设计新图标所导致产品开发效率低下等问题。

附图说明

图1为本发明提供的基于canvas改变图片颜色的方法流程图；

图2为本发明提供的基于canvas改变图片颜色的装置模块图。

图中：11、存储器；12、处理器；13、通信总线；14、网络接口。

具体实施方式

下面，结合附图以及具体实施方式，对本发明做进一步描述，需要说明的是，在不相冲突的前提下，以下描述的各实施例之间或各技术特征之间可以任意组合形成新的实施例。

实施例一

本发明提供基于canvas改变图片颜色的方法，其通过利用canvas能够将已经存在的图标的填充颜色进行替换为新的填充颜色，使得旧图标直接变为新图标，以满足新的设计需求，该方法操作简单，避免开发人员重新设计新图标导致产品开发效率低下等问题，缩短产品开发周期。

如图1所示，基于canvas改变图片颜色的方法包括如下步骤：

步骤S1、获取每个旧图标以及每个旧图标所需要替换的颜色，并通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中。其中，旧图标为PNG图片。

通过图标的元素的类名target2change进行标记，并将所需要替换的颜色存储到旧图标对应的元素标签中。

比如每个图标在WEB页面中的各个元素标签表示如下：

。

其中，class＝"target2change"表示该图标为被标记的图标，data-color＝"#58b7ff"表示图标所需要替换的颜色信息。

步骤S2、通过扫描WEB页面并获取所有带有标记的旧图标，并读取每个旧图标所携带的颜色信息。

其中，每个旧图标所携带的颜色信息是指每个旧图标所需要替换的颜色。

在实际的操作过程中，需要替换的旧图标可能不止一个，因此，通过扫描WEB页面时，获取所有带有标记的旧图标。同时，根据每个旧图标的元素标签可获取每个旧图标所携带的颜色信息。

优选地，每个旧图标所携带的颜色信息为步骤S1中每个旧图标所需要替换的颜色。

步骤S3、根据每个旧图标创建生成每个旧图标对应的canvas元素，并将每个canvas元素的填充色替换为对应旧图标所携带的颜色信息。

步骤S4、根据每个canvas元素输出图片并生成对应新图标。新图标也为PGN图片。

步骤S5、将每个新图标存储于系统内存中。

步骤S6、将每个旧图标的地址替换为对应新图标的地址。

步骤S7、根据系统内存中存储的每个新图标，将WEB页面中每个旧图标替换为对应新图标。

同时，当旧图标替换为新图标后，还包括步骤S8、将系统内存中存储的新图标删除。通过将系统内存中存储的新图标删除，以释放内存的空间。

通过本发明可一次性将多个旧图标的填充颜色替换为新的颜色，操作方便快捷，避免重新设计新图标而导致开发效率低下等问题。

实施例二

本发明提供了基于canvas改变图片颜色的装置。如图2所示，本发明一实施例提供的基于canvas改变图片颜色的装置的内部结构示意图。

在本实施例中，基于canvas改变图片颜色的装置可以是PC(Personal Computer，个人电脑)，也可以是智能手机、平板电脑、便携计算机等终端设备。该基于canvas改变图片颜色的装置至少包括：处理器12、通信总线13、网络接口14以及存储器11。

其中，存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、磁性存储器、磁盘、光盘等。存储器11在一些实施例中可以是基于canvas改变图片颜色的装置的内部存储单元，例如该基于canvas改变图片颜色的装置的硬盘。存储器11在另一些实施例中也可以是基于canvas改变图片颜色的装置的外部存储设备，例如基于canvas改变图片颜色的装置上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，存储器11还可以既包括基于canvas改变图片颜色的装置的内部存储单元也包括外部存储设备。存储器11不仅可以用于存储安装于基于canvas改变图片颜色的装置的应用软件及各类数据，例如基于canvas改变图片颜色的程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

处理器12在一些实施例中可以是一中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器或其他数据处理芯片，用于运行存储器11中存储的程序代码或处理数据，例如执行基于canvas改变图片颜色的程序等。

通信总线13用于实现这些组件之间的连接通信。

网络接口14可选的可以包括标准的有线接口、无线接口(如WI-FI接口)，通常用于在该基于canvas改变图片颜色的装置与其他电子设备之间建立通信连接。

可选地，该基于canvas改变图片颜色的装置还可以包括用户接口，用户接口可以包括显示器(Display)、输入单元比如键盘(Keyboard)，可选的用户接口还可以包括标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在基于canvas改变图片颜色的装置中处理的信息以及用于显示可视化的用户界面。

图2仅示出了具有组件11-14以及基于canvas改变图片颜色的程序的基于canvas改变图片颜色的装置，本领域技术人员可以理解的是，图2示出的结构并不构成对基于canvas改变图片颜色的装置的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

在图2所示的基于canvas改变图片颜色的装置实施例中，存储器11中存储有基于canvas改变图片颜色的程序；处理器12执行存储器11中存储的基于canvas改变图片颜色的程序时实现如下步骤：

标记步骤：获取每个旧图标以及每个旧图标所需要替换的颜色，然后通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中；

扫描步骤：通过扫描WEB页面并获取所有带标记的旧图标，并读取每个旧图标所携带的颜色信息；所述每个旧图标所携带的颜色信息为每个旧图标所需要替换的颜色；

转换步骤：根据每个旧图标创建生成每个旧图标对应的canvas元素，并将每个canvas元素的填充色替换为对应旧图标所携带的颜色信息；

新图标生成步骤：根据每个canvas元素生成对应新图标；

替换步骤：将WEB页面中的每个旧图标替换为对应的新图标。

进一步地，所述替换步骤包括：将每个新图标存储系统内存中，然后将每个旧图标的地址替换为对应新图标的地址，再根据系统内存中存储的每个新图标，将WEB页面中每个旧图标替换为对应新图标。

进一步地，所述替换步骤中将WEB页面冲的每个旧图标替换为对应新图标后，将系统内存中存储的新图标删除。

进一步地，旧图标、新图标均为PNG图片。

实施例三

基于本发明提供的实施例二，本发明还提供了一种实施例，一种存储介质，该存储介质为计算机可读存储介质，其上存储有计算机程序，计算机程序为基于canvas改变图片颜色的程序，该基于canvas改变图片颜色的程序被处理器执行时实现如下步骤：

标记步骤：获取每个旧图标以及每个旧图标所需要替换的颜色，然后通过标记的方式将每个旧图标所需要替换的颜色存储到对应旧图标中；

扫描步骤：通过扫描WEB页面并获取所有带标记的旧图标，并读取每个旧图标所携带的颜色信息；所述每个旧图标所携带的颜色信息为每个旧图标所需要替换的颜色；

转换步骤：根据每个旧图标创建生成每个旧图标对应的canvas元素，并将每个canvas元素的填充色替换为对应旧图标所携带的颜色信息；

新图标生成步骤：根据每个canvas元素生成对应新图标；

替换步骤：将WEB页面中的每个旧图标替换为对应的新图标。

进一步地，所述替换步骤包括：将每个新图标存储系统内存中，然后将每个旧图标的地址替换为对应新图标的地址，再根据系统内存中存储的每个新图标，将WEB页面中每个旧图标替换为对应新图标。

进一步地，所述替换步骤中将WEB页面冲的每个旧图标替换为对应新图标后，将系统内存中存储的新图标删除。

进一步地，旧图标、新图标均为PNG图片。

上述实施方式仅为本发明的优选实施方式，不能以此来限定本发明保护的范围，本领域的技术人员在本发明的基础上所做的任何非实质性的变化及替换均属于本发明所要求保护的范围。