直播预览层添加滤镜效果

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

  • 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. markdown小小白常用语法

    第一次用vscode写笔记去同步Cnblog,不知道写啥就记点常用的md语法吧 1. 标题怎么写? 利用"#" + " " 即可实现第几节标题(其中'/',表转 ...

  2. core-js版本过低,需要更新但是更新失败的原因

    ore-js@2.6.12: core-js@.3 is no longer maintained and not recommended for usage due to the number of ...

  3. linux 查看进程的bin文件所在路径

    1.获取进程pid ps aux |grep nginx|grep master|grep -v grep|awk '{print $2}' 2.根据进程pid 获取 bin路径 方法a pwdx p ...

  4. golang 判断文件或文件夹是否存在

    //判断文件是否存在 存在返回 true 不存在返回false func checkFileIsExist(filename string) bool { var exist = true if _, ...

  5. Mysql 通用分页

    第一步,建立数据库: create table student( id int primary key auto_increment, code varchar(50), name varchar(5 ...

  6. Hook框架之Frida

    Frida是一款轻量级HOOK框架,可用于多平台上,例如android.windows.ios等.    frida分为两部分,服务端运行在目标机上,通过注入进程的方式来实现劫持应用函数,另一部分运行 ...

  7. python之常用方法(精)

    查找列表中出现最频繁的元素 使用 max() 函数可以快速查找出一个列表中出现频率最高的某个元素. >>> a = [1, 2, 3, 4, 3, 4, 5, 4, 4, 2] &g ...

  8. 基于Docker搭建PHP开发环境

    Docker 是这几年非常火的一项技术,作为一名软件开发人员,应该及时的接触和掌握. 镜像加速: 可以在阿里云上免费的获取,然后进行配置即可使用.阿里云 Docker 加速器,没有阿里云账号注册一个即 ...

  9. 攻防世界:web习题之disabled_button

    攻防世界:web习题之disabled_button 题目内容 https://adworld.xctf.org.cn/challenges/list 打开网页会发现有一个无法点击的按钮 思路 查看该 ...

  10. 20号CSS学习

    前面部分笔记丢失(呜呜有机会补) 一.盒子模型 1.4表格的细线边框 border-collapse: collapse;表示相邻边框合并在一起. 1.5边框会影响盒子的实际大小 测量时不测边框. 1 ...