直播预览层添加滤镜效果

  • 原理,在显示之前,提前对图片进行滤镜处理,把处理后的图片展示出来就好了.

  • 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; });
  • 注意点:有个地方需要自己管理内存,否则程序会闪退,报下列错误
CGImageRef imgRef = [ctx createCGImage:ciImage fromRect:ciImage.extent];

UIImage *image = [UIImage imageWithCGImage:imgRef];

// 用完了及时清空,否则内存溢出,造成程序崩溃.使用C语言的时候,需要特别注意内存管理.
CGImageRelease(imgRef);
  • 注意点:会报坏内存访问,原因有些对象销毁了,没有及时清空,再次用到就坏内存访问
  • 测试:不需要添加滤镜效果,容易测试出来,报下列错误
 

  • 解决:把一个周期的代码,放入一个自动释放池里管理,下一个运行循环,会自动清空已经销毁的对象。
  • 自动释放池:可以用来管理一段代码中对象的生命周期。
 @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使用场景)的更多相关文章

  1. (转)ASP.NET MVC 第五个预览版和表单提交场景

    转自:http://ourlife.blog.51cto.com/708821/296171 上个星期四,ASP.NET MVC开发团队发布了ASP.NET MVC框架的“第五个预览版”.你可以在这里 ...

  2. 一文带你玩转对象存储COS文档预览

    随着"互联网+"的发展,各行各业纷纷"去纸化",商务合同.会议纪要.组织公文.商品图片.培训视频.学习课件.随堂讲义等电子文档无处不在.而要查看文档一般需要先下 ...

  3. MUI - 图片预览(perviewimage)的优化

    主要对mui图片全屏预览插件做了以下三点补充 1.添加了预览图片文字说明,使用的时候需要添加以下css及DOM属性 .mui-slider-img-content { position: absolu ...

  4. java原装代码完成pdf在线预览和pdf打印及下载

    这是我在工作中,遇到这样需求,完成需求后,总结的成果,就当做是工作笔记,以免日后忘记,当然,能帮助到别人是最好的啦! 下面进入正题: 前提准备: 1. 项目中至少需要引入的jar包,注意版本: a)  ...

  5. jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

    上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其 ...

  6. 微信开发中使用微信JSSDK和使用URL.createObjectURL上传预览图片的不同处理对比

    在做微信公众号或者企业微信开发业务应用的时候,我们常常会涉及到图片预览.上传等的处理,往往业务需求不止一张图片,因此相对来说,需要考虑的全面一些,用户还需要对图片进行预览和相应的处理,在开始的时候我使 ...

  7. 使用input选择本地图片,并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  8. .NET 8新预览版本使用 Blazor 组件进行服务器端呈现

    简介 此预览版添加了对使用 Blazor 组件进行服务器端呈现的初始支持.这是 Blazor 统一工作的开始,旨在使 Blazor 组件能够满足客户端和服务器端的所有 Web UI 需求.这是该功能的 ...

  9. 解决Android界面布局添加EditText组件后界面无法预览

    错误报告: Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V Exception details are ...

  10. 【android学习3】解决Android界面布局添加EditView之后无法预览问题

    在设计登陆界面时,拖入一个EditView之后发现界面无法预览 问题分析: 进入xml源文件里发现一个警告,提示添加inputType或者hint元素,添加后界面仍然无法预览... 仔细查看了当前使用 ...

随机推荐

  1. 《使用Gin框架构建分布式应用》阅读笔记:p393-p437

    <用Gin框架构建分布式应用>学习第17天,p393-p437总结,总45页. 一.技术总结 1.Prometheus Prometheus放在代码里面使用,还是第一次见.在本人实际的工作 ...

  2. Flink window

    窗口计算 我们经常需要在一个时间窗口维度上对数据进行聚合,窗口是流处理应用中经常需要解决的问题.Flink的窗口算子为我们提供了方便易用的API,我们可以将数据流切分成一个个窗口,对窗口内的数据进行处 ...

  3. 14.Kubernetes核心技术Helm

    Kubernetes核心技术Helm Helm就是一个包管理工具[类似于npm] 为什么引入Helm 首先在原来项目中都是基于yaml文件来进行部署发布的,而目前项目大部分微服务化或者模块化,会分成很 ...

  4. 什么是静态方法?@staticmethod装饰器怎么用?

    填坑(@staticmethod装饰器----静态方法声明) > 在学习的时候看到很多人都在用@Staticmethod这个装饰器来修饰类方法,这就让我好奇了这个独特的装饰器到底是个啥?咋就受到 ...

  5. 关于switch的优化:转移表(完结)

    用转移表来代替功能实现中的 switch 语句 1. switch 语句应用场景 在许多场景中会用到条件判断,此时简单的条件判断一般通过 if/else 语句实现:如果涉及三条以上的功能分支一般会通过 ...

  6. golang操作ini文件包之go-ini

    官网:ini.unknwon.io/docs github:https://github.com/go-ini/ini ini 是 Windows 上常用的配置文件格式.MySQL 的 Windows ...

  7. rabbitmq-c与amqp扩展安装

    最近需要使用RabbitMQ进行消息队列处理 1.安装rabbitmq-c 在安装amqp之前需要先安装rabbitmq-c扩展 rabbitmq-c下载网址:https://github.com/a ...

  8. Windows之子系统WSL

    [安装] 安装参考:https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4---download-the-linux-k ...

  9. 解决GitHub无法访问问题

    作为开发者,经常使用借助GitHub进行开发,但是最近一直无法访问github.com站点,决定搞一下!!! 由于国内某些原因,导致我们有时候不能访问到 www.github.com.此时我们必须找到 ...

  10. 集成Nacos

    版本统一:Spring Boot 2.6.11,Spring Cloud 2021.0.4,Spring Cloud Alibaba 2021.0.4.0: Maven 仓库记得配置中央仓库,私服上有 ...