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

處理中的動(dòng)態(tài)圖,上面是進(jìn)度,下面是文字水?。骸拔沂撬 保瑒?dòng)態(tài)圖像水?。盒男螝馀?。

核心思路
- 1、UIView上面有UILabel(文字水?。┖蚒IImageView(圖片水印),再通過(guò)GPUImageUIElement把UIView對(duì)象轉(zhuǎn)換成紋理對(duì)象,進(jìn)入響應(yīng)鏈;
- 2、視頻文件的圖像數(shù)據(jù)通過(guò)GPUImageMovie進(jìn)入響應(yīng)鏈;
- 3、GPUImageDissolveBlenderFilter合并水印圖像和視頻,把數(shù)據(jù)傳給響應(yīng)鏈的終點(diǎn)GPUImageView以顯示到UI和GPUImageMovieWriter以寫(xiě)入臨時(shí)文件;
- 4、視頻文件的音頻數(shù)據(jù)通過(guò)GPUImageMovie傳給GPUImageMovieWriter以寫(xiě)入臨時(shí)文件;
- 5、最后臨時(shí)文件通過(guò)ALAssetsLibrary寫(xiě)入系統(tǒng)庫(kù)。

具體細(xì)節(jié)
1、GPUImageUIElement
GPUImageUIElement繼承GPUImageOutput類,作為響應(yīng)鏈的源頭。通過(guò)CoreGraphics把UIView渲染到圖像,并通過(guò)glTexImage2D綁定到outputFramebuffer指定的紋理,最后通知targets紋理就緒。
2、GPUImageOutput和GPUImageFilter
本次demo主要用到了frameProcessingCompletionBlock屬性,當(dāng)GPUImageFilter渲染完紋理后,會(huì)調(diào)用frameProcessingCompletionBlock回調(diào)。
3、響應(yīng)鏈解析
- 1、當(dāng)GPUImageMovie的紋理就緒時(shí),會(huì)通知GPUImageFilter處理圖像;
- 2、GPUImageFilter會(huì)調(diào)用frameProcessingCompletionBlock回調(diào);
- 3、GPUImageUIElement在回調(diào)中渲染圖像,紋理就緒后通知
GPUImageDissolveBlendFilter; - 4、frameProcessingCompletionBlock回調(diào)結(jié)束后,通知
GPUImageDissolveBlendFilter紋理就緒; - 5、GPUImageDissolveBlendFilter收到兩個(gè)紋理后開(kāi)始渲染,紋理就緒后通知GPUImageMovieWriter;
如圖

總結(jié)
本篇的內(nèi)容與上一篇視頻水印有類似的地方。GPUImageUIElement是新的知識(shí)點(diǎn),但是如果對(duì)CoreGraphics和OpenGL ES熟悉可以秒懂。
附上代碼
思考題
思考1:響應(yīng)鏈解析中的GPUImageFilter有什么作用?是否可以去掉?
思考2:frameProcessingCompletionBlock里面需要做什么樣的操作?為什么?
思考3:能否對(duì)圖像水印進(jìn)行復(fù)雜的位置變換?
答案
思考1:目的是每幀回調(diào);去掉會(huì)導(dǎo)致圖像無(wú)法顯示。
思考2:回調(diào)需要調(diào)用update操作;因?yàn)閡pdate只會(huì)輸出一次紋理信息,只適用于一幀。
思考3:在回調(diào)中對(duì)UIView進(jìn)行操作即可;或者使用GPUImageTransformFilter。