GPUImage 学习四（高斯模糊、凹凸镜、嘻哈镜、Lookup

作者: 古子林 | 来源:发表于2018-01-20 11:16 被阅读977次

本篇主要是展现几种滤镜效果，实现起来都很简单，不做过多说明，需要注意的是一些参数的设置，这里参数说明都直接注释在代码中，不再单独备注了。

本篇内容：
1，3种高斯模糊效果；
2，凹凸镜效果；
3，嘻哈镜；
4，旋涡；
5，玻璃球（鱼眼）效果。
6，LookupFilter自定义滤镜效果

界面效果：

UI布局.png
我这里是底部创建了一个 UICollectionView 用来切换不同的滤镜效果。

我创建了一个系统的菊花，用来提示图片处理过程，在处理完成后的 frameProcessingCompletionBlock 回调中关闭菊花。frameProcessingCompletionBlock 是在 GPUImageOutput 对象中声明的属性，因此所有的滤镜效果处理完成都会走这个回调。

高斯模糊（图片全部模糊）

高斯模糊.png

// 整体图片模糊
- (void)gaussianBlurFilter{
    
    GPUImageGaussianBlurFilter *gaussianBlurFilter = [[GPUImageGaussianBlurFilter alloc] init];
    gaussianBlurFilter.blurRadiusInPixels = 10;     // 像素的模糊半径，用来控制模糊程度，例如设为 10 ，则会以当前像素点为中心，取周围边长为10像素的矩形范围内所以点的平均值，作为处理后的像素值。
    
    [_picture addTarget:gaussianBlurFilter];
    [gaussianBlurFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [gaussianBlurFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

高斯模糊（指定区域模糊）

高斯模糊（指定范围）.png

// 指定模糊区域（模糊区域的宽高、中心坐标、半径）
- (void)gaussianBlurPositionFilter{
    
    GPUImageGaussianBlurPositionFilter *gaussianBlurPositionFilter = [[GPUImageGaussianBlurPositionFilter alloc] init];
    gaussianBlurPositionFilter.blurSize = 0.6;      // 模糊区域大小，取值 0 到 1，默认是1
    gaussianBlurPositionFilter.blurRadius = 0.3;    // 模糊半径，默认是1
    gaussianBlurPositionFilter.blurCenter = CGPointMake(0.4, 0.6);  // 模糊区域的中心坐标，默认（0.5，0.5）
    
    [_picture addTarget:gaussianBlurPositionFilter];
    [gaussianBlurPositionFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [gaussianBlurPositionFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

高斯模糊（除指定区域外的所有区域模糊）

高斯模糊（指定范围外）.png

需要注意清晰范围的宽高比设置，系统是怎么处理的

宽度会保持 excludeCircleRadius 的值，高度为 excludeCircleRadius / aspectRatio

// 指定区域以外的部分模糊，可设置区域的宽高比，比 GPUImageGaussianBlurPositionFilter 更灵活
- (void)gaussianSelectiveBlurFilter{
    
    GPUImageGaussianSelectiveBlurFilter *gaussianSelectiveBlurFilter = [[GPUImageGaussianSelectiveBlurFilter alloc] init];
    gaussianSelectiveBlurFilter.excludeBlurSize = 0.5;      // 清晰区域的大小
    gaussianSelectiveBlurFilter.blurRadiusInPixels = 30;    // 清晰区域外的模糊程度，同 GPUImageGaussianBlurFilter
    gaussianSelectiveBlurFilter.excludeCirclePoint = CGPointMake(0.5, 0.5);     // 清晰区域的中心坐标
    gaussianSelectiveBlurFilter.excludeCircleRadius = 0.5;  // 清晰区域的半径
    gaussianSelectiveBlurFilter.aspectRatio = 3;          // 清晰区域的宽高比，宽度会保持 excludeCircleRadius 的值，高度为 excludeCircleRadius / aspectRatio
    
    [_picture addTarget:gaussianSelectiveBlurFilter];
    [gaussianSelectiveBlurFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [gaussianSelectiveBlurFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

凹面镜效果

凹面镜.png

// 凹面镜效果
- (void)pinchDistortionFilter{
    
    GPUImagePinchDistortionFilter *pinchDistortionFilter = [[GPUImagePinchDistortionFilter alloc] init];
    pinchDistortionFilter.scale = 1.0;  // 变形程度，范围 -2 到 2，默认0.5
    pinchDistortionFilter.center = CGPointMake(0.4, 0.3);   // 凹面区域的中心
    pinchDistortionFilter.radius = 0.5;         // 凹面的半径，取值 0 到 2.0，默认是 1.0
    
    [_picture addTarget:pinchDistortionFilter];
    [pinchDistortionFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [pinchDistortionFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

凸面镜效果

凸面镜.png

// 凸面镜效果
- (void)bulgeDistortionFilter{
    
    GPUImageBulgeDistortionFilter *bulgeDistortionFilter = [[GPUImageBulgeDistortionFilter alloc] init];
    bulgeDistortionFilter.scale = 0.9;      // 范围 -1 到 1，默认0.5
    bulgeDistortionFilter.center = CGPointMake(0.4, 0.3);   // 凸面区域的中心
    bulgeDistortionFilter.radius = 0.3;     // 凸面的半径，取值 0 到 1.0，默认是 0.25
    
    [_picture addTarget:bulgeDistortionFilter];
    [bulgeDistortionFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [bulgeDistortionFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

嘻哈镜效果

嘻哈.png

这里用风景图看的效果不是太明显，换成人物图片或者图片中景物差异比较大的图效果会比较明显。

// 嘻哈镜效果
- (void)stretchDistortionFilter{
    
    GPUImageStretchDistortionFilter *stretchDistortionFilter = [[GPUImageStretchDistortionFilter alloc] init];
    stretchDistortionFilter.center = CGPointMake(0.5, 0.5);     // 中心坐标，默认（0.5，0.5）
    
    [_picture addTarget:stretchDistortionFilter];
    [stretchDistortionFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [stretchDistortionFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

旋涡

旋涡.png

// 旋涡效果
- (void)swirlFilter{
    
    GPUImageSwirlFilter *swirlFilter = [[GPUImageSwirlFilter alloc] init];
    swirlFilter.center = CGPointMake(0.5, 0.5);     // 旋涡中心坐标，默认（0.5，0.5）
    swirlFilter.radius = 0.4;   // 旋涡半径，取值 0 到 1，默认 0.5
    swirlFilter.angle = -2;      // 水纹效果，正负代表水纹的扭曲方向，（官方解释最小值为0，默认值为1，此解释有误，真实情况是正负代表不同方向，绝对值越大，扭曲越厉害，0是不扭曲的）
    
    [_picture addTarget:swirlFilter];
    [swirlFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [swirlFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

玻璃球（鱼眼）效果

鱼眼.png

// 玻璃球效果
- (void)glassSphereFilter{
    
    GPUImageGlassSphereFilter *glassSphereFilter = [[GPUImageGlassSphereFilter alloc] init];
    
    [_picture addTarget:glassSphereFilter];
    [glassSphereFilter addTarget:_imageView];
    
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [glassSphereFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];
}

补充一个利用Lookup Table自定义滤镜效果的实现方式

LookupFilter自定义滤镜效果

LookupFilter.png

实现代码

    // Lookup Table 的图片名称
    NSString *imageName = [NSString stringWithFormat:@"%@.png",_cellTitles[indexPath.row]];
    GPUImagePicture *lookupImageSource = [[GPUImagePicture alloc] initWithImage:[UIImage imageNamed:imageName]];
    GPUImageLookupFilter *lookupFilter = [[GPUImageLookupFilter alloc] init];
    [_picture addTarget:lookupFilter];
    [lookupImageSource addTarget:lookupFilter];
    [lookupFilter addTarget:_imageView];
    
    [_picture processImage];
    [lookupImageSource processImage];
    __weak UIActivityIndicatorView *weakIndicator = _indicatorView;
    [lookupFilter setFrameProcessingCompletionBlock:^(GPUImageOutput *output, CMTime time) {
        dispatch_sync(dispatch_get_main_queue(), ^{
            [weakIndicator stopAnimating];
        });
    }];

GPUImage 库自带的有几张 Lookup Table图片，可以用来测试效果，我也让美工给我做了几张效果，这里就不上传了，下面给大家提供一些我破解其他APP资源包获取到的Lookup Table图片链接

http://ustickers.faceu.mobi/faceu/beaufilter/assets/clean_20170807.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/origin_20170824.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/sweety_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/kisskiss_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/nature_20170824.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/musi_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/chulian_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/yangqi_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/jugeng_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/jiari_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/tianmei_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/yuanqi_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/xiaosenlin_20170928_2.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/xinxian_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/meiwei_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/bingqilin_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/makalong_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/sunset_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/grass_20170621.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/lolita_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/pink_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/glossy_20170928.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/vivid_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/fresh_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/urban_20170520.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/coral_20170620.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/crisp_20170520.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/beach_20170520.png
http://ustickers.faceu.mobi/faceu/beaufilter/assets/vintage_20170520.png

GPUImage 学习四（高斯模糊、凹凸镜、嘻哈镜、Lookup

高斯模糊（图片全部模糊）

高斯模糊（指定区域模糊）

高斯模糊（除指定区域外的所有区域模糊）

凹面镜效果

凸面镜效果

嘻哈镜效果

旋涡

玻璃球（鱼眼）效果

补充一个利用Lookup Table自定义滤镜效果的实现方式

LookupFilter自定义滤镜效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

666