直播预览层添加滤镜效果(CIFilter使用场景)

2017-01-06 本文已影响2114人袁峥

直播预览层添加滤镜效果

原理，在显示之前，提前对图片进行滤镜处理，把处理后的图片展示出来就好了.
CIFiter(滤镜类)：给图片添加特殊效果（模糊，高亮等等）.
CIFiter滤镜分类(一个滤镜可能属于多个分类)
- kCICategoryDistortionEffect 扭曲效果，比如bump、旋转、hole
- kCICategoryGeometryAdjustment 几何开着调整，比如仿射变换、平切、透视转换
- kCICategoryCompositeOperation 合并，比如源覆盖（source over）、最小化、源在顶（source atop）、色彩混合模式
- kCICategoryHalftoneEffect Halftone效果，比如screen、line screen、hatched
- kCICategoryColorAdjustment 色彩调整，比如伽马调整、白点调整、曝光
- kCICategoryColorEffect 色彩效果，比如色调调整、posterize
- kCICategoryTransition 图像间转换，比如dissolve、disintegrate with mask、swipe
- kCICategoryTileEffect 瓦片效果，比如parallelogram、triangle
- kCICategoryGenerator 图像生成器，比如stripes、constant color、checkerboard
- kCICategoryGradient 渐变，比如轴向渐变、仿射渐变、高斯渐变
- kCICategoryStylize 风格化，比如像素化、水晶化
- kCICategorySharpen 锐化、发光
- kCICategoryBlur 模糊，比如高斯模糊、焦点模糊、运动模糊
- kCICategoryStillImage 能用于静态图像
- kCICategoryVideo 能用于视频
- kCICategoryInterlaced 能用于交错图像
- kCICategoryNonSquarePixels 能用于非矩形像素
- kCICategoryHighDynamicRange 能用于HDR
- kCICategoryBuiltIn 获取所有滤镜

常用图片处理滤镜：


// 怀旧 --> CIPhotoEffectInstant                         单色 --> CIPhotoEffectMono
// 黑白 --> CIPhotoEffectNoir                            褪色 --> CIPhotoEffectFade
// 色调 --> CIPhotoEffectTonal                           冲印 --> CIPhotoEffectProcess
// 岁月 --> CIPhotoEffectTransfer                        铬黄 --> CIPhotoEffectChrome

自动处理滤镜,通过CIImage获取,CIImage会自动对图片进行滤镜处理

    CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
        
    // 转换为CIImage
    CIImage *ciImage = [CIImage imageWithCVImageBuffer:imageBuffer];
        
        
    NSArray *fiters = [ciImage autoAdjustmentFilters];
        
    NSLog(@"%@",fiters);

常有的自动滤镜

    CIRedEyeCorrection：修复因相机的闪光灯导致的各种红眼
    CIFaceBalance：调整肤色
    CIVibrance：在不影响肤色的情况下，改善图像的饱和度
    CIToneCurve：改善图像的对比度
    CIHighlightShadowAdjust：改善阴影细节

滤镜对象创建(也可以使用coreImage自动处理滤镜，就不需要自己创建)
滤镜属性可以通过inputKeys属性获取
滤镜工作原理，给滤镜传入一个图片，滤镜有个方法，可以获取处理完成的图片outputImage.

        CIFilter *fiter = [CIFilter filterWithName:@"CIPhotoEffectInstant"];
        
        [fiter setValue:ciImage forKey:@"inputImage"];
        
        ciImage = fiter.outputImage;

直播预览层添加滤镜效果步骤

取出捕获到的帧(CMSampleBufferRef) -> 获取帧里面图片信息(CVImageBufferRef) -> CIFiter滤镜处理 ->转换成UIImage -> 设置为UIImageView的image就能实时显示捕获的画面

if (_videoConnection == connection) {
        // 获取图片信息
        CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
        
        // 转换为CIImage
        CIImage *ciImage = [CIImage imageWithCVImageBuffer:imageBuffer];
        
        // 创建滤镜
        CIFilter *fiter = [CIFilter filterWithName:@"CIFaceBalance"];
        
        [fiter setValue:ciImage forKey:@"inputImage"];
        [fiter setValue:@100 forKey:@"inputStrength"];
        ciImage = fiter.outputImage;
        
        // 转换UIImage
        UIImage *image = [UIImage imageWithCIImage:ciImage];
        
        dispatch_sync(dispatch_get_main_queue(), ^{
            
            self.imageView.image = image;
            
        });
    }

通过GPU渲染图片显示

只有OpenGL才能操控GPU,需要用到OpenGL才行
CIContext:通过这个上下文的方法渲染图片(createCGImage)
CIContext:通过OpenGL的上下文创建，就能用GPU渲染图片，处理图片效率高.(contextWithEAGLContext)

  // 获取图片信息
            CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
            
            // 转换为CIImage
            CIImage *ciImage = [CIImage imageWithCVImageBuffer:imageBuffer];
            
            // 创建滤镜
            CIFilter *fiter = [CIFilter filterWithName:@"CIPhotoEffectInstant"];
            
            [fiter setValue:ciImage forKey:@"inputImage"];
            
            ciImage = fiter.outputImage;
            
            EAGLContext *openglCtx = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
            CIContext *ctx = [CIContext contextWithEAGLContext:openglCtx];
            
            CGImageRef imgRef = [ctx createCGImage:ciImage fromRect:ciImage.extent];
            
            UIImage *image = [UIImage imageWithCGImage:imgRef];
        
            // 用完了及时清空,否则内存溢出，造成程序崩溃.使用C语言的时候，需要特别注意内存管理.
            CGImageRelease(imgRef);
        
            // 转换UIImage
            
            dispatch_sync(dispatch_get_main_queue(), ^{
                
                self.imageView.image = image;
                
                
            });

注意点：有个地方需要自己管理内存，否则程序会闪退，报下列错误

内存溢出bug.png

CGImageRef imgRef = [ctx createCGImage:ciImage fromRect:ciImage.extent];
            
UIImage *image = [UIImage imageWithCGImage:imgRef];
        
// 用完了及时清空,否则内存溢出，造成程序崩溃.使用C语言的时候，需要特别注意内存管理.
CGImageRelease(imgRef);

注意点:会报坏内存访问，原因有些对象销毁了，没有及时清空，再次用到就坏内存访问
测试：不需要添加滤镜效果，容易测试出来，报下列错误

坏内存访问.png

解决：把一个周期的代码，放入一个自动释放池里管理，下一个运行循环，会自动清空已经销毁的对象。
自动释放池：可以用来管理一段代码中对象的生命周期。

 @autoreleasepool {
            // 获取图片信息
            CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
            
            // 转换为CIImage
            CIImage *ciImage = [CIImage imageWithCVImageBuffer:imageBuffer];
            
            // 创建滤镜
            CIFilter *fiter = [CIFilter filterWithName:@"CIPhotoEffectInstant"];
            
            [fiter setValue:ciImage forKey:@"inputImage"];
            
            ciImage = fiter.outputImage;
        
            EAGLContext *openglCtx = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
            CIContext *ctx = [CIContext contextWithEAGLContext:openglCtx];
            
            CGImageRef imgRef = [ctx createCGImage:ciImage fromRect:ciImage.extent];
            
            UIImage *image = [UIImage imageWithCGImage:imgRef];
        
            // 用完了及时清空,否则内存溢出，造成程序崩溃.使用C语言的时候，需要特别注意内存管理.
            CGImageRelease(imgRef);
        
            // 转换UIImage
            
            dispatch_sync(dispatch_get_main_queue(), ^{
                
                self.imageView.image = image;
                
            });

        }
        
    }

直播预览层添加滤镜效果(CIFilter使用场景)

直播预览层添加滤镜效果

直播预览层添加滤镜效果步骤

通过GPU渲染图片显示

猜你喜欢

热点阅读