[发明专利]一种界面取色方法、装置、设备及存储介质

说明书

本申请实施例公开了一种界面取色方法、装置、设备及存储介质；所述取色方法包括以下步骤：截取前端显示界面，在前端生成图片；确定在前端选取的取色点，获取取色点的坐标值；根据取色点的坐标值，获取取色点的颜色值；将颜色值写入颜色窗口；本申请实施例直接对前端显示界面进行截图，并在前端生成的图片上进行取色，操作简便，提高了用户的取色效率。

技术领域

本申请涉及计算机技术领域，尤其涉及一种界面取色方法、装置、设备及存储介质。

背景技术

在产品界面设计过程中，灵活调整产品界面的颜色是本领域技术人员必须考虑的要点。现有的颜色调整有多种方式，例如提供颜色菜单列表，用户通过既定的颜色菜单列表选择颜色，或，提供基于RGB颜色模型的颜色选择，用户手动拖动分别对应于R(Red，红)、G(Gree，绿)、B(Blue，蓝)的颜色条或手动输入对应的R、G、B的颜色值从而最终确认颜色。通过颜色菜单列表选择颜色的方式操作简单，但是颜色过于单一，当有复杂的颜色需求时，无法提供足够的颜色选择或特定的颜色选择；基于RGB颜色模型的颜色选组需要用户对RGB颜色模型有充分的了解，并且取色不够快速直观。

为了解决通过颜色菜单列表选择颜色时，颜色过于单一以及基于RGB颜色模型的问题，本领域技术人员提出了在界面上进行取色，实时地获取用户所需的颜色的方法。比如公布号为CN106033305A的发明专利申请，公开了一种屏幕取色方法及装置，屏幕取色方法包括：对屏幕进行截屏处理，并将图片进行保存；确定在屏幕上选取的取色点，并获取取色点的坐标值；根据坐标值提取与截屏后的图片相对应的像素点颜色信息，并将颜色信息添加进调色窗口，使得通过调色窗口进行与颜色信息一致的颜色调整。

发明人发现：目前这种取色的方法需要先采用其他的工具或者软件进行截图，并将截图所得的图形保存后再进行取色，最后才将颜色值应用在产品界面设计中，操作麻烦，而且降低了用户的工作效率；而且，目前这种取色的方法是基于C/S架构，并不适用于B/S架构下的屏幕取色。

发明内容

本申请实施例提供了的界面取色方法、装置、设备及存储介质，用于在B/S架构下进行屏幕取色，通过直接对前端显示界面进行截图，并在前端生成的图片上进行取色，操作简便，提高了用户的取色效率。所述技术方案如下：

第一方面，本申请实施例提供了一种界面取色方法，所述取色方法包括：

截取前端显示界面，在前端生成图片；

确定在前端选取的取色点，获取取色点的坐标值；

根据取色点的坐标值，获取取色点的颜色值；

将颜色值写入颜色窗口。

在一种可能的设计中，所述将颜色值写入颜色窗口之后，还包括，重复执行所述确定在前端选取的取色点，获取取色点的坐标值，根据取色点的坐标值，获取取色点的颜色值，将颜色值写入颜色窗口将图片上所有取色点的颜色值均写入颜色窗口，直到将图片上所有取色点的颜色值均写入颜色窗口。

在一种可能的设计中，所述将颜色值写入颜色窗口之后，还包括，删除在前端生成的图片。

在一种可能的设计中，所述截取前端显示界面，在前端生成图片包括：通过html2canvas对前端显示界面进行截屏，在前端生成图片。

在一种可能的设计中，所述通过html2canvas对前端显示界面进行截屏，在前端生成图片包括如下步骤：

通过html2canvas将前端显示界面抓取到canvas中；

调用canvas.toDataURL()方法，将被抓取到canvas中的前端显示界面转换成base64字符串；

新建img标签，将base64字符串赋值给img标签的src属性；