CN111596848A - 一种界面取色方法、装置、设备及存储介质 - Google Patents

一种界面取色方法、装置、设备及存储介质 Download PDF

Info

Publication number
CN111596848A
CN111596848A CN202010390754.8A CN202010390754A CN111596848A CN 111596848 A CN111596848 A CN 111596848A CN 202010390754 A CN202010390754 A CN 202010390754A CN 111596848 A CN111596848 A CN 111596848A
Authority
CN
China
Prior art keywords
color
value
point
coordinate value
determining
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202010390754.8A
Other languages
English (en)
Inventor
曾国栋
张多
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Yuanguang Software Co Ltd
Original Assignee
Yuanguang Software Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Yuanguang Software Co Ltd filed Critical Yuanguang Software Co Ltd
Priority to CN202010390754.8A priority Critical patent/CN111596848A/zh
Publication of CN111596848A publication Critical patent/CN111596848A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
    • G06F3/041—Digitisers, e.g. for touch screens or touch pads, characterised by the transducing means
    • G06F3/0412—Digitisers structurally integrated in a display
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements

Abstract

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

Description

一种界面取色方法、装置、设备及存储介质
技术领域
本申请涉及计算机技术领域，尤其涉及一种界面取色方法、装置、设备及存储介质。
背景技术
在产品界面设计过程中，灵活调整产品界面的颜色是本领域技术人员必须考虑的要点。现有的颜色调整有多种方式，例如提供颜色菜单列表，用户通过既定的颜色菜单列表选择颜色，或，提供基于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属性；
将img标签添加到当前界面，并将宽度和高度均设置成100％。
在一种可能的设计中，所述确定在前端选取的取色点，获取取色点的坐标值包括以下步骤，
监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐标值；
根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐标值。
在一种可能的设计中，所述确定在前端选取的取色点，获取取色点的坐标值包括以下步骤，
监测触摸屏的触摸点，确定触摸点的坐标值；
根据触摸点的坐标值，确定取色点在图片上的坐标。
在一种可能的设计中，所述根据取色点的坐标值，确定取色点的颜色值包括如下步骤，
根据取色点的坐标值，确定取色点在图片上相对应的像素点；
计算提取的像素点的RGB值和/或CMYK值和/或HEX值。
在一种可能的设计中，所述根据取色点的坐标值，确定取色点的颜色值包括如下步骤，
根据取色点的坐标值，确定取色点在图片上相对应的像素点；
计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
第二方面，本申请实施例提供了一种界面取色装置，所述取色装置包括：
前端截图单元，用于对前端显示界面进行截图处理，并在前端生成图片；
坐标值获取单元，用于确定在前端选取的取色点，获取取色点的坐标值；
颜色值获取单元，用于根据取色点的坐标值，获取取色点的颜色值；
颜色值写入单元，用于将颜色值写入颜色窗口。
在一种可能的设计中，所述前端截图单元包括html2canvas，所述html2canvas对前端显示界面进行截屏，在前端生成图片。
在一种可能的设计中，所述坐标值获取单元包括，
鼠标/光标监测单元，用于监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐标值；
坐标值确定单元，用于根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐标值。
在一种可能的设计中，所述坐标值获取单元包括，
触摸监测单元，用于监测触摸屏的触摸点，确定触摸点的坐标值；
坐标值确定单元，用于根据触摸点的坐标值，确定取色点在图片上的坐标值。
在一种可能的设计中，所述颜色值获取单元具体包括：
像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值。
在一种可能的设计中，所述颜色值获取单元具体包括：
像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
放大显示单元，用于将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
第三方面，本申请实施例提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述方法步骤。
第四方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。
本申请一些实施例提供的技术方案带来的有益效果至少包括：
直接对前端显示界面进行截图，并在前端生成的图片上进行取色，无需先采用其他的工具或者软件进行截图，并将截图所得的图形保存后再进行取色，操作简便，提高了用户的取色效率。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请实施例一提供的界面取色方法的流程示意图；
图2是本申请实施例一提供的界面取色方法的步骤S100的流程示意图；
图3是本申请实施例一提供的界面取色方法的步骤S200的流程示意图；
图4是本申请实施例一提供的界面取色方法的步骤S300的流程示意图；
图5是本申请实施例一提供的界面取色装置的框架结构示意图；
图6是本申请实施例一提供的界面取色装置的具体结构示意图；
图7是本申请实施例一提供的计算机设备的结构示意图；
图8是本申请实施例一提供的截取前端显示界面前的取色界面图；
图9是本申请实施例一提供的获取取色点的颜色值的一种取色界面图；
图10是本申请实施例一提供的获取取色点的颜色值的另一种取色界面图(点开颜色块之后)；
图11是本申请实施例一提供的清除颜色时的取色界面图；
图12是本申请实施例一提供的修改颜色时的取色界面图；
图13是本申请实施例二提供的界面取色方法的流程示意图；
图14是本申请实施例三提供的界面取色方法的流程示意图；
图15是本申请实施例四提供的界面取色方法的步骤S300的流程示意图；
图16是本申请实施例四提供的颜色值获取单元的具体结构示意图；
图17是本申请实施例五提供的界面取色方法的步骤S200的流程示意图；
图18是本申请实施例五提供的坐标值获取单元的具体结构示意图；
图19是本申请实施例六提供的界面取色方法的步骤S200的流程示意图；
图20是本申请实施例六提供的坐标值获取单元的具体结构示意图。
具体实施方式
为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。
下面结合本发明实施例中的附图对本发明实施例进行描述。
下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
实施例一
请参阅图1，图1为本发明实施例中提供的一种界面取色方法的流程示意图。该方法可适用于取色的情况，该方法可以由取色装置来执行，该装置可由硬件和/或软件组成，并一般可集成在智能手机、平板电脑、膝上型便携式计算机以及台式计算机等所有包含取色功能的智能终端中。具体包括如下：
S100，截取前端显示界面，在前端生成图片；
在本申请中，前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页；当需要提取前端显示界面上的颜色时，需要截取前端显示界面，在前端生成图片(即，将图片覆盖显示在前端界面上)。
在本实施例中，在截取前端显示界面并在前端生成图片之前，还包括打开前端显示界面，选取待变色的目标，打开取色装置的显示界面图；如图8所示，在截取前端显示界面并在前端生成图片之前，先打开浏览器，选取待变色的目标“网页设计与SEO”的字样，打开取色装置的显示界面图后，文本栏显示“网页设计与SEO”字样的属性值为#01B6D6，代表的颜色为青蓝色；点击属性值#01B6D6右侧的颜色块，弹出取色界面；该取色界面包括默认颜色、取色吸管、RGB值、HEX值、透明度以及最近使用的颜色；当前“网页设计与SEO”字样的RGB值(R，G，B)分别为(1，182，214)、HEX值为01B6D6，透明度为100，即不透明。
在本实施例中，截取前端显示界面并在前端生成图片，具体包括：通过html2canvas对前端显示界面进行截屏，在前端生成图片；html2canvas是一款前端插件，它的原理是将Dom节点在Canvas里边画出来。请参阅图2，图2为本发明实施例中通过html2canvas对前端显示界面进行截屏，在前端生成图片的详细流程示意图。具体包括如下：
S110，通过html2canvas将前端显示界面抓取到canvas中；
在本实施例中，html2canvas脚本将当前页面渲染成一个Canvas图片，通过读取DOM将不同的样式应用到这些元素上。
S120，调用canvas.toDataURL()方法，将被抓取到canvas中的前端显示界面转换成base64字符串；
在本实施例中，canvas.toDataURL()是canvas拥有的一种功能函数，具体地，是一种转换函数，用于通过图片路径获取图片内容；<img>获取到的图片放到<canvas>里，在.toDataURL()方法的转化下，就可以得到以base64编码的dataURL。
S130，新建img标签，将base64字符串赋值给img标签的src属性；
在本实施例中，通过新建<img>标签，并将base64字符串赋值给img标签的src属性，可以起到发起图片读取请求，读取浏览器缓存数据的作用，即通过将base64字符串赋值给img标签的src属性，便于读取截取的浏览器图片数据。
S140，将img标签添加到当前界面，并将宽度和高度均设置成100％。
在本实施中，通过将img标签添加到当前界面，实现将截取的浏览器图片数据添加到当前界面进行显示，再通过设置图片的宽度和高度，使得截取前端显示界面生成的图片完全遮挡当前界面。
S200，确定在前端选取的取色点，获取取色点的坐标值；
在本实施例中，截取前端显示界面，在前端生成图片(即对前端显示界面进行截屏处理，并将图片显示在前端)之后，需要根据前端选取的取色点，获取取色点的坐标值；确定在前端选取的取色点可以是通过移动/点击鼠标或移动光标或操作触摸屏进行取色点的选取从而确定。
在本实施例中，取色点的坐标值具体为取色点的横坐标值和纵坐标值；在其他实施例中，取色点的坐标值具体可以为取色点的极径值和极角值。
在本实施例中，确定在前端选取的取色点是通过移动鼠标进行取色点的选取确定。请参阅图3，图3为本发明实施例中确定在前端选取的取色点，获取取色点的坐标值的详细流程示意图。具体包括如下：
S210，监测鼠标的移动路径，确定鼠标停留处的坐标值；
S220，根据鼠标停留处的坐标值，确定取色点在图片上的坐标值。
在本实施例中，操作人员移动鼠标，当移动到所需的取色点时，将鼠标停留在屏幕上取色点所在位置，获取鼠标停留处在屏幕上的坐标值，再根据鼠标停留处的坐标值，获取取色点的坐标值。
S300，根据取色点的坐标值，获取取色点的颜色值；
在本实施例中，取色点的颜色值可以是RGB值、CMYK值、HEX值中的一种或多种。
S400，将颜色值写入颜色窗口。
如图9所示，在本实施例中，进行取色点的选取时，鼠标停留处为选取的取色点；被选取的颜色区域会被放大显示(如图9中圆形网格状区域即为放大后的取色区域)，便于准确地进行颜色吸取。如图9所示，选取的颜色区域的属性值为#2E3336，颜色为黑色。如图10所示，点击属性值为#2E3336右侧的黑色颜色块，可知取色区域的RGB值(R，G，B)分别为(46，51，54)、HEX值为2E3336，透明度为100。
在本实施例中，将选取的取色区域的颜色值写入颜色窗口后，待变色的目标“网页设计与SEO”的字样变为写入的颜色值对应的颜色，便于对颜色进行保存、选择以及清除等操作；将颜色值写入颜色窗口具体包括：将提取的像素点的RGB值和/或CMYK值和/或HEX值添加到颜色窗口的色值控件中；当颜色值写入颜色窗口后，通过颜色窗口对需要调色的对象(如文本、图形等……)进行颜色调整。
请参阅图4，图4为本发明实施例中根据取色点的坐标值，确定取色点的颜色值的详细流程示意图。具体包括如下：
S310，根据取色点的坐标值，确定取色点在图片上相对应的像素点；
S320，计算提取的像素点的RGB值和/或CMYK值和/或HEX值。
如图10，11所示，在本实施例中，颜色值写入颜色窗口后，一方面可以通过在颜色窗口设置多种默认颜色，便于直接选中进行使用；另一方面，最近使用的颜色可以在颜色窗口保存下来，方便用户随便选择使用；如图11所示，通过将已选取或者已设置的颜色的RGB值和HEX值均设置为0后，可以对颜色窗口中已选中或者已设置的颜色进行清除。
如图12所示，除了在截取的前端显示界面上取色以外，本申请实施例提供的取色装置可以通过修改取色界面上的RGB值、HEX值修改颜色，并可以通过修改透明度的数值设置颜色的透明度。
在本实施例中，前端选取的取色点的数量为一个，界面取色方法只需执行一次步骤S200～S400，即可完成取色操作。
本实施例提供的界面取色方法无需先采用其他的工具或者软件进行截图，并将截图所得的图形保存后再进行取色，而是直接对前端显示界面进行截图，并在前端生成的图片上进行取色，操作简便，提高了用户的取色效率。
请参阅图5，本发明实施例中提供的一种界面取色装置包括：
前端截图单元710，用于对前端显示界面进行截图处理，并在前端生成图片；
在本实施例中，前端截图单元710具体包括html2canvas；如前所述，所述html2canvas用于对前端显示界面进行截屏，在前端生成图片。
坐标值获取单元720，用于确定在前端选取的取色点，获取取色点的坐标值；
颜色值获取单元730，用于根据取色点的坐标值，获取取色点的颜色值；
颜色值写入单元740，用于将颜色值写入颜色窗口。
具体地，颜色值写入单元740用于将提取的像素点的RGB值和/或CMYK值和/或HEX值添加到颜色窗口的色值控件中。
本实施例中的界面取色装置通过前端截图单元710对前端显示界面进行截图处理，并在前端生成图片；通过坐标值获取单元720确定在前端选取的取色点，获取取色点的坐标值；通过颜色值获取单元730，获取取色点的颜色值；通过颜色值写入单元704将颜色值写入颜色窗口，实现直接对前端显示界面进行截图，并在前端生成的图片上进行取色，解决了现有的取色器需先采用其他的工具或者软件进行截图，并将截图所得的图形保存后再进行取色，所导致的操作麻烦、工作效率低下的技术问题。
请参阅图6，本发明实施例中提供的坐标值获取单元720具体包括：
鼠标监测单元721，用于监测鼠标的移动路径，确定鼠标停留处的坐标值；
坐标值确定单元722，用于根据鼠标停留处的坐标值，确定取色点在图片上的坐标值。
请参阅图6，本发明实施例中提供的颜色值获取单元730具体包括：
像素点确定单元731，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元732，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值。
需要说明的是，上述实施例提供的界面取色装置在执行界面取色方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的界面取色装置与界面取色方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。
请参阅图7，本发明实施例一提供的一种计算机设备具体包括：处理器810、存储器820、输入装置830和输出装置840；设备中处理器810的数量可以是一个或多个，图7中以一个处理器810为例；设备中的处理器810、存储器820、输入装置830和输出装置840可以通过总线或其他方式连接，图7中以通过总线连接为例。
处理器810可以包括一个或者多个处理核心。处理器810利用各种借口和线路连接整个计算机设备内的各个部分，通过运行或执行存储在存储器820内的指令、程序、代码集或指令集，以及调用存储在存储器820内的数据，执行计算机设备的各种功能和处理数据。可选的，处理器810可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(ProgrammableLogic Array，PLA)中的至少一种硬件形式来实现。处理器810可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器810中，单独通过一块芯片进行实现。
存储器820作为一种计算机可读存储介质，可用于存储软件程序、计算机可执行程序以及模块，如本发明实施例中的取色方法对应的模块(例如，图5取色装置中的前端截图单元710、坐标值获取单元720、颜色值获取单元730以及颜色值写入单元740)。处理器810通过运行存储在存储器820中的软件程序、指令以及模块，从而执行设备的各种功能应用以及数据处理，即实现上述的取色方法。
存储器820可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序；存储数据区可存储根据终端的使用所创建的数据等。此外，存储器820可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在一些实例中，存储器820可进一步包括相对于处理器810远程设置的存储器，这些远程存储器可以通过网络连接至设备。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
输入装置830可用于接收包含指令信息的红外信号，以及产生与设备的用户设置以及功能控制有关的屏幕点击信号输入。输出装置840可包括显示屏等显示设备。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
实施例二
请参阅图13，本实施例与实施例一的区别在于：步骤S400，将颜色值写入颜色窗口之后，还包括如下步骤：
S500，重复操作步骤S200～S400，直到将图片上所有取色点的颜色值均写入颜色窗口；
S600，删除在前端生成的图片。
在本实施例中，前端选取的取色点的数量为多个，界面取色方法需要多次执行步骤S200～S400，才能完成取色操作。
在本实施例中，将颜色值全部写入颜色窗口之后，需要删除在前端生成的图片，保证完成取色操作后，智能终端再次进行上述取色操作或进行其它操作。
实施例三
请参阅图14，本实施例与实施例一或实施例二的区别在于：步骤S400，将颜色值写入颜色窗口之后，包括步骤S600，删除在前端生成的图片。
实施例四
请参阅图15，16，本实施例与实施例一或实施例二的区别在于，确定取色点的颜色值具体包括如下：
S310，根据取色点的坐标值，确定取色点在图片上相对应的像素点；
S320，计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
S330，将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
本发明实施例中提供的颜色值获取单元730具体包括：
像素点确定单元731，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元732，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
放大显示单元733，用于将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
实施例五
请参阅图17，18所示，本实施例与实施例一或实施例二或实施例三的区别在于，确定在前端选取的取色点，获取取色点的坐标值的详细流程示意图。具体包括如下：
S211，监测光标的移动路径，确定光标停留处的坐标值；
S221，根据光标停留处的坐标值，确定取色点在图片上的坐标值。
本发明实施例中提供的坐标值获取单元720具体包括：
光标监测单元723，用于监测光标的移动路径，确定光标停留处的坐标值；
坐标值确定单元724，用于根据光标停留处的坐标值，确定取色点在图片上的坐标值。
实施例六
请参阅图19，20所示，本实施例与实施例一或实施例二或实施例三或实施例四的区别在于，确定在前端选取的取色点，获取取色点的坐标值的详细流程示意图。具体包括如下：
S212，监测触摸屏的触摸点，确定触摸点的坐标值；
S222，根据触摸点的坐标值，确定取色点在图片上的坐标值。
本发明实施例中提供的坐标值获取单元720具体包括：
触摸监测单元725，用于监测触摸屏的触摸点，确定触摸点的坐标值；
坐标值确定单元726，用于根据触摸点的坐标值，确定取色点在图片上的坐标值。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (11)

1.一种界面取色方法，其特征在于，包括以下步骤：
截取前端显示界面，在前端生成图片；
确定在前端选取的取色点，获取取色点的坐标值；
根据取色点的坐标值，获取取色点的颜色值；
将颜色值写入颜色窗口。
2.根据权利要求1所述的取色方法，其特征在于，所述截取前端显示界面，在前端生成图片包括：通过html2canvas对前端显示界面进行截屏，在前端生成图片。
3.根据权利要求2所述的取色方法，其特征在于，所述通过html2canvas对前端显示界面进行截屏，在前端生成图片包括如下步骤：
通过html2canvas将前端显示界面抓取到canvas中；
调用canvas.toDataURL()方法，将被抓取到canvas中的前端显示界面转换成base64字符串；
新建img标签，将base64字符串赋值给img标签的src属性；
将img标签添加到当前界面，并将宽度和高度均设置成100％。
4.根据权利要求1-3任意一项所述的取色方法，其特征在于，所述确定在前端选取的取色点，获取取色点的坐标值包括以下步骤，
监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐标值；
根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐标值；
或，包括以下步骤，
监测触摸屏的触摸点，确定触摸点的坐标值；
根据触摸点的坐标值，确定取色点在图片上的坐标。
5.根据权利要求1-3任意一项所述的取色方法，其特征在于，所述根据取色点的坐标值，确定取色点的颜色值包括如下步骤，
根据取色点的坐标值，确定取色点在图片上相对应的像素点；
计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
或，包括以下步骤，
根据取色点的坐标值，确定取色点在图片上相对应的像素点；
计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
6.一种界面取色装置，其特征在于，包括：
前端截图单元，用于对前端显示界面进行截图处理，并在前端生成图片；
坐标值获取单元，用于确定在前端选取的取色点，获取取色点的坐标值；
颜色值获取单元，用于根据取色点的坐标值，获取取色点的颜色值；
颜色值写入单元，用于将颜色值写入颜色窗口。
7.根据权利要求6所述的取色装置，其特征在于，所述前端截图单元包括html2canvas，所述html2canvas用于对前端显示界面进行截屏，在前端生成图片。
8.根据权利要求6或7任意一项所述的取色装置，其特征在于，所述坐标值获取单元包括，
鼠标/光标监测单元，用于监测鼠标/光标的移动路径，确定鼠标/光标停留处的坐标值；
坐标值确定单元，用于根据鼠标/光标停留处的坐标值，确定取色点在图片上的坐标值；
或，包括，
触摸监测单元，用于监测触摸屏的触摸点，确定触摸点的坐标值；
坐标值确定单元，用于根据触摸点的坐标值，确定取色点在图片上的坐标值。
9.根据权利要求6或7任意一项所述的取色装置，其特征在于，所述颜色值获取单元具体包括：
像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
或，包括，
像素点确定单元，用于根据取色点的坐标值，确定取色点在图片上相对应的像素点；
颜色值计算单元，用于计算提取的像素点的RGB值和/或CMYK值和/或HEX值；
放大显示单元，用于将提取的像素点的RGB值和/或CMYK值和/或HEX值进行放大显示。
10.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-5任意一项的方法步骤。
11.一种计算机可读存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1～5任意一项的方法步骤。
CN202010390754.8A 2020-05-09 2020-05-09 一种界面取色方法、装置、设备及存储介质 Pending CN111596848A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010390754.8A CN111596848A (zh) 2020-05-09 2020-05-09 一种界面取色方法、装置、设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010390754.8A CN111596848A (zh) 2020-05-09 2020-05-09 一种界面取色方法、装置、设备及存储介质

Publications (1)

Publication Number Publication Date
CN111596848A true CN111596848A (zh) 2020-08-28

Family

ID=72191082

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010390754.8A Pending CN111596848A (zh) 2020-05-09 2020-05-09 一种界面取色方法、装置、设备及存储介质

Country Status (1)

Country Link
CN (1) CN111596848A (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112328943A (zh) * 2020-11-26 2021-02-05 杭州安恒信息技术股份有限公司 一种基于html2canvas的节点截图方法
CN112506597A (zh) * 2020-12-01 2021-03-16 珠海格力电器股份有限公司 软件界面配色方法、装置、计算机设备和存储介质
CN113407090A (zh) * 2021-05-31 2021-09-17 北京达佳互联信息技术有限公司 界面取色方法、装置、电子设备及存储介质
WO2022267617A1 (zh) * 2021-06-25 2022-12-29 华为技术有限公司 获取图像特征的方法及电子设备

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104850333A (zh) * 2015-04-29 2015-08-19 深圳市金立通信设备有限公司 一种界面操作方法
CN106033305A (zh) * 2015-03-20 2016-10-19 广州金山移动科技有限公司 一种屏幕取色方法及装置
CN109670132A (zh) * 2018-12-18 2019-04-23 北京城市网邻信息技术有限公司 一种页面绘制方法、装置、终端设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106033305A (zh) * 2015-03-20 2016-10-19 广州金山移动科技有限公司 一种屏幕取色方法及装置
CN104850333A (zh) * 2015-04-29 2015-08-19 深圳市金立通信设备有限公司 一种界面操作方法
CN109670132A (zh) * 2018-12-18 2019-04-23 北京城市网邻信息技术有限公司 一种页面绘制方法、装置、终端设备及存储介质

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112328943A (zh) * 2020-11-26 2021-02-05 杭州安恒信息技术股份有限公司 一种基于html2canvas的节点截图方法
CN112506597A (zh) * 2020-12-01 2021-03-16 珠海格力电器股份有限公司 软件界面配色方法、装置、计算机设备和存储介质
CN112506597B (zh) * 2020-12-01 2022-04-08 珠海格力电器股份有限公司 软件界面配色方法、装置、计算机设备和存储介质
CN113407090A (zh) * 2021-05-31 2021-09-17 北京达佳互联信息技术有限公司 界面取色方法、装置、电子设备及存储介质
WO2022267617A1 (zh) * 2021-06-25 2022-12-29 华为技术有限公司 获取图像特征的方法及电子设备

Similar Documents

Publication Publication Date Title
CN111596848A (zh) 一种界面取色方法、装置、设备及存储介质
US11755347B2 (en) Method and system for accessing table content in a digital image of the table
US11061661B2 (en) Image based method and system for building object model and application states comparison and graphic-based interoperability with an application
US9105094B2 (en) Image layers navigation
JP5981175B2 (ja) 図面表示装置、及び図面表示プログラム
US20210311723A1 (en) Method and system for providing image-based interoperability with an application
WO2023071861A1 (zh) 数据可视化展示方法、装置、计算机设备和存储介质
WO2017000898A1 (zh) 软件图标显示方法和装置
CN110471700B (zh) 图形处理方法、装置、存储介质及电子设备
CN114022604A (zh) 一种模型绘制方法、装置、电子设备及存储介质
CN113626023A (zh) 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质
CN113705156A (zh) 字符处理方法及装置
CN110737417B (zh) 一种演示设备及其标注线的显示控制方法和装置
CN111915705A (zh) 图片可视化编辑方法、装置、设备和介质
CN104516860A (zh) 选择被显示文档内的文本的方法和系统
US9021346B2 (en) Systems and methods for displaying and editing state-specific link attributes
CN114629800A (zh) 工控网络靶场的可视化生成方法、装置、终端及存储介质
CN113112395B (zh) 图片处理方法、装置及存储介质
CN114510187B (zh) 图像显示方法及装置、电子设备和介质
US11966758B2 (en) Method and system for accessing table content in a digital image of the table
CN114554089B (zh) 视频处理方法、装置、设备、存储介质
US20230119741A1 (en) Picture annotation method, apparatus, electronic device, and storage medium
CN117291158A (zh) 一种文档处理方法、装置、终端、介质及程序产品
CN113297519A (zh) 评论数据的生成方法、装置、电子设备及计算机存储介质
CN116881121A (zh) 测试方法、装置、电子设备、计算机可读存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination