2014-09-17 5 views
3

У меня есть движущееся фоновое изображение, и я хочу размыть его нижнюю часть. I будет делать это только с фотошопом, но поскольку изображение перемещается, оно не будет работать очень хорошо.Gaussian Blur Over Image - iOS 8

Вот что я имею в виду (взгляд на нижней части изображения):

http://i.imgur.com/OT3vpeQ.png

Так в основном, как эффект док имеет на iPhone. Я использую iOS 8, но не Swift.

ответ

6

Я сделал небольшой пример, основанный на фотографии, которую вы там видите. Мой алгоритм выглядит следующим образом:

  • Извлечь часть изображения снизу.
  • Применить гауссовский фильтр к нему и размыть его.
  • Затем создайте новый контекст изображения, нарисуйте на нем исходное изображение.
  • Затем нарисуйте размытую часть изображения, чтобы поместить его точно по исходному изображению.
  • Извлечь новое изображение из контекста.

Вот исходный код для этого,

@implementation ViewController 


- (void)viewDidLoad{ 

    [super viewDidLoad]; 
    UIImageView *imageView = [[UIImageView alloc] init]; 
    imageView.frame = self.view.bounds; 
    [self.view addSubview:imageView]; 
    imageView.contentMode = UIViewContentModeScaleAspectFit; 
    UIImage *image = [UIImage imageNamed:@"monogram.jpg"]; 
    imageView.image = [self imageWithBlurredImageWithImage: image andBlurInsetFromBottom: 200 withBlurRadius:3]; 
} 

- (UIImage*)imageWithBlurredImageWithImage:(UIImage*)image andBlurInsetFromBottom:(CGFloat)bottom withBlurRadius:(CGFloat)blurRadius{ 
    UIGraphicsBeginImageContext(image.size); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextScaleCTM(context, 1, -1); 
    CGContextTranslateCTM(context, 0, -image.size.height); 
    CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage); 
    CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, bottom), [self blurImage: image withBottomInset: bottom blurRadius: blurRadius].CGImage); 
    image = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return image; 
} 

- (UIImage*)blurImage:(UIImage*)image withBottomInset:(CGFloat)inset blurRadius:(CGFloat)radius{ 

    image = [UIImage imageWithCGImage: CGImageCreateWithImageInRect(image.CGImage, CGRectMake(0, image.size.height - inset, image.size.width,inset))]; 

    CIImage *ciImage = [CIImage imageWithCGImage:image.CGImage]; 
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"]; 
    [filter setValue:ciImage forKey:kCIInputImageKey]; 
    [filter setValue:@(radius) forKey:kCIInputRadiusKey]; 

    CIImage *outputCIImage = filter.outputImage; 
    CIContext *context = [CIContext contextWithOptions:nil]; 

    return [UIImage imageWithCGImage: [context createCGImage:outputCIImage fromRect:ciImage.extent]]; 

} 
@end 

А вот скриншот результата.

enter image description here

+4

Почему бы просто не использовать IOS 8 UIVisualEffectView? –

+2

Как Джесси предлагает проверить: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIVisualEffectView/index.html#//apple_ref/occ/instp/UIVisualEffectView/effect – Scott

+4

Ну, я знаю, что, но вы могли бы управлять радиусом размытия с помощью UIVisualEffectView. – Sandeep