iOS開發之濾鏡的使用技巧（CoreImage）

一、濾鏡的內容和效果是比較多並且復雜的 ，學習濾鏡需要技巧 如下：

兩個輸出語句解決濾鏡的屬性選擇問題：

• 1.查詢效果分類中包含什么效果
  按住command 點擊CIFilter 進入接口文件 找到第128行-148行全部都是 效果分類
• 2.選擇其中某一個分類拷貝
  NSLog -> [CIFilter filterNamesInCategory:剛才拷貝的分類]; -> 打印出來的 是這個分類包含的所有效果 -> 拷貝選擇其中的某一個效果
• 3.查詢使用的效果中可以設置什么屬性（KVC） attributes
  NSLog -> [CIFilter filterWithName:剛才拷貝選擇其中的某一個效果].attributes ->得到這個濾鏡所有可以設置的屬性

  二、了解濾鏡的相關介紹

  介紹
  • 1.框架介紹
    （1）CoreImage
    （2）是一個圖像框架 它基於OpenGL頂層創建 底層則用着色器來處理圖像
    （3）它利用了GPU基於硬件加速來處理圖像
    （4）CoreImage中有很多濾鏡
    （5）它們能夠一次給予一張圖像或者視頻幀多種視覺效果 -> 濾鏡鏈
    （6）而且濾鏡可以連接起來組成一個濾鏡鏈 把濾鏡效果疊加起來處理圖像
• 2.類的介紹
  （1）CIImage：保存圖像數據的類 CGImageRef->圖像中的數據
  （2）.CIFilter：濾鏡類 圖片屬性進行細節處理的類 它對所有的像素進行操作 用鍵-值（KVC）來設置
  （3）.CIContext：上下文是實現對圖像處理的具體對象 -> 濾鏡對象輸出的圖像並不是合成之后的圖像 需要使用圖像處理的上下文合並處理的圖像
• 3.效果介紹
• 按效果分類：
  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

    三、使用步驟

    1.實例CIImage -> 先把UIImage -> CGImageRef -> CIImage
    2.創建CIFilter濾鏡並給濾鏡設置屬性（KVC）
    3.創建CIContext上下文
    4.初始化一個CGImageRef 輸出圖片對象 合並濾鏡輸出的圖像
    5.賦給UIImage對象進行顯示
    6.如果想使用濾鏡鏈 可以再次添加效果

    四、一個實例解析 濾鏡 濾鏡鏈 保存圖片

    代碼示例：

    #import "ViewController.h"//宏定義  屏幕的寬
    #define SCREEN_WIDTH CGRectGetWidth([UIScreen mainScreen].bounds)
    
    //注意掛上代理
    @interface ViewController ()    <UIImagePickerControllerDelegate,UINavigationControllerDelegate>
    {
    
        UIImageView *myImageView;//接收圖片的視圖
        UIButton *photoButton;//從本地相冊選擇圖片的按鈕
        UIButton *filterButton;//添加濾鏡的按鈕
        UIButton *saveButton;//濾鏡后保存到本地相冊的按鈕
    }
    @end
    @implementation ViewController
    - (void)viewDidLoad {
    [super viewDidLoad];
    //去除導航欄的高度
    
       self.edgesForExtendedLayout = UIRectEdgeNone;
    //設置背景色
    
       self.view.backgroundColor = [UIColor greenColor];
    // 創建按鈕
    
       NSArray *titleButtonList = @[@"photo",@"Filter",@"save"];
       for (int i=0; i<titleButtonList.count; i++) {
           UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(20+80*i, 20, 60, 40);
    [button setTitle:titleButtonList[i] forState:UIControlStateNormal];
    button.tag = 10 +i ;
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    button.backgroundColor = [UIColor cyanColor];
    [self.view addSubview:button];
           }
    
       //    初始化圖片視圖
           myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(20, 100, SCREEN_WIDTH-40, 300)];
           myImageView.backgroundColor = [UIColor cyanColor];
           [self.view addSubview:myImageView];
    
           photoButton = [self.view viewWithTag:10];
           filterButton = [self.view viewWithTag:11];
           saveButton = [self.view viewWithTag:12];
    
       //    給三個按鈕添加觸發事件
           [photoButton addTarget:self action:@selector(photoAction:) forControlEvents:UIControlEventTouchUpInside];
       //    濾鏡按鈕
           [filterButton addTarget:self action:@selector(filterAction:) forControlEvents:UIControlEventTouchUpInside];
       //保存濾鏡后圖片的按鈕
           [saveButton addTarget:self action:@selector(saveAction:) forControlEvents:UIControlEventTouchUpInside];
    
       }
       //選擇圖片
       - (void)photoAction:(UIButton *)sender{
           UIImagePickerController *pickerController = [[UIImagePickerController alloc]init];
           pickerController.delegate = self;
           [self presentViewController:pickerController animated:YES completion:nil];
       }
    
       //把圖片放在圖片視圖上
       - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
           UIImage *image = info[UIImagePickerControllerOriginalImage];
           myImageView.image = image;
           [self dismissViewControllerAnimated:YES completion:nil];
       }
    
       //濾鏡按鈕的觸發方法
       - (void)filterAction:(UIButton *)sender{
    
       //    1.源圖
           CIImage *inputImage = [CIImage imageWithCGImage:myImageView.image.CGImage];
       //    2.濾鏡
           CIFilter *filter = [CIFilter filterWithName:@"CIColorMonochrome"];
       //    NSLog(@"%@",[CIFilter filterNamesInCategory:kCICategoryColorEffect]);//注意此處兩個輸出語句的重要作用
            NSLog(@"%@",filter.attributes);
    
           [filter setValue:inputImage forKey:kCIInputImageKey];
    
           [filter setValue:[CIColor colorWithRed:1.000 green:0.165 blue:0.176 alpha:1.000] forKey:kCIInputColorKey];
           CIImage *outImage = filter.outputImage;
           [self addFilterLinkerWithImage:outImage];
    
       }
    
       //再次添加濾鏡  形成濾鏡鏈
       - (void)addFilterLinkerWithImage:(CIImage *)image{
    
           CIFilter *filter = [CIFilter filterWithName:@"CISepiaTone"];
           [filter setValue:image forKey:kCIInputImageKey];
           [filter setValue:@(0.5) forKey:kCIInputIntensityKey];
    
       //    在這里創建上下文  把濾鏡和圖片進行合並
           CIContext *context = [CIContext contextWithOptions:nil];
           CGImageRef resultImage = [context createCGImage:filter.outputImage fromRect:filter.outputImage.extent];
           myImageView.image = [UIImage imageWithCGImage:resultImage];
    
       }
    
       //保存濾鏡后的圖片到本地相冊
       - (void)saveAction:(UIButton *)sender{
           UIImageWriteToSavedPhotosAlbum(myImageView.image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);
       }
    
       //保存成功調用的方法
       - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{
           NSLog(@"保存成功");
       }
       @end

     

  • 2015年的蘋果WWDC大會給着迷於Core Image Filters的開發者帶來了一些好消息。（這次大會上）不僅有很多的濾鏡，例如由MetalPerformanceShaders支持的模糊濾鏡和卷積濾鏡，在性能上表現出一些驚人的提升，而且蘋果公司已經在iOS和OSX平台上都實現了相同性能的可用圖像濾鏡。
    

     

    這也給了iOS新的圖像濾鏡，以至於我都等不及把它加到我自己的Nodality應用里面了。這同時也也意味着代碼和功能可以在類和設備上分享，我已經在設想一個Nodality的桌面版本了。

    那么，這些新濾鏡是神馬玩意？ 這么說吧，CIFilter這個類里有類方法filterNamesInCategories()，用來返回一個包含所有可用濾鏡的數組。下面快速瀏覽一下iOS8和9之間的差異吧：

    • CIAreaAverage       - 返回一個單像素圖像，其中包含一塊顏色區內的平均顏色。

    • CIAreaMaximum       - 返回一個單像素圖像，其中包含一塊顏色區內最大的顏色成分。

    • CIAreaMaximumAlpha    - 返回一個單像素圖像，其中包含顏色區中最大透明度的顏色矢量。

    • CIAreaMinimum       - 返回一個單像素圖像，其中包含顏色區中最小顏色成分。

    • CIAreaMinimumAlpha    - 返回一個單像素圖像，其中包含顏色區內的最小透明度的顏色矢量。

    • CIBoxBlur          - 在一個矩形內使得圖像模糊化。

    • CICircularWrap       - 用一個透明的圓圈環繞圖像。

    • CICMYKHalftone       - 創建一個顏色，使得源圖像呈半色調，在白色頁面中使用使用青色，品紅色，黃色和墨色。

    • CIColumnAverage       - 返回一個高為1像素的圖像，包含每個掃描列的平均顏色。

    • CIComicEffect        - 像漫畫書一樣勾勒（圖像）邊緣，並應用半色調效果。

    • CIConvolution7X7      - 用一個7x7旋轉矩陣來調整像素值。

    • CICrystallize        - 通過匯集源像素的顏色值，創建多邊形色塊。

    • CIDepthOfField        - 模擬一個場景深入的效果。

    • CIDiscBlur          - 在一個圓盤形狀內模糊化圖像。

    • CIDisplacementDistortion  - 將第二圖像的灰度值應用到第一圖像。

    • CIDroste             - 用類似M.C.埃舍爾繪圖方式遞歸地繪制圖像的一部分。

    • CIEdges              - 用顏色顯示圖像的邊緣。

    • CIEdgeWork            - 產生一個黑白風格的類似木塊切口的圖像。

    • CIGlassLozenge         - 創建一個菱形濾鏡，並扭曲濾鏡位置的圖像。

    • CIHeightFieldFromMask     - 產生一個連續的三維物體，一個閣樓形的灰場。

    • CIHexagonalPixellate      - 用所替換的像素映射彩色六邊形的圖像。

    • CIKaleidoscope          - 從源圖像中通過將12路對稱，產生一個五顏六色的圖象。

    • CILenticularHaloGenerator   - 模擬閃光燈效果。

    • CILineOverlay           - 創建草圖，用黑色勾勒出圖像的邊緣。

    • CIMedianFilter           - 計算一組鄰近像素的平均數，然后用平均數替代每個像素的值。

    • CINoiseReduction          - 通過降低噪聲的限定值來降低噪音。

    • CIOpTile               - 先分割圖像，施加一些指定的縮放和旋轉，然后拼接圖像，形成的藝術化的表現。

    • CIPageCurlTransition       - 使用翻頁效果從一個圖像轉換到另一個圖像，翻卷后顯示新的圖像。

    • CIPageCurlWithShadowTransition  - 使用翻頁效果從一個圖像轉換到另一個圖像，翻卷后顯示新的圖像。

    • CIParallelogramTile         - 展示一個在平行四邊形內的圖像。

    • CIPassThroughColor

    • CIPassThroughGeom

    • CIPDF417BarcodeGenerator

    • CIPointillize              - 呈現一個pointillistic風格的源圖像。

    • CIRippleTransition          - 圖像創建一個圓形波從中心點向外擴大，在波形里顯示新圖像。

    • CIRowAverage              - 返回1個像素高的圖像，其中包含每行掃描的平均顏色。

    • CIShadedMaterial            - 從一個高度場產生一個陰影圖像。

    • CISpotColor               - 用色點替換顏色范圍。

    • CISpotLight               - 圖像使用一個方向聚光燈效果呈現。

    • CIStretchCrop              - 圖像通過拉伸和或裁剪以適合目標尺寸。

    • CISunbeamsGenerator          - 圖像呈現陽光照射的效果。

    • CITorusLensDistortion         - 創建環形濾鏡，並扭曲透鏡位置的圖像。

    • CITriangleTile             - 截取圖像的一個三角形部分映射到一個三角形區域，然后平鋪展示。