美图秀秀滤镜之亮度调整

  图像的亮度, 指的是图像像素的强度, 黑色为最暗, 白色为最亮, 在ios中黑色用0来表示, 白色用1来表示.一个像素, 基本上是用RGB三个颜色分量来表示的. R(0-1), G(0-1),B(0-1).

  亮度调整有多种计算方法,效果并不完全相同,在颜色的表示方法中, HSL(L)表示法就是:色相(hue)、饱和度(saturation)、亮度(lightness),改变其中的L值就可以调整图象的亮度,但效果显得比较生硬。

PhotoShop和GPUImage中采用的就是另外一种方法就是把图象每个点颜色的RGB分量分别加上亮度调整值,这种效果相对比较柔和。下面是顶点着色器和片段着色器代码(这些代码运行于GPU中)。

  顶点着色

 attribute vec4 position; //输入顶点位置属性
 attribute vec4 inputTextureCoordinate;//输入纹理位置属性

 varying vec2 textureCoordinate;//输出给片段着色器的纹理位置

 void main()
 {
     gl_Position = position;//输出给片段着色器的顶点位置
     textureCoordinate = inputTextureCoordinate.xy;//告诉片段着色器,顶点着色器正在处理的像素点。
 }

  

  片段着色

 varying highp vec2 textureCoordinate;

 uniform sampler2D inputImageTexture;//输入的纹理图片。也就是我们要处理的图片
 uniform lowp float brightness;//亮度值,我们在程序中可以调整的。

 void main()
 {
     lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);//输入图片的纹理颜色

     gl_FragColor = vec4((textureColor.rgb + vec3(brightness)), textureColor.w);//像素着色颜色。将每个像素的RGB分量与亮度值相加,得到心的像素颜色。即算法实现
 }

在我的美图秀秀中,使用的是上述算法,而官方版不是

使用GPUImage的GPUImageBrightnessFilter来实现图像的亮度调整。

  具体应用

1.在GPUImageBrightnessFilter中首先初始化该滤镜

GPUImageBrightnessFilter *filter = [[GPUImageBrightnessFilter alloc] init];

2.设置亮度值。该亮度值通过滑动UISlider来改变

filter.brightness = value;

3.设置亮度调整范围为整张图像

[filter forceProcessingAtSize:image.size];

4.设置输入图像纹理

GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:image];
[pic addTarget:filter];

5.处理图像

[pic processImage];
    [filter useNextFrameForImageCapture];

6.获取处理后的图像

return [filter imageFromCurrentFramebuffer];
+ (UIImage *)changeValueForBrightnessFilter:(float)value image:(UIImage *)image;
{
    GPUImageBrightnessFilter *filter = [[GPUImageBrightnessFilter alloc] init];
    filter.brightness = value;
    [filter forceProcessingAtSize:image.size];
    GPUImagePicture *pic = [[GPUImagePicture alloc] initWithImage:image];
    [pic addTarget:filter];

    [pic processImage];
    [filter useNextFrameForImageCapture];
    return [filter imageFromCurrentFramebuffer];
}

附录

在GPUImageBrightnessFilter的init方法中,设置了默认的亮度为0

- (id)init;
{
    if (!(self = [super initWithFragmentShaderFromString:kGPUImageBrightnessFragmentShaderString]))
    {
        return nil;
    }

    brightnessUniform = [filterProgram uniformIndex:@"brightness"];
    self.brightness = 0.0;

    return self;
}

setBrightness方法调整图像的亮度值,_brightness为输入的亮度值,在顶点着色器中uniform float brightness与brightnessUniform = [filterProgram uniformIndex:@"brightness"]对应,必须名字相同

- (void)setBrightness:(CGFloat)newValue;
{
    _brightness = newValue;

    [self setFloat:_brightness forUniform:brightnessUniform program:filterProgram];
}

下面我们预览一下效果

    

时间: 2024-10-15 19:47:20

美图秀秀滤镜之亮度调整的相关文章

美图秀秀滤镜之对比度

对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,即指一幅图像灰度反差的大小. 在GPUImage中通过GPUImageContrastFilter来实现 片段着色器 varying highp vec2 textureCoordinate; uniform sampler2D inputImageTexture; uniform lowp float contrast; void main() { lowp vec4 textureColor = texture2D(in

美图秀秀滤镜之色温(白平衡)

色温色温是表示光源光谱质量最通用的指标. GPUImage中我们通过GPUImageWhiteBalanceFilter来实现 顶点着色 uniform sampler2D inputImageTexture; varying highp vec2 textureCoordinate; uniform lowp float temperature; uniform lowp float tint; const lowp vec3 warmFilter = vec3(0.93, 0.54, 0.0

美图秀秀-美化图片之【特效】界面设计

本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的. 界面包含黑边和虚化按钮,4种类型的滤镜,每种类型又包含许多具体滤镜效果,当我们点击时候开始处理图片 1.加载图片 self.imageView = [[UIImageView alloc] initWithImage:self.image]; self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 130); self.imageView.contentMod

iOS开发系列--打造自己的“美图秀秀”

http://www.cnblogs.com/kenshincui/p/3959951.html#overview --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 基本图形绘制 视图刷新 其他图形上下文 Core Image Quartz 2D 在iOS中常用的绘图框

美图秀秀团队新出的短视频应用「美拍」为何这么火?

这个世界有种畅销品叫作“美”它的载体通常是可视化的——图片和视频,美图这个团队从美图秀秀到美拍无不是抓住了这个需求,让人更容易生产更高质量的美.而且视频这种信息量更大的载体相对静止的图片更能让人产生“美”的体验,视频和图片不一样,不像instagram那样加个风格滤镜就能产生一个好的效果,而且要拍好一段视频远比照片要难的多,所以此前一些微视频软件简单的加个滤镜或一些水印并不能帮助用户比较简单的生产出有美感的视频.这点美拍做到了,你发现一段再无趣的视频套用模板后,音乐和剪切效果马上让视频脱胎换骨,

微信能修图!美图秀秀们惊恐之后该怎么做

众多移动应用中最能"抢戏"的,非微信莫属.微商的出现,抢了很多电商平台的销售份额:微信游戏的出现,让不少应用分发平台泪眼汪汪:公众号的出现让今日头条这样的资讯应用表示受伤的总是我:朋友圈的出现,连自家兄弟QQ空间都忍不下去了,支付宝都被逼出涉黄圈子来应对-- 可以说,微信每次的更新.添加的小动作啥的,都能激起"滔天骇浪",让整个移动圈颤三颤--毕竟数亿的用户基数不是是闹着玩的.近日,在最新版本中,微信增加了图片编辑功能.这对于以美图秀秀为代表的修图.P图.拍照应用来

打造自己的“美图秀秀”

概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz 2D绘制2D图形和Core Image中强大的滤镜功能. Quartz 2D 在iOS中常用的绘图框架就是Quartz 2D,Quartz 2D是Core Graphics框架的一部分,是一个强大的二维图像绘制引擎.Quartz 2D在UIKit中也有很好的封装和集成,我们日常开发时所用到的UIKit中的组件都是由Cor

Core Image 制作自己的美图秀秀

一.Core Image是和啥? 关于这个问题不太好回答,但其实又也很简单.肯定是苹果推出的关于图片处理的API.网上各路大神都有解释过,不过能看明白的不多,我的理解就是Photoshop的滤镜,当然在各种美图软件里都有这个功能,咱主要看怎么用吧 二.Core Image提供了哪些可用的滤镜呢? 127 values { [0] = "CIAccordionFoldTransition" [1] = "CIAdditionCompositing" [2] = &qu

简单的水印制作之美图秀秀

大家的博文或者QQ空间文章等,都喜欢印上自己的水印,以避免有心之人的盗图等问题的发生,但是部分朋友(包括我的老师老男孩 =.=)都直接使用画图工具简单的写了个名字或者域名上去,就算是水印了,老师呀--不是学生嫌弃你,咱可以再懒点不 =.= 其实单纯的一个水印制作非常的简单,使用Windows操作系统的朋友可以直接使用"美图秀秀"来制作水印. 1.下载安装美图秀秀. http://xiuxiu.dl.meitu.com/XiuXiu_360Setup_4.0.1.exe 2.打开美图秀秀