接触前端音视频之后，需要掌握大量音视频和多媒体相关的基础知识。在使用 FFmpeg + WASM 进行视频帧提取时，涉及到视频帧和颜色编码等相关概念。本文将对视频帧中的颜色空间进行介绍。...对于视频帧，在现代视频技术里面，通常都是用 RGB 颜色空间或者 YUV 颜色空间的像素矩阵来表示。...在 ffmpeg 里面，我们可以看到源码 libavutil/pixfmt.h 中定义了一系列像素格式，绝大部分都是 RGB 和 YUV 颜色空间类型。...RGB 是目前运用最广的颜色系统之一，在现代显示器上基本都是采用 RGB 颜色标准。RGB 的原理是把颜色分为红、绿、蓝三个通道，每个通道按照不同比例混合来描述一个颜色。...RGB 格式根据存储的位数可以分为 16 位格式 、 24 位格式 和 32 位格式。在 FFmpeg 的源码中也可以看到 16bpp、24bpp 和 32bpp 的注释说明。
VC++6.0中改变窗口背景颜色和控件背景颜色 ?...1.改变对话框的背景色 在C…App类中的InitInstance()里添加 SetDialogBkColor(RGB(0,192,0),RGB(0,0,0)); 2.如果想改变静态文本或单选按钮的背景色可以用你说的那个获得控件...(RGB(0,255,0)); (3)在OnCtlColor函数中添加代码以改变控件的文字颜色和背景色 switch(pWnd->GetDlgCtrlID()) { case(IDC_INPUT): ...m_brush; break; default: break; } 3.如果想改变按钮的背景色，简直太难了，你要重写两个类，还需要在网上下，孙鑫的视频教程中也简单介绍了这个，可只是改变按钮的文字颜色...顺便说一下，在OnDraw函数中，自动加了一句：CTestADoc* pDoc = GetDocument(); 通过pDoc，可以获得与这个视图相关联的文档的指针。
颜色是一种高度刺激的视觉语言。该元素主要用于使用户在屏幕上进行操作或突出显示他们必须知道的信息。 即使是同一朵花，蓝花和红花所传达的感觉也是不一样的。它不仅传达一种情绪或细微差别，而且还用于传达信息。...色彩空间是指用于管理在此数字环境中表达的色彩的标准。在数码产品中，颜色主要是RGB、HSL、HSB等，工作时主要使用HEX和RGB。...但是在开发的时候，每个属性打个逗号打个逗号比较麻烦，所以我倾向于使用HEX，打码最少，容易区分。 主色和辅色 我倾向于严格和限制性地使用颜色，因为在数字产品 UI 中滥用颜色会干扰内容导航。...原因有以下几点： 原因一：自然界颜色的变化 在现实中，当光线强时，物体的色彩饱和度会变弱（想象一下，当你将手电筒放在苹果的正前方时）。颜色出现是因为光被材料反射。反射太少会使它看起来很暗。...我用illustrator调整了HSB的Hue并分配了12种颜色。我照原样复制它，然后将其转换为黑白。黄色和蓝色是生成的，但其余颜色看起来不是很规则。为什么 180 度和 300 度的颜色更亮？
，杆细胞（Rods）和锥细胞（Cones），比较多的是杆细胞，它是感受光的亮度的，少一点的是锥细胞，它是感受颜色的 有三种类型的锥细胞：S、M和L（对应于短波、中波和长波的峰值响应），然后它们分别对于不同波长的光有着不一样的反应强度...并且呢之前那个颜色匹配函数里面的R是存在负数的，这里都是正数，但是同样可以通过不同的x、y、z来模拟不同波长光的效果，这里的Y是亮度 通过归一化让x+y+z=1，在二维上只显示x和y来把整个颜色空间显示在二维上...) HSV是常用的颜色拾取器，就是用来调颜色的，Hue是色调，就是简单的颜色，而Saturation是饱和度，就是调节这个颜色的浓淡，在白色和原色之间的一个范围，Lightness (or value)...，但是这个红绿和蓝黄怎么就互补了，还是那个道理，就是颜色是人的感受 如果你盯着一个东西盯久了，突然切换画面，眼前就会出现互补色 还有视觉是相对的，像这个A和B看起来是不一样的 但实际上它们两个是一样的...离谱但真实存在 减色系统：CMYK 什么是减色系统呢，就好像颜料一样，这个不同的颜色越混合就越渐近黑色，这个C是蓝绿色（Cyan），这个M是品红色（Magenta），Y就是黄色，K是黑色，那为什么我有了
有时，两种或三种颜色搭配在一起看起来很合适。我们却无法解释为什么，但我们知道这是对的。 对此，色彩理论给出了满意的答案，那就是当你知道答案时，为什么还要猜测几种颜色搭配起来看起来很好的原因呢？...RYB 色轮是艺术家使用的色轮，因为该色轮上的组合更适用于油漆和其他印刷的颜色组合。此模型中的原色是红色、黄色和蓝色。...该模型中的原色是红色、绿色和蓝色。了解RGB 与 CMYK之间的区别不仅仅是微不足道的；这对数字设计师来说是必要的。 配色方案 色轮上的颜色之间存在多种关系。这些关系称为颜色组合或配色方案。...有时它并不像看起来那么简单。根据它所处的特定颜色光谱的哪一端，某些颜色可以在暖色和冷色之间转换。例如，带有更多橙色的红色看起来和感觉起来比带有淡淡紫色和蓝色的红色更暖和。...为什么有些人在一起看起来很好，而有些人则不好，为什么有些人让你感到快乐而有些人让你感到悲伤，这背后是有原因的。您不必成为平面设计师即可掌握并运用这些知识：颜色适合所有人。
有些还有额外的 alpha 通道。其中 rgb 和 alpha 通道分别表示红色、绿色、蓝色和透明度通道. RGBA 值的范围 [0,1]; 什么叫灰度? 就是每个像素的亮度....灰度值为1时,图片像素亮度最亮; 灰度值为 0 时,图片像素的亮度是最暗的. 什么叫灰度滤镜 就是原本 RGB 三个通道中的颜色值退化成只有 0-1 的亮度值....常见灰度化的思想就是将 RGB 三颜色通道 最简单的做法就是将: RGB 三个通道上的颜色值都填充绿色值. 04 — 灰度滤镜算法 三种常见灰度滤镜算法 最大值法：即新的颜色值R＝G＝B＝Max(R，...G，B); 这种方法处理后的图片看起来亮度值偏高 平均值法：即新的颜色值R＝G＝B＝(R＋G＋B)／3; 这种方法处理的图片会相对而言比较柔和 加权平均值法：即新的颜色值R＝G＝B＝(R ＊ Wr＋G＊...Wg＋B＊Wb); 一般由于人眼对不同颜色的敏感度不一样，所以三种颜色值的权重不一样，一般来说绿色最高，红色其次，蓝色最低，最合理的取值分别为Wr ＝ 30％，Wg ＝ 59％，Wb ＝ 11％ 或者
在使用 OpenCV 时，我在浏览器选项卡中永久打开了文档。 OpenCV 的构建似乎考虑到了最大惊喜的原则！这一切都始于默认的 BGR 像素格式。它不适用于使用标准 RGB 像素格式的库。...例如，当您在 OpenCV 中使用imread读取图像后尝试使用matplotlib显示图像时，结果看起来很有趣。 “当其他人及其阿姨都使用 RGB 时，为什么不使用 RGB？”...这是我在几个月前的一次会议上遇到 OpenCV 的创始人 Gary Bradski 博士时问他的问题，尽管我忽略了关于每个人和他们的阿姨使用 RGB 的部分。他用另一个问题回答了我的问题。...对于不知道这个不太真实的故事的人，我从snopes复制了以下内容 为什么他们在 OpenCV 中选择 BGR 颜色空间？...OpenCV 的早期开发人员之所以选择 BGR 颜色格式，是因为当时 BGR 颜色格式在相机制造商和软件提供商中很流行。
透明度混合需要像本例中那样工作，以便像字体和形状抗锯齿这样的东西能够正常工作并看起来正确，在不同的背景颜色下具有一致的重量和平滑的边缘。...如果你有一个HiDPI显示器或正在使用缩放功能，你的浏览器已经在缩放了（不正确的），全尺寸的图像看起来会有问题。...网络上几乎所有的颜色（从普通PNG文件中的数据到CSS和SVG中的十六进制值）都不是以实际的颜色强度来表示的，而是使用一种叫做 "8位sRGB "的有损压缩算法。...现代GPU在加载和渲染图像时，可以使用 from/to sRGB，而不会有任何性能损失。当使用破损的设计工具的设计师发现东西在正确实现的游戏引擎中看起来不一样时，这最终会造成痛苦。...在GIMP 2.10.30中创建的参考图像（这是少数几个真正能够正确进行混合和渐变的开源图像编辑应用程序之一）。GIMP 2.10是第一个把这个做对的版本，早在2018年。
举个例子， 我们用打印机打印一个苹果的图像， 用的是打印机的颜料， 而如果打印结果的 XYZ 和真实苹果的 XYZ 是一样的， 即使颜料的光谱特性和苹果的不一样， (但是看起来打印结果和苹果就是一样的)...既然相机不完美， 那么在简单情况下， 相机做两件事: 采用一个输入变换， 将原始传感器的 RGB 信号变为 XYZ 色度， 对这个变换进行优化， 以使得对真实世界中的大部分重要的颜色表现良好。...专业相机可以不用执行步骤 1 和步骤 2。 这意味着你将获得原始传感器 RGB 值。 在处理或 “冲印” 该图像之前， 不会使用任何颜色变换。...这就是输入变换了 (译注: 即前述两个步骤中的步骤 1)。 将 “场景相关” 的色彩空间中的颜色直接显示到屏幕上， 看起来这样操作没什么问题。...一个有色彩管理的工作流必须包括这一步， 才能真正影响图像保真度和一致性。 自从我们第一次开始在公共场所和家庭中能显示动态影像以来， 显示技术已经走过了漫长的道路。
一：RGB三原色 RGB三原色是怎么来的呢？ 当然，是因为他们三者可以调配出其他所有颜色。但为什么偏偏是这三个颜色呢？...确定了三基色，就可以建立RGB颜色空间模型了： ? 二：HSV颜色模型 那为什么又有了一个HSV模型呢？...而实际上自然世界是没有色度，色饱和度和明度这仨东西的，是人们抽象出来的概念，这套概念比RGB更符合人的视觉特性，虽然人眼是靠RGB三色感光细胞感知颜色的。且HSV可以大大简化图像分析与处理的工作量。...也就是我在模型上确定一个点，它的颜色是唯一的；而我在外界找到一种颜色，该颜色在模型上的点也是唯一的。 那再看圆柱模型，黑色在模型上是唯一的吗？...最后和大家分享一个在抖音上看到的色盲悖论： 假设有一个人，从出生开始就患有一种奇怪的色盲症，他会把绿色看成蓝色，把蓝色看成绿色，但是他并不知道自己跟别人不一样，别人看到的森林是绿色的，他看到的是蓝色的。
当然，Y 也是一个重要参数，其实平时我们看一个颜色深浅是很不一样的，而深浅取决于亮度Y，YYUV最大的优点在于只需占用极少的带宽RGB色彩模式在输出时需要3个独立的图像信号同时传输，带宽占用较高。...其实我们的RGB显示器就是运用了这个原理，显示出不同的色彩。所以，很多颜色并不是真正的一个颜色而已，它代表的是这个物体发出的光中，蓝绿红这三种光的相对强度的组合！！...如果你还记得黑体这个概念的话，不同温度会给出不同的能谱分布，如下图，不同的能谱分布中，蓝、绿和红色的相对强度不同。那么同样通过数学的运算，你可以计算出不同温度黑体在人眼中所反映出的“颜色”。...那么绿叶的颜色又是怎么回事？白纸呢？白种人为什么那么白？黑人为什么那么黑？因为他们不发光。所以，其实他们的颜色只是他们反射的光中蓝绿红这三种光的相对强度的组合！！...自然界中任何一点色都可以在Lab空间中表达出来，它的色彩空间比RGB空间还要大（有毛用?超过了RGB色域屏幕显示不了，超过了CMYK的色域打印不了，超过了视觉色域看都看不了！
图3右侧图案是左侧立体图形在平面内的投影。 显示器厂家标注的99%sRGB色域指的是“该显示器色域在平面中的投影占sRGB色域在平面中的投影的比例为99%以上”。...面对印刷业巨头的联合抵制和抗议，微软并没有认怂，他们之间的纠纷战争维持了三年之久，最后在Adobe公司的调解下，制定了Adobe RGB色域，这一更广阔的色域完美的包含了印刷所需的所有颜色。...为什么有些厂家(尤其是笔记本)喜欢标注自己产品的色域为72%NTSC？我想，他们是在暗示自己的产品有将近100%的sRGB色域，因为很多人误以为72%NTSC=100%sRGB。...但是同一台支持硬件校色的显示器在AMD显卡和Nvidia显卡中的表现也是不同的，这大概是由于两家显卡显卡对图像的处理模式不同。至于Intel的核心显卡，我个人感觉色彩表现和Nvidia显卡差不多。...设计讲究一个标准，如果90%的人都用sRGB，那10%的Adobe RGB使用者可能就是另类，因为他们做的图和别人的看起来不一样。
下图是我写的noteshrink.py程序的输出结果： 输出结果是一个相对较小的PNG文件，大小只有121KB。不仅图像内存变小，而且看起来更清晰！这才是我想要的！...重构过程就是将每种颜色与RGB颜色空间中的三维点一一对应，如下所示： 尽管真正的向量空间允许无限数量的像素亮度连续变化，但为了将颜色以数字形式存储在计算机上，我们需要对上述像素范围进行离散处理——通常红色...遗憾的是，情况并非总是如此，由于复印机玻璃板上的灰尘和污迹、页面本身的颜色变化、传感器噪声等不同的因素，像素的RGB值会发生随机的变化，页面的“实际颜色”其实可能涵盖数千个不同的RGB值。...： 由three.js提供支持的交互式三维图 最后这个PDF来自于工程师的方格纸，在这个过程中我将亮度阈值设置为0.05，因为背景和线条之间的对比度非常低： 对应的颜色簇： 由three.js提供支持的交互式三维图...与此同时，记录下这整个过程也让我受益匪浅，我先后在维基百科上补充了关于颜色量化的更多内容，也促使我尝试并学习了three.js。
其实，我们生活中所说的颜色和光谱中可见光的颜色并不是严格对等的。...其实我们的RGB显示器就是运用了这个原理，显示出不同的色彩。所以，很多颜色并不是真正的一个颜色而已，它代表的是这个物体发出的光中，蓝绿红这三种光的相对强度的组合！！...如果你还记得黑体这个概念的话，不同温度会给出不同的能谱分布，如下图，不同的能谱分布中，蓝、绿和红色的相对强度不同。 那么同样通过数学的运算，你可以计算出不同温度黑体在人眼中所反映出的“颜色”。...那么绿叶的颜色又是怎么回事？白纸呢？白种人为什么那么白？黑人为什么那么黑？因为他们不发光。所以，其实他们的颜色只是他们反射的光中蓝绿红这三种光的相对强度的组合！！...自然界中任何一点色都可以在Lab空间中表达出来，它的色彩空间比RGB空间还要大（有毛用?超过了RGB色域屏幕显示不了，超过了CMYK的色域打印不了，超过了视觉色域看都看不了！
二、不只是RGB 我们再来谈谈颜色模型。颜色模型是一个使用原色构建全系列颜色的系统。这里先介绍这两种不同的颜色模型：“加色模型”和”减色模型”。...加色模型使用光代表计算机屏幕上的颜色，而减色模型使用墨水在纸上打印这些数字图像。前者的原色由红色、绿色和蓝色(RGB)组成，后者有蓝色、品红、黄色和黑色(CMYK)四种原色组成。...我们在图像上看到的所有其他颜色都是由这些原色组合或混合而成的。所以当分别用RGB、CMYK表示一张图像时，图像可以有着略微不同地表达。如下图所示。 日常生活中见到最多的就是这两种颜色模型。...然而，在彩色模型的世界里不仅仅只有这两种颜色模型。众多的颜色模型中，灰度（grayscale）、HSV和HLS也是你会在计算机视觉任务中经常看到的。 灰度（grayscale）很简单。...这三幅图像展示了每个通道是如何组成的。在R通道图中，红色饱和度高的部分看起来是白色的。这是由于红色部分中的值接近255。在灰度模式下，值越高颜色就越白。
下面的图能更好的对比HSL和HSV的区别：在圆柱体外围是纯色(红黄绿蓝紫...)HSL中，这圈纯色位于亮度(L)等于1/2的部位，而在HSV中是在明度(Value)等于1的部位。...物体表现为某颜色是因为只反射某颜色（波长）的光，而吸收了其他颜色的光。例如皮肤在白光下显黄色是因为吸收了白光中的其他光，只反射黄色光。...CMY/CMYK常用于印刷，CMYK中的K表示的是blacK黑，因为CMY三色墨水难混合出真正的黑，故在印刷中引入纯黑色墨水。...在立方体模型中，以黑-白的体对角线为参照，靠右上方向的颜色/点可由向左下延伸的两种颜色叠加而成。例如RGB立方体中，品红可由相对靠左的蓝色和相对靠下的红色叠加。...彩色喷墨打印机使用CMY模型，当黄色墨水喷洒在一片白纸上时， 在红色光线下看起来像什么颜色？在白色光线下看起来像什么颜色？
通过了解颜色理论基础知识，您可以开始为自己解析颜色的逻辑结构，从而更有策略地创建和使用调色板。结果意味着唤起一种特定的情感、氛围或审美。 为什么色彩理论在可视化设计中很重要？...如果所有四种颜色都等于 0，那么您最终会得到真正的白色。 RGB RGB 代表红、绿、蓝，它基于光波的加色模型。这意味着，添加的颜色越多，您就越接近白色。...三色配色方案是通过选择三种颜色来创建的，这些颜色均等地排列在色轮周围的线条中。...要在三元方案中抑制某些颜色，可以选择一种主色并谨慎使用其他颜色，或者通过选择较柔和的色调来抑制其他两种颜色。 三元配色方案在条形图或饼图等图形中看起来很棒，因为它提供了创建比较所需的对比度。...一旦您选择了喜欢的方案中的颜色，就可以将 HEX 或 RGB 代码复制并粘贴到您正在使用的任何程序中。它还具有数百种预制配色方案，供您在自己的设计中探索和使用。
兼容性也很不错： 那为什么 antd 还在 5.5 版本实现一个 ColorPicker 呢？ 应该主要是为了统一 UI 吧，浏览器原生组件各个浏览器都不一样。...比如 safari 的 是这样的： safari 的这个做的还挺复杂的，还有一个原生的窗口来做选择，支持的功能挺多： 但这样会导致产品在各个浏览器的体验是不一致的...色相的取值范围是 0 到 360 饱和度和亮度都是 0% 到 100% 那为什么还会有 0.3turn、150deg 这种单位呢？...我一般都是写 linear-gradient(to top, xxx,xxx)，用 0deg 也可以。看 devtools 标出的小圆圈也很直观。 然后从左到右是从白到透明的渐变。...实现这样的颜色选择组件，需要了解颜色表示法： 网页支持的颜色表示法有 RGB、HSL 两种： RGB 是计算机喜欢的颜色表示法，可以直接用红绿蓝来显示颜色。
Opencv与pillow，base64的转换 ---- 在实际开发中，经常使用的图像工具还有pillow，以及在接口里经常要用的base64字符串，这三者是经常需要转换的： 都已经封装到 https...维度与通道 ---- 平时看起来图像是二维的，有宽和高，但是实际上，图像是三维的（指的是数据结构）: 高度和宽度比较好理解，对应的就是一个像素，但是一个像素通常不是一个单一的值，例如对于普通的彩色图像...在opencv中，主要使用的颜色空间有： BGR：这是opencv默认的颜色空间，需要特别注意。 RGB：这里我们常见的颜色空间了。...将BGR颜色空间直接转换为pillow的图像进行展示，颜色跟原图就会有差别，因为display默认展示出来的是RGB，而输入的却是BGR，相当于有两个通道被调换了（上图中的红色和蓝色调转了）。...正确的做法是，先将BGR转换为RGB，再转成pillow对象，才能正常的展示出来。混合使用opencv和pillow的时候，这点通常是需要特别注意。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
