CoreImage Tips

前言

在这篇文章中积累CoreImage的相关知识，这篇文章会非常的长。我从18年的5月份开始琢磨无他相机及其它美颜相机的相关图像处理技术，断断续续的了解了一些，又忘记了一些，为了防止再次遗忘，还是决定记录下来。图像处理有很多种方式，比如直接对原始位图(Raw Bitmap)计算，使用Core Grahpics、使用GPUImage等，最终，我选择了CoreImage，这个框架在视频图像上有更加优越的性能表现，这是我决定仔细学习它的关键。

正文

从简单的图层混合模式说起

将A图片叠加到B图片上，并将A进行灰度处理，且尺寸自定。

对这样的需求，使用CoreImage的代码，实现方式如下:

UIImage *im = [UIImage imageNamed:@"0"];
    UIImage *d = [UIImage imageNamed:@"1"];
    CIImage *cibImage = [CIImage imageWithCGImage:d.CGImage];
    
    
    UIGraphicsBeginImageContext(d.size);
    [im drawInRect:CGRectMake(0, 0, 240, 180)];
    UIImage *imd = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    CIImage *ciaImage = [CIImage imageWithCGImage:imd.CGImage];
    CIFilter *garyFilter = [CIFilter filterWithName:@"CIColorControls"];
    [garyFilter setValue:@0 forKey:@"inputSaturation"];
    [garyFilter setValue:ciaImage forKey:@"inputImage"];
    CIImage *outputImage = garyFilter.outputImage;
    
//    CIFilter *alpheF = [CIFilter filterWithName:@"CIColorMatrix"];
//    [CIVector vectorWithX:0 Y:0 Z:0.5 W:0];
    
    
    CIFilter *blendFilter = [CIFilter filterWithName:@"CISourceAtopCompositing"];
    [blendFilter setValue:outputImage forKey:@"inputImage"];
    [blendFilter setValue:cibImage forKey:@"inputBackgroundImage"];
    
    CIImage *cic = blendFilter.outputImage;
    
    // 6. Render your output image
    CIContext * context = [CIContext contextWithOptions:nil];
    CGImageRef outputCGImage = [context createCGImage:cic fromRect:[cic extent]];
    UIImage * outputImg = [UIImage imageWithCGImage:outputCGImage];
    CGImageRelease(outputCGImage);
    
    
    UIImage *image = [UIImage imageWithCIImage:cic];

叠加效果如下

image.png

如果A的灰度图片需要添加一定的透明度，那代码实现如下

//    CGFloat weights[] = {
//        0, 0, 0.5, 0,
//        0, 0, 0.5, 0,
//        0, 0, 0.5, 0,
//        0, 0, 0.5, 0
//    };
// 对灰度图片做透明度处理
    CIFilter *alpheF = [CIFilter filterWithName:@"CIColorMatrix"];
//    CIVector *alpheV = [CIVector vectorWithValues:weights count:9];
    CIVector *alpheV = [CIVector vectorWithX:0 Y:0 Z:0.5 W:0];
    [alpheF setValue:alpheV forKey:@"inputAVector"];
    [alpheF setValue:outputImage forKey:@"inputImage"];
    CIImage *alpheImage = alpheF.outputImage;

效果如下

image.png

CIVector是什么？

举个例子：

// 渐变图片
    // set up the parameters for the filter
    CIVector *centerVector = [CIVector vectorWithX:150 Y:150];
    CIColor *color0 = [CIColor colorWithRed:0 green:0.5 blue:1.0 alpha:1.0];
    CIColor *color1 = [CIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.0];
    NSNumber *radius = [NSNumber numberWithFloat:100.0];

    // create a CIImage and apply the filter
    CIImage *theCIImage = [[CIImage alloc] init];
    theCIImage = [CIFilter filterWithName:@"CIGaussianGradient" keysAndValues:@"inputCenter", centerVector, @"inputColor0", color0, @"inputColor1", color1, @"inputRadius", radius, nil].outputImage;

    // crop the image using CICrop
    CGRect rect = CGRectMake(0.0, 0.0, 600.0, 600.0);
    theCIImage = [CIFilter filterWithName:@"CICrop" keysAndValues:kCIInputImageKey, theCIImage, @"inputRectangle", rect, nil].outputImage;
    
    
    UIImage *image = [UIImage imageWithCIImage:theCIImage];

这种方式可以创建一个渐变图片
效果如下：

image.png

再举个圆角的例子代码如下：

    UIImage *im = [UIImage imageNamed:@"0"];
    CIImage *a8 = [CIImage imageWithCGImage:[UIImage   imageNamed:@"8"].CGImage];
    CIFilter *col = [CIFilter filterWithName:@"CIConstantColorGenerator"];
    CIColor *cicor = [[CIColor alloc] initWithColor:[UIColor clearColor]];
    [col setValue:cicor forKey:@"inputColor"];
    CIImage *colorImage = col.outputImage;
    CIFilter *gard = [CIFilter filterWithName:@"CIRadialGradient"];
// CIVector 
    CIVector *center = [CIVector vectorWithX:im.size.width / 2.0 Y:im.size.height / 2.0];
    [gard setValue:center forKey:@"inputCenter"];
    [gard setValue:@85 forKey:@"inputRadius0"];
    [gard setValue:@100 forKey:@"inputRadius1"];
    CIImage *gardImage = gard.outputImage;
    
    CIFilter *blend = [CIFilter filterWithName:@"CIBlendWithMask"];
    [blend setValue:a8 forKey:@"inputImage"];
    [blend setValue:colorImage forKey:@"inputBackgroundImage"];
    [blend setValue:gardImage forKey:@"inputMaskImage"];
    CGImageRef cgImg = [[CIContext contextWithOptions:nil] createCGImage:blend.outputImage fromRect:a8.extent];
    UIImage *image = [UIImage imageWithCGImage:cgImg];

效果:

原图

image.png

处理后

image.png

这里有一篇CoreImage介绍

给视频添加水印

- (CIImage *)imageWithLogo:(UIImage *)originalImage {
    // 叠加商标
    CIImage *result = [CIImage imageWithCGImage:originalImage.CGImage];
    UIImage *logoImage = [UIImage imageNamed:@"ai_video_logo"];
    // CGAffineTransformMakeTranslation用来调整相对屏幕的位置
    CGFloat h = logoImage.size.height / 667.f * originalImage.size.height;
    CGFloat y = 32.f / 667.f * originalImage.size.height;
    CIImage *logoCi = [[CIImage imageWithCGImage:logoImage.CGImage] imageByApplyingTransform:CGAffineTransformMakeTranslation(36, originalImage.size.height - y - h)];
    CIFilter *logoF = [CIFilter filterWithName:@"CISourceOverCompositing"];
    [logoF setValue:logoCi forKey:@"inputImage"];
    [logoF setValue:result forKey:@"inputBackgroundImage"];
    result = [logoF.outputImage imageByCroppingToRect:result.extent];
    return result;
}