技术摘要：
本申请实施例公开了一种界面取色方法、装置、设备及存储介质；所述取色方法包括以下步骤：截取前端显示界面，在前端生成图片；确定在前端选取的取色点，获取取色点的坐标值；根据取色点的坐标值，获取取色点的颜色值；将颜色值写入颜色窗口；本申请实施例直接对前端显  全部
背景技术：
在产品界面设计过程中，灵活调整产品界面的颜色是本领域技术人员必须考虑的 要点。现有的颜色调整有多种方式，例如提供颜色菜单列表，用户通过既定的颜色菜单列表 选择颜色，或，提供基于RGB颜色模型的颜色选择，用户手动拖动分别对应于R(Red，红)、G (Gree，绿)、B(Blue，蓝)的颜色条或手动输入对应的R、G、B的颜色值从而最终确认颜色。通 过颜色菜单列表选择颜色的方式操作简单，但是颜色过于单一，当有复杂的颜色需求时，无 法提供足够的颜色选择或特定的颜色选择；基于RGB颜色模型的颜色选组需要用户对RGB颜 色模型有充分的了解，并且取色不够快速直观。 为了解决通过颜色菜单列表选择颜色时，颜色过于单一以及基于RGB颜色模型的 问题，本领域技术人员提出了在界面上进行取色，实时地获取用户所需的颜色的方法。比如 公布号为CN106033305A的发明专利申请，公开了一种屏幕取色方法及装置，屏幕取色方法 包括：对屏幕进行截屏处理，并将图片进行保存；确定在屏幕上选取的取色点，并获取取色 点的坐标值；根据坐标值提取与截屏后的图片相对应的像素点颜色信息，并将颜色信息添 加进调色窗口，使得通过调色窗口进行与颜色信息一致的颜色调整。 发明人发现：目前这种取色的方法需要先采用其他的工具或者软件进行截图，并 将截图所得的图形保存后再进行取色，最后才将颜色值应用在产品界面设计中，操作麻烦， 而且降低了用户的工作效率；而且，目前这种取色的方法是基于C/S架构，并不适用于B/S架 构下的屏幕取色。
技术实现要素：
本申请实施例提供了的界面取色方法、装置、设备及存储介质，用于在B/S架构下 进行屏幕取色，通过直接对前端显示界面进行截图，并在前端生成的图片上进行取色，操作 简便，提高了用户的取色效率。所述技术方案如下： 第一方面，本申请实施例提供了一种界面取色方法，所述取色方法包括： 截取前端显示界面，在前端生成图片； 确定在前端选取的取色点，获取取色点的坐标值； 根据取色点的坐标值，获取取色点的颜色值； 将颜色值写入颜色窗口。 在一种可能的设计中，所述将颜色值写入颜色窗口之后，还包括，重复执行所述确 定在前端选取的取色点，获取取色点的坐标值，根据取色点的坐标值，获取取色点的颜色 值，将颜色值写入颜色窗口将图片上所有取色点的颜色值均写入颜色窗口，直到将图片上 所有取色点的颜色值均写入颜色窗口。 4 CN 111596848 A 说　明　书 2/9 页 在一种可能的设计中，所述将颜色值写入颜色窗口之后，还包括，删除在前端生成 的图片。 在一种可能的设计中，所述截取前端显示界面，在前端生成图片包括：通过 html2canvas对前端显示界面进行截屏，在前端生成图片。 在一种可能的设计中，所述通过html2canvas对前端显示界面进行截屏，在前端生 成图片包括如下步骤： 通过html2canvas将前端显示界面抓取到canvas中； 调用canvas .toDataURL( )方法，将被抓取到canvas中的前端显示界面转换成 base64字符串； 新建img标签，将base64字符串赋值给img标签的src属性； 将img标签添加到当前界面，并将宽度和高度均设置成100％。 在一种可能的设计中，所述确定在前端选取的取色点，获取取色点的坐标值包括 以下步骤， 监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐标值； 根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐标值。 在一种可能的设计中，所述确定在前端选取的取色点，获取取色点的坐标值包括 以下步骤， 监测触摸屏的触摸点，确定触摸点的坐标值； 根据触摸点的坐标值，确定取色点在图片上的坐标。 在一种可能的设计中，所述根据取色点的坐标值，确定取色点的颜色值包括如下 步骤， 根据取色点的坐标值，确定取色点在图片上相对应的像素点； 计算提取的像素点的RGB值和/或CMYK值和/或HEX值。 在一种可能的设计中，所述根据取色点的坐标值，确定取色点的颜色值包括如下 步骤， 根据取色点的坐标值，确定取色点在图片上相对应的像素点； 计算提取的像素点的RGB值和/或CMYK值和/或HEX值； 将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。 第二方面，本申请实施例提供了一种界面取色装置，所述取色装置包括： 前端截图单元，用于对前端显示界面进行截图处理，并在前端生成图片； 坐标值获取单元，用于确定在前端选取的取色点，获取取色点的坐标值； 颜色值获取单元，用于根据取色点的坐标值，获取取色点的颜色值； 颜色值写入单元，用于将颜色值写入颜色窗口。 在一种可能的设计中，所述前端截图单元包括html2canvas，所述html2canvas对 前端显示界面进行截屏，在前端生成图片。 在一种可能的设计中，所述坐标值获取单元包括， 鼠标/光标监测单元，用于监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐 标值； 坐标值确定单元，用于根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐 5 CN 111596848 A 说　明　书 3/9 页 标值。 在一种可能的设计中，所述坐标值获取单元包括， 触摸监测单元，用于监测触摸屏的触摸点，确定触摸点的坐标值； 坐标值确定单元，用于根据触摸点的坐标值，确定取色点在图片上的坐标值。 在一种可能的设计中，所述颜色值获取单元具体包括： 像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素 点； 颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值。 在一种可能的设计中，所述颜色值获取单元具体包括： 像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素 点； 颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值； 放大显示单元，用于将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显 示。 第三方面，本申请实施例提供一种计算机设备，包括存储器、处理器及存储在存储 器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上 述方法步骤。 第四方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有 多条指令，所述指令适于由处理器加载并执行上述的方法步骤。 本申请一些实施例提供的技术方案带来的有益效果至少包括： 直接对前端显示界面进行截图，并在前端生成的图片上进行取色，无需先采用其 他的工具或者软件进行截图，并将截图所得的图形保存后再进行取色，操作简便，提高了用 户的取色效率。 附图说明 为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本 申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以 根据这些附图获得其他的附图。 图1是本申请实施例一提供的界面取色方法的流程示意图； 图2是本申请实施例一提供的界面取色方法的步骤S100的流程示意图； 图3是本申请实施例一提供的界面取色方法的步骤S200的流程示意图； 图4是本申请实施例一提供的界面取色方法的步骤S300的流程示意图； 图5是本申请实施例一提供的界面取色装置的框架结构示意图； 图6是本申请实施例一提供的界面取色装置的具体结构示意图； 图7是本申请实施例一提供的计算机设备的结构示意图； 图8是本申请实施例一提供的截取前端显示界面前的取色界面图； 图9是本申请实施例一提供的获取取色点的颜色值的一种取色界面图； 图10是本申请实施例一提供的获取取色点的颜色值的另一种取色界面图(点开颜 6 CN 111596848 A 说　明　书 4/9 页 色块之后)； 图11是本申请实施例一提供的清除颜色时的取色界面图； 图12是本申请实施例一提供的修改颜色时的取色界面图； 图13是本申请实施例二提供的界面取色方法的流程示意图； 图14是本申请实施例三提供的界面取色方法的流程示意图； 图15是本申请实施例四提供的界面取色方法的步骤S300的流程示意图； 图16是本申请实施例四提供的颜色值获取单元的具体结构示意图； 图17是本申请实施例五提供的界面取色方法的步骤S200的流程示意图； 图18是本申请实施例五提供的坐标值获取单元的具体结构示意图； 图19是本申请实施例六提供的界面取色方法的步骤S200的流程示意图； 图20是本申请实施例六提供的坐标值获取单元的具体结构示意图。