×

GPUImage详细解析(七)文字水印和动态图像水印

96
落影loyinglin 595a1b60 08f6 4beb 998f 2bf55e230555
2016.06.18 22:18* 字数 619

回顾

GPUImage源码解析、图片模糊、视频滤镜、视频水印都已经介绍过,这次带来的是给视频添加文字水印、动态图像水印

效果展示

“我是水印”的文字,还有心形气泡组成的水印。


处理中的动态图,上面是进度,下面是文字水印:“我是水印”,动态图像水印:心形气泡。

核心思路

  • 1、UIView上面有UILabel(文字水印)和UIImageView(图片水印),再通过GPUImageUIElement把UIView对象转换成纹理对象,进入响应链;
  • 2、视频文件的图像数据通过GPUImageMovie进入响应链;
  • 3、GPUImageDissolveBlenderFilter合并水印图像和视频,把数据传给响应链的终点GPUImageView以显示到UI和GPUImageMovieWriter以写入临时文件;
  • 4、视频文件的音频数据通过GPUImageMovie传给GPUImageMovieWriter以写入临时文件;
  • 5、最后临时文件通过ALAssetsLibrary写入系统库。


具体细节

1、GPUImageUIElement

GPUImageUIElement继承GPUImageOutput类,作为响应链的源头。通过CoreGraphics把UIView渲染到图像,并通过glTexImage2D绑定到outputFramebuffer指定的纹理,最后通知targets纹理就绪。

2、GPUImageOutput和GPUImageFilter

本次demo主要用到了frameProcessingCompletionBlock属性,当GPUImageFilter渲染完纹理后,会调用frameProcessingCompletionBlock回调。

3、响应链解析

  • 1、当GPUImageMovie的纹理就绪时,会通知GPUImageFilter处理图像;
  • 2、GPUImageFilter会调用frameProcessingCompletionBlock回调;
  • 3、GPUImageUIElement在回调中渲染图像,纹理就绪后通知
    GPUImageDissolveBlendFilter;
  • 4、frameProcessingCompletionBlock回调结束后,通知
    GPUImageDissolveBlendFilter纹理就绪;
  • 5、GPUImageDissolveBlendFilter收到两个纹理后开始渲染,纹理就绪后通知GPUImageMovieWriter;
    如图


总结

本篇的内容与上一篇视频水印有类似的地方。GPUImageUIElement是新的知识点,但是如果对CoreGraphics和OpenGL ES熟悉可以秒懂。

附上代码

思考题

思考1:响应链解析中的GPUImageFilter有什么作用?是否可以去掉?
思考2:frameProcessingCompletionBlock里面需要做什么样的操作?为什么?
思考3:能否对图像水印进行复杂的位置变换?

答案

思考1:目的是每帧回调;去掉会导致图像无法显示。
思考2:回调需要调用update操作;因为update只会输出一次纹理信息,只适用于一帧。
思考3:在回调中对UIView进行操作即可;或者使用GPUImageTransformFilter。

GPUImage
Web note ad 1