发布网友 发布时间:2022-04-20 23:16
共3个回答
懂视网 时间:2022-05-12 04:13
本篇文章给大家带来的内容是关于如何提取图片的主题色?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
工作时遇到一个需求:提取图片主题色,通过某种映射关系,选取ui给出的对应颜色。脑海中浮现如果只是纯前端如何实现呢?
一、思路与准备
利用canvas获取图像像素信息,然后用某种算法将主题颜色提取出来。
1.1 了解Canvas画布真实像素原理
MDN: 事实上,你可以直接通过getImageData,返回一个imageData对象,获取场景像素数据。
imageData对象包含下列几个只读属性:
width:图片宽度,单位是像素
height:图片高度,单位是像素
data:Uint8ClampedArray类型的一维数组,包含着RGBA格式的整型数据,范围在0至255之间(包括255)。
data属性返回一个 Uint8ClampedArray,它可以被使用作为查看初始像素数据。每个像素用4个
1 bytes值(按照红,绿,蓝和透明值的顺序,"RGBA"格式)
来代表。每个颜色值部份用0至255来代表。每个部分被分配到一个在数组内连续的索引,左上角像素的红色部分在数组的索引0位置。像素从左到右被处理,然后往下,遍历整个数组。
Uint8ClampedArray 包含高度 × 宽度 × 4 bytes数据,索引值从0到(高度×宽度×4)-1
1.2 了解中位切分法 (Median cut)
中位切分法通常是在图像处理中降低图像位元深度的算法,可用来将高位的图转换位低位的图,如将24bit的图转换为8bit的图。我们也可以用来提取图片的主题色,其原理是是将图像每个像素颜色看作是以R、G、B为坐标轴的一个三维空间中的点,由于三个颜色的取值范围为0~255,所以图像中的颜色都分布在这个颜色立方体内。如图所示:
之后将RGB中最长的一边从颜色统计的中位数一切为二,使得到的两个长方体所包含的像素数量相同,如下图所示重复这个过程直到切出长方体数量等于主题色数量为止,最后取每个长方体的中点即可。
在实际使用中如果只是按照中点进行切割,会出现有些长方体的体积很大但是像素数量很少的情况。解决的办法是在切割前对长方体进行优先级排序,排序的系数为体积 * 像素数。这样就可以基本解决此类问题了。
其中color-thief库就是基于中位切分法实现的。
热心网友 时间:2022-05-12 01:21
对于大多数程序员来说,假如有一个图片的颜色很漂亮,但是自己怎么都无法设计出与其最贴近颜色时,可以通过PS来提取颜色,下面叫大家如何在PS中提取图片的颜色??
1、首先当然是打开Photoshop软件,在文件下拉菜单中打开要提取颜色的图片,当然,你也可以直接将图片拖动到Photoshop软件中
2、选择红色区域内 吸管工具 ,点击你 需要提取的颜色部位
3、点击鼠标右键,会显示出 吸管工具 的选型,这里选择将其转换为十六进制代码,你也可以 选择其他的方式
4、如果觉得颜色不是太清楚或者选取的 颜色太深或浅 ,在选取点击右键是可以修改取色的范围,如3x3平均、5x5平均等,根据自己的想要的颜色进行调整
5、 提取到颜色之后就可以用到你想用的地方了,以上就是在图片上获取颜色的步骤了,是不是很简单
热心网友 时间:2022-05-12 02:39
付费内容限时免费查看回答您好,您的问题我已经看见了,正在整理答案,稍后5分钟给您答案,请您稍等一下哦
您好亲: 您所问的问题 如何用PS提取图片的颜色 为您提供答案如下:确定自己想要的风格的提取。把选中的图片放入PS中,点击文件——“储存web所,格式选为png-8,色,点击图中下拉按钮,选择存储颜色表,选择存储位置,把它。选择存储位置,把它。
提问如何把多种颜色的图片从ps中取出
回答1.点击魔术棒工具,随便在需要提取颜色的某一个色块点一下。2.点击菜单栏选择,选取相似,这样某一颜色的所有色块都被全选上了。3.按Ctrl和J将该颜色提取到新的图层上,完成。
感谢您的咨询,如果您对我的回答满意的话 麻烦请给我一个赞,谢谢您!祝您生活愉快~
[开心][大红花]