具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。下面通过参考附图描述的实施例是示例性的，旨在用于解释本公开，而不能理解为对本公开的限制。

下面参考附图描述本公开实施例的界面取色方法、装置、电子设备及存储介质。

图1是根据本公开一实施例提出的界面取色方法的流程图。

需要说明的是，本公开实施例的界面取色方法的执行主体可以为电子设备，具体的，电子设备可以是但不限于服务器、终端，终端可以是但不限于个人电脑、智能手机、IPAD等。

本公开实施例以界面取色方法被配置于界面取色装置中来举例说明，该装置可以应用于电子设备中，以使该电子设备可以执行界面取色方法。

如图1所示，该界面取色方法包括：

S101：调用截图服务组件对待取色页面执行截图处理操作。

本公开实施例，在需要提取前端界面的颜色时，首先可以调用截图服务组件对待取色页面执行截图处理操作。

其中，在前端界面显示(展现给用户)且需要进行获取颜色值的页面可以被称为待取色页面，该待取色页面可以包括一种或者多种页面内容，例如：图片、文字以及其它任意可能的网页内容，也即是说，本公开实施例可以对待取色页面中的网页内容的颜色进行提取。

截图服务组件，用于对待取色页面执行截图操作，即：从待取色页面中截取一个或者多个截图，以进行后续的取色操作。

其中，该截图服务组件例如可以是待取色页面所在的浏览器中内置的截图的API(Application Programming Interface，应用程序编程接口)，或者还可以是其它的形式，对此不作限制。

一些实施例中，可以加载取色任务针对的待取色页面的网页地址，设置待取色页面的分辨率，并对待取色页面设置监听事件，在监听待取色页面网页加载完成后，调用截图服务组件对待取色页面执行截图处理操作。

S102：接收截图服务组件发送的访问地址，访问地址用于指示获取截图结果的路径。

上述执行截图处理操作后，进一步地，本公开实施例接收截图服务组件发送的访问地址(URL)，其中访问地址用于指示获取截图结果的路径，也即是说，通过访问地址可以获取到截图结果。

一些实施例中，执行截图处理操作后，可以将截图结果(即，从待取色页面中截取的一个或者多个图片)上传至预定位置，例如：将截图结果上传至内容分发网络(ContentDelivery Network，简称CDN)，因此CDN中可以存在与截图结果对应的访问地址(URL)。而截图服务组件例如可以访问CDN而获取该访问地址，并将访问地址进行发送至前端。在这种情况下，本公开实施例可以接收截图服务组件发送的访问地址。

S103：生成呈透明状态的网页画布，并将网页画布覆盖在待取色页面上。

上述接收访问地址后，进一步地，本公开实施例可以生成呈透明状态的网页画布(canvas)，并将网页画布覆盖在待取色页面上。

S104：根据访问地址获取截图结果，并将截图结果发布至网页画布上。

进一步地，根据访问地址获取截图结果，例如：根据访问地址从内容分发网络(CDN)中获取一个或者多个截图图片，并将一个或者多个截图图片发布至网页画布(canvas)上，也即是说，本实施可以将截图结果展示在网页画布(canvas)上。

S105：接收用户在网页画布上触发的色值获取指令，根据色值获取指令调用网页画布的色值获取服务，得到对应的色值。

上述将截图结果发布至网页画布上后，本公开实施例可以接收用户在网页画布上触发的色值获取指令，根据色值获取指令调用网页画布的色值获取服务，得到对应的色值。

其中，用户可以通过移动/点击鼠标、移动光标或操作触摸屏在网页画布(canvas)上的取色点位置进行点击操作，并监听鼠标、移动光标或者触摸屏的点击事件，得到该色值获取指令。

一些实施例中，色值获取指令的数量可以为多个，也即是说，用户可以在网页画布canvas上的多个位置进行取色。

举例而言，待取色页面的截图结果包括图片A及图片B，将图片A及图片B发布至网页画布canvas后，用户可以通过鼠标在网页画布canvas上图片A及图片B的任意位置进行点击操作进行取色，例如：在图片A点击位置a1、a2，在图片B点击位置b1、b2，则对位置a1、a2、b1、b2的点击都可以生成色值获取指令。

其中，色值获取服务可以是网页画布canvas内置的取色功能。在实际应用中，监听鼠标、移动光标或者触摸屏的点击事件的过程中还可以确定取色点的位置坐标，即：a1、a2、b1、b2在网页画布canvas上对应的位置坐标，而后调用网页画布canvas的色值获取服务，得到对应的色值，例如：调用canvas的getImageData API获取到对应坐标的图像数据，图像数据中可以包括对应的色值，从而实现界面取色的操作。

本公开实施例中，通过调用截图服务组件对待取色页面执行截图处理操作，并接收截图服务组件发送的访问地址，访问地址用于指示获取截图结果的路径，进一步地生成呈透明状态的网页画布，并将网页画布覆盖在待取色页面上，进一步地根据访问地址获取截图结果，并将截图结果发布至网页画布上，以及接收用户在网页画布上触发的色值获取指令，根据色值获取指令调用网页画布的色值获取服务，得到对应的色值。由此，能够基于截图服务组件与网页画布实现取色的目的，达到了提高取色的准确性、降低取色操作复杂度的技术效果，从而可以满足网页取色的需求，改善用户的使用体验，并有利于后续将网页取色与项目相结合。

图2是根据本公开另一实施例提出的界面取色方法的流程图，如图2所示，上述步骤S101，可以包括：

S201：调用截图服务组件，以生成截图任务。

具体地，在调用截图服务组件对待取色页面执行截图处理操作的过程中，可以调用截图服务组件，生成截图任务，即：针对待取色页面生成截图任务。

S202：创建初始的节点node服务。

进一步地，创建初始的节点node服务，启动node服务，也即是说，本公开实施例支持采用node服务进行截图任务。

S203：配置初始的节点node服务与目标依赖库相关联，以将待取色页面所属目标浏览器的截图方法引入初始的节点node服务之中，得到目标节点node服务。

上述创建初始的节点node服务后，本公开实施例可以配置初始的节点node服务与目标依赖库相关联，目标依赖库例如：Puppeteer依赖库，从而在初始的节点node服务可以引入Puppeteer依赖。通过关联目标依赖库，可以将待取色页面所属目标浏览器的截图方法引入初始的节点node服务之中。

其中，目标浏览器的截图方法可以与目标依赖库对应，例如：目标依赖库为Puppeteer依赖库，则目标浏览器可以是谷歌浏览器(Google Chrome)，截图方法可以是谷歌浏览器提供的Chromium截图方法，或者还可以是screenshot截图方法。

本实施例中，可以将待取色页面所属目标浏览器的截图方法引入初始的节点node服务之中，得到目标节点node服务，从而目标节点node服务可以具有截图的功能。

S204：调用目标节点node服务基于截图方法执行截图任务，以对待取色页面执行截图处理操作。

上述得到目标节点node服务后，可以调用目标节点node服务基于截图方法执行截图任务，例如：调用Chromium截图方法，或者调用screenshot截图方法，对待取色页面执行截图处理操作。

从而，本公开实施例通过关联依赖库可以使node服务具有浏览器提供的截图功能，因此能够提高截图的速度，并且提升截图的质量。此外，关联不同的依赖库可以获得不同的截图方法，因此可以适用于不同的环境。

可选地，一些实施例中，调用目标节点node服务基于截图方法执行所述截图任务，以对所述待取色页面执行截图处理操作，包括：解析截图任务，以得到对应的任务尺寸；确定待取色页面的目标尺寸；如果任务尺寸小于目标尺寸，则基于任务尺寸对待取色页面进行分屏的截图处理操作。

具体地，上述实施例生成的截图任务中可以包括任务尺寸，即：截图的尺寸。在对所述待取色页面执行截图处理操作的过程中，首先可以对截图任务进行解析，得到对应的任务尺寸。

进一步地，确定待取色页面的尺寸作为目标尺寸，例如：可以通过查询待取色页面的信息确定目标尺寸，或者还可以调用尺寸计算方法计算待取色页面的目标尺寸，对此不作限制。

进一步地，将任务尺寸与目标尺寸进行对比，如果任务尺寸小于目标尺寸，则基于任务尺寸对待取色页面进行分屏的截图处理操作，也即是说，在截图尺寸小于待取色页面的尺寸的情况下，基于任务尺寸对待取色页面进行分屏的截图处理操作。从而，避免截图尺寸大于待取色页面而造成截图操作失败。此外，基于任务尺寸进行截图还可以保证截图的尺寸规范化，有利于将截图结果发布至网页画布上。

需要说明的是，截图任务中还可以包括其它任务信息，例如：截图数量等，在截图的过程中还可以结合其他的任务信息，以保证截图的准确性。

可选地，一些实施例，基于任务尺寸对待取色页面进行分屏的截图处理操作，包括：从待取色页面的顶端边界为起始进行截图处理操作，以选中第一屏尺寸的图片；对待取色页面进行界面滚屏处理，并在界面滚屏处理后，重复执行分屏的截图处理操作，以选中第二屏尺寸的图片；如果第二屏尺寸的图片包括待取色页面的底端边界，则根据选中的第一屏尺寸和第二屏尺寸截图得到截图结果。

在实际应用中，可能存在待取色页面的目标尺寸过大的问题，需要多屏才可以进行完整展示，也即是说，待取色页面占用多个屏。

在这种情况下，对待取色页面进行分屏的截图处理操作，首先可以从待取色页面的顶端边界为起始进行截图处理操作，以选中第一屏尺寸的图片，即：从待取色页面的顶端边界起截取第一屏尺寸的图片。

进一步地，对待取色页面进行界面滚屏处理，例如：可以调用浏览器滚动事件执行界面滚屏处理。为了更好的理解本实施例，将上述顶端边界所位于的界面用第一屏表示，界面滚屏处理后的界面用第二屏表示。滚屏处理后，执行分屏的截图处理操作，以选中第二屏尺寸的图片，即：在第二屏截取第二屏尺寸的图片。

重复执行滚屏操作和分屏的截图处理操作，直至第二屏尺寸的图片包括待取色页面的底端边界，也即是说，从待取色页面的顶端边界至底端边界完成截屏处理操作。并将第一屏尺寸图片和一个或者多个第二屏尺寸图片，作为截图结果。通过分屏截图的方式，可以实现对大尺寸的待取色页面进行截屏处理，从而可以针对不同尺寸的页面进行取色处理。

图3是根据本公开另一实施例提出的界面取色方法的流程图，如图3所示，上述步骤S103，可以包括：

S301：在目标浏览器之中创建呈透明状态的网页画布。

本公开实施例在生成呈透明状态的网页画布，并将网页画布覆盖在待取色页面上的操作中，首先在目标浏览器之中创建呈透明状态的网页画布canvas，例如：在谷歌浏览器中创建透明状态的网页画布canvas。

S302：将呈透明状态的网页画布与待取色页面进行对齐处理，并将对齐处理得到的网页画布作为目标网页画布。

进一步地，将呈透明状态的网页画布canvas与待取色页面进行对齐处理，例如：调整网页画布canvas的边界与待取色页面的边界对其，以使网页画布canvas能够完全覆盖待取色页面，得到目标网页画布。

S303：将目标网页画布覆盖在待取色页面上。

进一步地，将目标网页画布覆盖在待取色页面上，即：利用目标网页画布完全覆盖待取色页面。从而，通过对齐处理可以使目标网页画布和待取色页面重叠，有利于后续将截图结果发布至网页画布上。

可选地，一些实施例中，方法还包括：将色值发送至目标业务流程。

其中，目标业务流程可以是任何需要使用到界面颜色值的工程项目，例如H5版本的编辑器的编辑项目等。本公开实施例得到对应的色值后，还可以将色值发送至目标业务流程，例如：将色值发送至H5版本的编辑器，从而实现了将颜色值自动输入到编辑器中，进而可以实现界面取色与项目结合的效果。

基于上述描述可知，在本公开的一个示例中，如图4所示，在需要进行界面取色时，可发起截图任务请求，调用node服务器执行截图任务，可先判断是否需要排队，即是否需要等待，如果是，则加入到任务队列中，如果否，则创建页面打开任务地址，然后，生成图片文件，即待取色图片，并将待取色图片上传至内容分发网络，前端获取图片的URL，之后，绘制与待取色图片对应的界面画布，根据待取色点的坐标值，从界面画布中识别到待取色点，获取待取色点对应的颜色值，并将颜色值提供至目标项目，进行基于颜色值的业务处理。

综上所述，本公开实施例的界面取色方法，解决了H5编辑器的取色器诉求，可以与项目更好的结合；使用node服务截图，获取到图片的速度更快，而且质量也更好；使用canvas技术取色值，符合H5的技术方案，能够结合不同的业务场景，与前端项目更友好的结合。

本公开实施例还提出了一种界面取色装置，图5是根据本公开实施例的界面取色装置的结构框图。

如图5所示，该界面取色装置50包括：截图模块501，被配置为执行调用截图服务组件对待取色页面执行截图处理操作；接收模块502，被配置为执行接收截图服务组件发送的访问地址，访问地址用于指示获取截图结果的路径；生成模块503，被配置为执行生成呈透明状态的网页画布，并将网页画布覆盖在待取色页面上；发布模块504，被配置为执行根据访问地址获取截图结果，并将截图结果发布至网页画布上；取色模块505，被配置为执行接收用户在网页画布上触发的色值获取指令，根据色值获取指令调用网页画布的色值获取服务，得到对应的色值。

可选地，一些实施例中，截图模块501包括：第一调用子模块，被配置为执行调用截图服务组件，以生成截图任务；第一创建子模块，被配置为执行创建初始的节点node服务；配置子模块，被配置为执行配置初始的节点node服务与目标依赖库相关联，以将待取色页面所属目标浏览器的截图方法引入初始的节点node服务之中，得到目标节点node服务；第二调用子模块，被配置为执行调用目标节点node服务基于截图方法执行截图任务，以对待取色页面执行截图处理操作。

可选地，一些实施例中，，配置子模块包括：解析单元，被配置为执行解析截图任务，以得到对应的任务尺寸；确定单元，被配置为执行确定待取色页面的目标尺寸；截图单元，被配置为执行在任务尺寸小于目标尺寸时，基于任务尺寸对待取色页面进行分屏的截图处理操作。

可选地，一些实施例中，截图单元包括：截图子单元，被配置为执行从待取色页面的顶端边界为起始进行截图处理操作，以选中第一屏尺寸的图片；滚屏子单元，被配置为执行对待取色页面进行界面滚屏处理，并在界面滚屏处理后，重复执行分屏的截图处理操作，以选中第二屏尺寸的图片；选择子单元，被配置为执行在第二屏尺寸的图片包括待取色页面的底端边界时，根据选中的第一屏尺寸和第二屏尺寸截图得到截图结果。

可选地，一些实施例中，生成模块503包括：第二创建子模块，被配置为执行在目标浏览器之中创建呈透明状态的网页画布；对齐子模块，被配置为执行将呈透明状态的网页画布与待取色页面进行对齐处理，并将对齐处理得到的网页画布作为目标网页画布；覆盖子模块，被配置为执行将目标网页画布覆盖在待取色页面上。

可选地，一些实施例中，界面取色装置50还包括：发送模块，被配置为执行将色值发送至目标业务流程。

需要说明的是，该界面取色装置的具体实施方式可参见上述界面取色方法的具体实施方式，为避免冗余，此处不再详细赘述。

本公开实施例的界面取色装置，能够基于截图服务组件与网页画布实现取色的目的，达到了提高取色的准确性、降低取色操作复杂度的技术效果，从而可以满足网页取色的需求，改善用户的使用体验，并有利于后续将网页取色与项目相结合。

图6是根据本公开实施例的电子设备的结构框图。

如图6所示，该电子设备200包括：存储器210和处理器220，连接不同组件(包括存储器210和处理器220)的总线230。

其中，存储器210用于存储处理器220的可执行指令；处理器201被配置为调用并执行存储器202存储的可执行指令，以实现本公开上述实施例提出的界面取色方法。

总线230表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

电子设备200典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备200访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

存储器210还可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)240和/或高速缓存存储器250。电子设备200可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统260可以用于读写不可移动的、非易失性磁介质(图6未显示，通常称为“硬盘驱动器”)。尽管图6中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线230相连。存储器210可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本公开各实施例的功能。

具有一组(至少一个)程序模块270的程序/实用工具280，可以存储在例如存储器210中，这样的程序模块270包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块270通常执行本公开所描述的实施例中的功能和/或方法。

电子设备200也可以与一个或多个外部设备290(例如键盘、指向设备、显示器291等)通信，还可与一个或者多个使得用户能与该电子设备200交互的设备通信，和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口292进行。并且，电子设备200还可以通过网络适配器293与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器293通过总线230与电子设备200的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备200使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

处理器220通过运行存储在存储器210中的程序，从而执行各种功能应用以及数据处理。

需要说明的是，本公开实施例的电子设备的实施过程参见前述对本公开实施例的界面取色方法的解释说明，此处不再赘述。

本公开实施例的电子设备，在处理器调用并执行存储器存储的可执行指令时，能够基于与待取色图片对应的界面画布，实现界面取色，且可以将界面颜色值自动提供至项目，实现界面取色与项目的结合，有利于提高取色的准确性，可以降低人工成本，改善用户的使用体验。

为了实现上述实施例，本公开实施例还提出了一种存储介质，该存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如前所述的界面取色方法。

为了实现上述实施例，本公开实施例还提供一种计算机程序产品，该计算机程序由电子设备的处理器执行时，使得电子设备能够执行如前所述的界面取色方法。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。