`

ColorMatrix Demo

 
阅读更多

大家都知道ColorMatrixFilter用矩阵可以实现很多图像效果, 但是矩阵实在是太难理解了. 长久以来我们都是习惯于用photoshop和firework来做图像的处理, 我们所接触到的是 "亮度,对比度,饱和度和色相". 所以很多的同学想了方法: 用我们更容易理解的亮度,对比度,饱和度和色相来定义ColorMatrixFilter中的matrix.

 

整理有三种工具:

方法一: Adobe官方demo.

方法二: 由 gskinner 提供, demo和类下载 , demo如下, 这个可以直接用其中的AS3 utility类:

方法三: 由 L4LCD blog中的文章: 转换亮度/对比度/饱和度/色相到ColorMatrixFilter , 这个作者说是用Flash fl包里的AdjustColor函数.

常见matrix:

转载自  http://blog.163.com/mdzhg@126/blog/static/1633215682010423113048711/

0、 ColorMatrixFilter默认值

1,0,0,0,0
0,1,0,0,0
0,0,1,0,0
0,0,0,1,0

1、调整亮度:

亮度(N 取值为-255到255)  
1,0,0,0, N
0,1,0,0,N
0,0,1,0,N
0,0,0,1,0

我们只需要设置一下RGB的色彩偏移就能调节其亮度 ,是不是很简单呢。

2、颜色反向
-1 ,0,0,0,255

0, -1 ,0,0,255

0,0,-1 ,0,255

0,0,0,1,0

先解释一下颜色反向:就是把0变为255,255变为0,1变为254,254变为1.....

因此,我们只需把RGB通道的原通道乘数设为-1,然后再把色彩偏移量设为255就行了

3、图像去色:

0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0.3086, 0.6094, 0.0820, 0, 0
0    , 0    , 0    , 1, 0

1)、去色原理:只要把RGB三通道的色彩信息设置成一样;即:R=G=B,那么图像就变成了灰色,并且,为了保证图像亮度不变,同一个通道中的R+G+B=1: 如:0.3086+0.6094+0.0820=1;

2)、三个数字的由来:0.3086, 0.6094, 0.0820

同样的RGB,给人的感觉是绿色最亮,红色次之,蓝色最暗。它们的比例大概是3:6:1,即:0.3086, 0.6094, 0.0820
所以,在给图像去色时我们保留了大量的G通道信息,使得图像不至于变暗或者绿色信息不至于丢失(我猜想)。
4、色彩饱和度
N取值为0到2,当然也可以更高。
0.3086*(1-N) + N , 0.6094*(1-N)    , 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N) + N , 0.0820*(1-N)    , 0, 0,
0.3086*(1-N)   , 0.6094*(1-N)    , 0.0820*(1-N) + N  0, 0,
0        , 0        , 0        , 1, 0
分析:
1、当色彩饱和度低到一定成度的时候,就想当于给图像去色,所以跟第3条:图像去色,有着千丝万缕的联系,在此不想过多解释;
2、N为原有通道信息保留量;可以理解为百分之几,等于0时完全去色,小于1时降低色度,大于1时增加色度,等于2时色度翻一倍,等于3时……。注意:RGB的原有通道信息保留量都应该相等,不然会产生偏色。
3、为什么是这样的计算公式:
N是原通道色彩保留量:所以,在原通道中,我们都+ N ,这是不能被别的通道瓜分的。剩余的就是(1-N ),就让RGB按0.3086, 0.6094, 0.0820的比例还瓜分这个剩余量吧。
 

 5、对比度

N 取值为0到10
N,0,0,0,128*(1-N)
0,N,0,0,128*(1-N)
0,0,N,0,128*(1-N)
0,0,0,1,0

分析:

所谓对比度就是让红的更红,绿的更绿……或反之。初一想,我们只需要修改RGB的乘 数(要一至,不然偏色)。可仔细一琢磨,不对。如果只增加乘数,那么整个图像就会被漂白,(或反之)。好,有办法了,设置色彩偏移量,offset。具体 要偏移多少呢,我们找到了一个折中的方案:128(1-N);即:一幅图像,不论很亮或很黑,但对比度为0了,最终得到的都是一幅中性灰度的图像 (128),

6、阈值

所谓阈值,就是以一个色度值为基准对图像作非黑即白的处理(注意没有灰色),由于不去除了彩色属性,因此,也离不开0.3086, 0.6094, 0.0820这三组神奇的数字。

(N取值为0到255)

下面的256也可以改成255;(那样就能看到图一和图五的小黑点和小白点);
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0.3086*256,0.6094*256,0.0820*256,0,-256*N
0, 0, 0, 1, 0

分析:

先不看最后面的色彩偏移:-256*N

前面我们提及过,当RGB三个通道的色彩信息一模一样时,图像就失去了色彩(去色),从 0.3086*256,0.6094*256,0.0820*256,0,-256*N可以看出:图像已经去色了,并且,(*256)亮度已经翻了256 倍(当然也可以是255);我们知道,RGB的有效值是0-255,即:0,1,2……255,把这些值乘以255以后会出现什么情况呢?但是除了0之 外,别的全都大于或等于255了,所以此时的图像除了剩有几个黑点外,其它的全都变成白色了如图一(N=0);那么现在我们再作色彩偏移处理:把RGB都 减去255;上次值为255(白色)的现在又变成0(黑色了)超过255的仍然是白色,我们不断的反复减255,图2,图3,图4,图5,分别是 N=64,N=128,n=192,n=255时的图像:

7、色彩旋转

所谓色彩旋转就是让某一个通道的色彩信息让另一个通道去显示;比如,R显示G的信息,G显示B的信息,B显示R的信息,也可以只拿出一部份信息让给 别的通道去显示,至于参数的瓜分可以平分。不必太讲究,但是,始终要坚持的一个原则就是每一个通道中的RGB信息量之和一定要为1,不然将会生偏色,如果 您要制作偏色效果又另当别论;请偿试下面的参数

0,1,0,0,0
0,0,1,0,0
1,0,0,0,0
0,0,0,1,0

//---------------

0,0,1,0,0
1,0,0,0,0
0,1,0,0,0
0,0,0,1,0

8、只显示某个通道

1 ,0,0,0,0
0,0,0,0,0
0,0,0,0,0
0,0,0,1,0

//上面是只显示红色通道。依次类推。

分享到:
评论

相关推荐

    Android图片处理demo

    可能使用了ColorMatrix或PorterDuff模式来改变图片的颜色和透明度,或者利用第三方库,如Android-Image-Filter-Framework,来实现更复杂的图像处理效果。 如果项目包含"源码"标签,那么我们有机会研究代码结构,...

    android-图像处理demo

    除了直接设置ColorMatrix,还可以使用预定义的函数,如`ColorMatrix.reset()`重置矩阵,`ColorMatrix.postTranslate(float[] values)`和`ColorMatrix.preScale(float[] values)`进行矩阵的平移和缩放操作。...

    Demo——图片处理

    Android提供了ColorMatrix类来操作颜色矩阵,可以实现如灰度、饱和度、对比度等效果。也可以利用 OpenGL ES 实现更复杂的图像处理,例如使用Fragment Shader进行像素级操作。 5. 动画效果: 对图片应用动画,如...

    android图片处理集合demo

    这通常通过将Bitmap与ColorMatrix结合使用,或者使用OpenCV等图像处理库来实现。 5. 动态加载和渐进式展示: 对于大图,可以使用Fresco库实现动态加载,先加载低质量的缩略图,再逐步加载高质量图片,提升用户体验...

    Android下图片颜色变换处理Demo

    ColorMatrix colorMatrix = new ColorMatrix(); colorMatrix.set(new float[] { 1, 0, 0, 0, 50, // Red channel, add 50 to each pixel's red value 0, 1, 0, 0, 50, // Green channel 0, 0, 1, 0, 50, // Blue ...

    android中图片色彩特效处理Demo

    这个"android中图片色彩特效处理Demo"旨在帮助开发者理解如何改变图片的色调、饱和度和亮度,从而创建出具有独特视觉效果的应用,比如美颜APP。下面将详细阐述相关知识点。 1. 图片基本属性: - 色调(Hue):色调...

    Android图片特效处理Demo

    可以使用ColorMatrix进行色彩空间转换,减少色彩通道的强度,从而达到“浅色”效果。 5. **光照效果**:模拟光照在图像上的投射,可以改变图像的亮度和对比度,甚至添加阴影或高光。Android的ColorFilter可以结合...

    Android Bitmap使用demo

    ColorMatrix colorMatrix = new ColorMatrix(); colorMatrix.set(new float[]{ 1, 0, 0, 0, brightness, // Brightness adjustment 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0}); ColorMatrixColorFilter ...

    图片文件转成JPG不C# Demo 图片 缩略图 重绘

    ColorMatrix grayFilter = new ColorMatrix(new float[][] { new float[] {0.299f, 0.299f, 0.299f, 0, 0}, new float[] {0.587f, 0.587f, 0.587f, 0, 0}, new float[] {0.114f, 0.114f, 0.114f, 0, 0}, new ...

    Android 画布Canvas之连线动画Demo

    如果需要实现更复杂的动画,如平滑过渡的色彩变化,可以使用`ColorMatrix`或者`Shader`来实现。同时,还可以添加触摸事件监听,使得用户能够交互式地控制动画的开始、暂停和停止。 总结一下,这个"Android画布...

    命令参数设置demo

    在这个“命令参数设置demo”中,我们将深入探讨如何使用FFmpeg进行颜色相关的参数设置。 首先,我们要理解FFmpeg的基本用法。FFmpeg命令通常由三部分组成:`ffmpeg`命令本身,输入文件(-i参数),以及输出文件或...

    一个简单的Android图片处理DEMO

    2. **滤镜**:滤镜效果可以通过`ColorMatrix`和`ColorFilter`实现。首先,定义一个颜色矩阵,对像素的颜色值进行变换,然后创建一个`ColorFilter`对象,将其应用到`Paint`对象,最后在`Canvas`上用这个带滤镜的`...

    android滤镜demo

    在Android中,可以使用ColorMatrix来构建一个5x4的矩阵,对每个像素的颜色通道(红、绿、蓝、透明度)进行线性变换。 3. **图层叠加**:在本项目中,滤镜效果可能通过创建多个图层并进行叠加来实现。每个图层可以...

    一个完整的demo,功能点: 动态编辑图片, 美颜, 磨皮,高亮,添加水印,截取

    Android的`ColorMatrix`类可以用来改变像素的颜色属性,通过设置合适的矩阵元素,可以增加图像的整体亮度。同时,局部高亮可以通过计算图像的梯度,然后调整梯度较大的区域的亮度来实现。 5. **添加水印** 添加...

    android 粒子爆炸和气泡拖拽SplitDemo.rar

    在Android中,我们可以利用`BitmapShader`、`ColorMatrix`、` PorterDuff.Mode`等工具来应用各种滤镜。比如,灰度滤镜可以通过调整颜色矩阵实现,模糊滤镜则可能需要使用模糊算法处理图像,如高斯模糊。在...

    C#图像处理_控制图像的显示方式

    而`ColorMatrix`和`ImageAttributes`类则可以实现复杂的颜色变换,如亮度、对比度调整,甚至是色彩空间转换。 在`Image_Demo`项目中,开发者可能已经实现了一些示例,演示了如何加载图像、设置显示模式、旋转图像、...

    mfc绚丽多彩的透明窗体

    文件列表中的`Demo`可能是一个示例程序,展示了上述透明效果的实际应用;而`Src`可能包含了源代码,供学习和参考。在实际操作中,你可以根据这个源代码进行调试和学习,理解每个步骤的具体实现。 总之,通过结合MFC...

    计算机图形图像处理

    此外,C#还支持色彩处理,例如调整亮度、对比度、色调和饱和度,这些可以通过ColorMatrix类和ImageAttributes类实现。 接下来,“chap9.ppt”可能涵盖了更高级的图像处理技术,如滤波和图像分析。滤波通常用于去除...

    Android Image各种效果处理-IT计算机-毕业设计.zip

    2. **滤镜效果**:源码可能包含使用`ColorMatrix`或自定义Shader实现的各种滤镜效果,如灰度、饱和度调整、色调偏移等。这些效果通常通过修改像素颜色值实现,涉及到颜色空间转换,如RGB到HSV。 3. **图像转换**:...

    autoJS1688示例.zip

    ColorMatrix处理图片↘颜色矩阵.js ColorMatrix颜色矩阵的用法.js common(1).js common.js config.js DailyTask.js DensityUtil.js didi.js digit.js dou_yin_yang_hao(1).js dou_yin_yang_hao.js ...

Global site tag (gtag.js) - Google Analytics