GPUImage詳細解析(七)文字水印和動態(tài)圖像水印

回顧

GPUImage源碼解析、圖片模糊、視頻濾鏡、視頻水印都已經(jīng)介紹過,這次帶來的是給視頻添加文字水印、動態(tài)圖像水印。

效果展示

“我是水印”的文字,還有心形氣泡組成的水印。


處理中的動態(tài)圖,上面是進度,下面是文字水?。骸拔沂撬 ?,動態(tài)圖像水?。盒男螝馀?。

核心思路

  • 1、UIView上面有UILabel(文字水印)和UIImageView(圖片水?。?,再通過GPUImageUIElement把UIView對象轉換成紋理對象,進入響應鏈;
  • 2、視頻文件的圖像數(shù)據(jù)通過GPUImageMovie進入響應鏈;
  • 3、GPUImageDissolveBlenderFilter合并水印圖像和視頻,把數(shù)據(jù)傳給響應鏈的終點GPUImageView以顯示到UI和GPUImageMovieWriter以寫入臨時文件;
  • 4、視頻文件的音頻數(shù)據(jù)通過GPUImageMovie傳給GPUImageMovieWriter以寫入臨時文件;
  • 5、最后臨時文件通過ALAssetsLibrary寫入系統(tǒng)庫。


具體細節(jié)

1、GPUImageUIElement

GPUImageUIElement繼承GPUImageOutput類,作為響應鏈的源頭。通過CoreGraphics把UIView渲染到圖像,并通過glTexImage2D綁定到outputFramebuffer指定的紋理,最后通知targets紋理就緒。

2、GPUImageOutput和GPUImageFilter

本次demo主要用到了frameProcessingCompletionBlock屬性,當GPUImageFilter渲染完紋理后,會調(diào)用frameProcessingCompletionBlock回調(diào)。

3、響應鏈解析

  • 1、當GPUImageMovie的紋理就緒時,會通知GPUImageFilter處理圖像;
  • 2、GPUImageFilter會調(diào)用frameProcessingCompletionBlock回調(diào);
  • 3、GPUImageUIElement在回調(diào)中渲染圖像,紋理就緒后通知
    GPUImageDissolveBlendFilter;
  • 4、frameProcessingCompletionBlock回調(diào)結束后,通知
    GPUImageDissolveBlendFilter紋理就緒;
  • 5、GPUImageDissolveBlendFilter收到兩個紋理后開始渲染,紋理就緒后通知GPUImageMovieWriter;
    如圖


總結

本篇的內(nèi)容與上一篇視頻水印有類似的地方。GPUImageUIElement是新的知識點,但是如果對CoreGraphics和OpenGL ES熟悉可以秒懂。

附上代碼

思考題

思考1:響應鏈解析中的GPUImageFilter有什么作用?是否可以去掉?
思考2:frameProcessingCompletionBlock里面需要做什么樣的操作?為什么?
思考3:能否對圖像水印進行復雜的位置變換?

答案

思考1:目的是每幀回調(diào);去掉會導致圖像無法顯示。
思考2:回調(diào)需要調(diào)用update操作;因為update只會輸出一次紋理信息,只適用于一幀。
思考3:在回調(diào)中對UIView進行操作即可;或者使用GPUImageTransformFilter。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容