滤镜是否会蒙蔽你的双眼?

简介: 滤镜是否会蒙蔽你的双眼?

API & Property


/// 初始化
- (instancetype)kj_initWithOriImage:(UIImage *)image ExtendParameterBlock:(void(^_Nullable)(KJRenderImageView *obj))paramblock;
/// 修改效果
- (void)kj_changeRenderInfo:(KJRenderInfo *)info;
@interface KJRenderInfo : NSObject
@property(nonatomic,assign)KJRenderFilterType type; /// 滤镜
@property(nonatomic,assign)float opacity;/// 透明度,默认 1
@property(nonatomic,assign)float extend;/// 扩展
@property(nonatomic,strong)UIColor *color;/// 颜色滤镜
@property(nonatomic,assign)KJRenderCoreImageFilterType coreType;/// CoreImage 滤镜
@end

1.png


简单介绍思路


KJRenderInfo滤镜模型数据


目前有四种滤镜

typedef NS_OPTIONS(NSInteger, KJRenderFilterType) {
    KJRenderFilterTypeOriginal,  /// 原片
    KJRenderFilterTypeColor,     /// 颜色滤镜
    KJRenderFilterTypeSketch,    /// 素描滤镜
    KJRenderFilterTypeCoreImage, /// CoreImage 自带滤镜
};


1.KJRenderFilterTypeColor 颜色滤镜


这种滤镜的主要实现方式其实就是给图片加个颜色滤镜,就不做多余赘述

/// 颜色滤镜
- (UIImage *)kj_colorRenderInfo:(KJRenderInfo *)info{
    UIGraphicsBeginImageContext(self.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self.originImage drawInRect:self.bounds];
    CGContextSetFillColorWithColor(context, [info.color colorWithAlphaComponent:info.extend].CGColor);
    CGContextSetBlendMode(context, kCGBlendModeNormal);
    CGContextFillRect(context, self.bounds);
    CGImageRef imageRef = CGBitmapContextCreateImage(context);
    UIImage *newImage = [UIImage imageWithCGImage:imageRef];
    UIGraphicsEndImageContext();
    CGImageRelease(imageRef);
    return newImage;
}


2.KJRenderFilterTypeSketch 素描滤镜


其实核心还是CoreImage的滤镜使用,先去色CIPhotoEffectMono,然后拷贝反色CIColorInvert,再高斯模糊CIGaussianBlur,最后混合叠加到去色图片CIColorDodgeBlendMode

/// 素描滤镜
- (void)kj_sketchRenderInfo:(KJRenderInfo *)info{
    _weakself;
    kGCD_QUEUE_ASYNC(^{
        /// 去色
        CIImage * inputImage = [[CIImage alloc] initWithImage:weakself.originImage];
        CIFilter * monoFilter = [CIFilter filterWithName:@"CIPhotoEffectMono"];
        [monoFilter setValue:inputImage forKey:kCIInputImageKey];
        CIImage * outImage = [monoFilter outputImage];
        /// 拷贝反色
        CIImage * invertImage = [outImage copy];
        CIFilter * invertFilter = [CIFilter filterWithName:@"CIColorInvert"];
        [invertFilter setValue:invertImage forKey:kCIInputImageKey];
        invertImage = [invertFilter outputImage];
        /// 高斯模糊
        CIFilter * blurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
        [blurFilter setDefaults];
        [blurFilter setValue:@(info.extend*100) forKey:kCIInputRadiusKey];
        [blurFilter setValue:invertImage forKey:kCIInputImageKey];
        invertImage = [blurFilter valueForKey:kCIOutputImageKey];
        /// 混合叠加到去色图片
        CIFilter * blendFilter = [CIFilter filterWithName:@"CIColorDodgeBlendMode"];
        [blendFilter setValue:invertImage forKey:kCIInputImageKey];
        [blendFilter setValue:outImage forKey:kCIInputBackgroundImageKey];
        CIImage * sketchImage = [blendFilter outputImage];
        /// 渲染图片
        CGImageRef cgImage = [weakself.ciContext createCGImage:sketchImage fromRect:[inputImage extent]];
        kGCD_MAIN_ASYNC(^{
            weakself.image = [UIImage imageWithCGImage:cgImage];
            CGImageRelease(cgImage);
        });
    });
}


3.KJRenderFilterTypeCoreImage


CoreImage 滤镜,褐色滤镜,颜色反转

/// CoreImage 滤镜
typedef NS_OPTIONS(NSInteger, KJRenderCoreImageFilterType) {
    KJRenderCoreImageFilterTypeSepia = 0,  /// 褐色滤镜(怀旧)
    KJRenderCoreImageFilterTypeColorInvert,/// 颜色反转
};
static NSString * const _Nonnull KJRenderCoreImageFilterTypeStringMap[] = {
    [KJRenderCoreImageFilterTypeSepia]       = @"CISepiaTone",
    [KJRenderCoreImageFilterTypeColorInvert] = @"CIColorInvert",
};
static NSString * const _Nonnull KJRenderCoreImageFilterTypeKeyStringMap[] = {
    [KJRenderCoreImageFilterTypeSepia]       = @"inputIntensity",
    [KJRenderCoreImageFilterTypeColorInvert] = @"",
};
/// coreImage 滤镜
- (void)kj_coreImageRenderInfo:(KJRenderInfo *)info{
    _weakself;
    dispatch_queue_t globel = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0);
    dispatch_async(globel, ^{
        CIFilter *filter = [CIFilter filterWithName:KJRenderCoreImageFilterTypeStringMap[info.coreType]];
        [filter setDefaults];
        [filter setValue:[[CIImage alloc] initWithImage:weakself.originImage] forKey:kCIInputImageKey];
        NSString *string = KJRenderCoreImageFilterTypeKeyStringMap[info.coreType];
        if (![string isEqualToString:@""]) [filter setValue:@(info.extend) forKey:string];
        CIImage *outputImage  = [filter outputImage];
        CGImageRef filterimge = [weakself.ciContext createCGImage:outputImage fromRect:outputImage.extent];
        dispatch_queue_t main = dispatch_get_main_queue();
        dispatch_async(main, ^{
            weakself.image = [UIImage imageWithCGImage:filterimge];
            CGImageRelease(filterimge);
        });
    });
}


使用示例


- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    _weakself;
    CGFloat sp = kAutoW(10);
    CGFloat w = (kScreenW-sp*3)/2;
    CGFloat h = w;
    CGFloat maxY = 64.;
    UIImage *image  = kGetImage(@"IMG_4931");
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(sp, maxY+sp, w, h)];
    imageView.contentMode = UIViewContentModeScaleAspectFit;
    imageView.backgroundColor = [UIColor.orangeColor colorWithAlphaComponent:0.1];
    imageView.image = image;
    [self.view addSubview:imageView];
    __block NSArray <KJRenderInfo*>*renderTemps = @[({
        KJRenderInfo *info = [KJRenderInfo new];
        info.type = KJRenderFilterTypeOriginal;
        info.opacity = 1.;
        info;
    }),({
        KJRenderInfo *info = [KJRenderInfo new];
        info.type = KJRenderFilterTypeCoreImage;
        info.coreType = KJRenderCoreImageFilterTypeSepia;
        info.extend = .8;
        info.opacity = 1.;
        info;
    }),({
        KJRenderInfo *info = [KJRenderInfo new];
        info.type = KJRenderFilterTypeSketch;
        info.extend = .8;
        info.opacity = 1.;
        info;
    }),({
        KJRenderInfo *info = [KJRenderInfo new];
        info.type = KJRenderFilterTypeColor;
        info.extend = .8;
        info.color = [UIColor.greenColor colorWithAlphaComponent:0.1];
        info;
    })];
    KJRenderImageView *view = ({
        KJRenderImageView *renderImageView = [[KJRenderImageView alloc] kj_initWithOriImage:image ExtendParameterBlock:^(KJRenderImageView * _Nonnull obj) {
            obj.kAddView(weakself.view).kFrame(CGRectMake(sp+imageView.maxX, imageView.top, w, h));
        }];
        renderImageView.backgroundColor = [UIColor.orangeColor colorWithAlphaComponent:0.1];
        [renderImageView kj_changeRenderInfo:renderTemps[1]];
        renderImageView;
    });
    KJRenderImageView *view2 = ({
        KJRenderImageView *renderImageView = [[KJRenderImageView alloc] kj_initWithOriImage:image ExtendParameterBlock:^(KJRenderImageView * _Nonnull obj) {
            obj.kAddView(weakself.view).kFrame(CGRectMake(sp, view.bottom+sp, w, h));
        }];
        renderImageView.backgroundColor = [UIColor.orangeColor colorWithAlphaComponent:0.1];
        [renderImageView kj_changeRenderInfo:renderTemps[2]];
        renderImageView;
    });
    KJRenderImageView *view3 = ({
        KJRenderImageView *renderImageView = [[KJRenderImageView alloc] kj_initWithOriImage:image ExtendParameterBlock:^(KJRenderImageView * _Nonnull obj) {
            obj.kAddView(weakself.view).kFrame(CGRectMake(sp+view2.maxX, view.bottom+sp, w, h));
        }];
        renderImageView.backgroundColor = [UIColor.orangeColor colorWithAlphaComponent:0.1];
        [renderImageView kj_changeRenderInfo:renderTemps[3]];
        renderImageView;
    });
}

备注:本文用到的部分函数方法和Demo,均来自三方库KJCategories


滤镜介绍就到此完毕,后面有相关再补充

相关文章
|
C++ 计算机视觉
OpenCV-人像—酷感冷艳滤镜
OpenCV-人像—酷感冷艳滤镜
OpenCV-怀旧色滤镜
OpenCV-怀旧色滤镜
Photoshop利用滤镜给照片加上四射的光芒
Photoshop利用滤镜给照片加上四射的光芒
77 0
Photoshop极坐标滤镜巧绘三维游泳圈
Photoshop极坐标滤镜巧绘三维游泳圈
83 0
|
前端开发 数据可视化
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
93 0
【视觉基础篇】13 # 如何给简单的图案添加纹理和复杂滤镜?
|
并行计算 iOS开发 MacOS
Metal每日分享,连环画滤镜和油画滤镜效果
Metal每日分享,连环画滤镜和油画滤镜效果
Metal每日分享,连环画滤镜和油画滤镜效果
|
并行计算 iOS开发 MacOS
Metal每日分享,纯色图片滤镜效果
Metal每日分享,纯色图片滤镜效果
Metal每日分享,纯色图片滤镜效果
【图片操作】给图片添加滤镜
现在我们都喜欢给图片添加滤镜,现在很多相机也自带了许多滤镜。我们可以在拍照的时候选择需要的滤镜。但是有时候我们需要给大量图片添加同样的滤镜,这个时候手动添加就非常麻烦了。为了方便,我们可以使用程序来帮我们完成添加滤镜的操作。
269 0
|
存储 前端开发 数据可视化
有意思!强大的 SVG 滤镜
有意思!强大的 SVG 滤镜
283 0
有意思!强大的 SVG 滤镜
|
iOS开发 计算机视觉
使用GPUImage实现视频滤镜
GPUImage是一个著名的图像处理开源库,可以实现图像的输入、处理、输出等。这篇文章先总结了一下GPUImage的工作原理,然后将接入app时的一些注意事项分享给大家。
13544 0