iOS圖片毛玻璃效果

效果圖

1.png

Demo下載地址:VisualDemo,覺得不錯還請給個star

前言

日常處理毛玻璃效果, 主要的用到就是這幾種方式
1.iOS5.0之后就出現了Core Image的API。Core Image的API被放在CoreImage.framework庫中。在iOS和OS X平臺上，Core Image都提供了大量的濾鏡（Filter），這也是Core Image庫中比較核心的東西之一。按照官方文檔記載，在OS X上有120多種Filter，而在iOS上也有90多種。
2.第三方框架GPUImage
3.iOS 7之前UIToolbar
4.iOS 8之后蘋果新增加的一個類UIVisualEffectView
5.vImage也是蘋果推出的一個庫在Accelerate.framework框架中

下面就依次講述這幾種方式的實現

Core Image實現方式代碼如下:

- (UIImage *)coreBlurImage:(UIImage *)image withBlurNumber:(CGFloat)blur{
    //獲取繪制上下文
    CIContext *context = [CIContext contextWithOptions:nil];
    //獲取CIImage
    CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage];
    //創建濾鏡對象 CIGaussianBlur:高斯模糊
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    //改變模糊效果值
    [filter setValue:@10.0f forKey:@"inputRadius"];
    //模糊圖片渲染并輸出CIImage
    CIImage *result = [filter valueForKey:kCIOutputImageKey];
    CGImageRef outImage = [context createCGImage:result fromRect:[result extent]];
    UIImage *blurImage = [UIImage imageWithCGImage:outImage];
    CGImageRelease(outImage);
    return blurImage;
}

CIGaussianBlur即是常用的高斯濾鏡, Filter都是按字符串的名字去創建的, 詳情見官方文檔除了這里提到的多種Filter之外，Core Image還提供了CIDetector等類，可以支持人臉識別等，在OS X上Core Image也做了更多支持。

GPUImage

GPUImageGaussianBlurFilter * blurFilter = [[GPUImageGaussianBlurFilter alloc] init];
blurFilter.blurRadiusInPixels = 2.0;
UIImage * image = [UIImage imageNamed:@"xxx"];
UIImage *blurredImage = [blurFilter imageByFilteringImage:image];

代碼上比使用Core Image的情況簡單得多

上面2種都是比較耗性能的, 慎用

UIToolbar 簡單易懂，但是效果單一，系統提供的樣式也就UIBarStyleDefault和UIBarStyleBlack兩種

   UIImageView *imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    imageView.image = [UIImage imageNamed:@"image"];
    imageView.contentMode = UIViewContentModeScaleAspectFill;
    imageView.layer.masksToBounds = YES;
    [self.view addSubview:imageView];
    
    /** UIBarStyle 毛玻璃的樣式(枚舉)
     *      UIBarStyleDefault          = 0,     // 淺色
     *      UIBarStyleBlack            = 1,     // 深色
     *      UIBarStyleBlackOpaque      = 1,     // Deprecated. Use UIBarStyleBlack
     *      UIBarStyleBlackTranslucent = 2,     // Deprecated. Use UIBarStyleBlack and set the translucent property to YES
     */
    UIToolbar * toolbar = [[UIToolbar alloc] initWithFrame:imageView.bounds];
    toolbar.barStyle = UIBarStyleBlack;
    toolbar.alpha = 0.9;
    [imageView addSubview:toolbar];

UIVisualEffectView : 比UIToolbar強大一點, 主要用到了這個類

  • UIVisualEffect : 繼承自UIView，可以看成是專門用于處理毛玻璃效果的視圖。使用UIVisuaEffectView有一點需要特別注意，不要在UIVisuaEffectView實例化View上面直接添加subViews，應該將需要添加的子視圖添加到其contentView上。同時，盡量避免將UIVisualEffectView對象的alpha值設置為小于1.0的值，因為創建半透明的視圖會導致系統在離屏渲染時去對UIVisualEffectView對象及所有的相關的子視圖做混合操作,比較消耗性能。
  • UIBlurEffect : 使用該效果，會使得UIVisualEffectView下面的內容出現毛玻璃化
  • UIVibrancyEffect : 生動效果, 該效果能夠放大和調整放在UIVisualEffectView對象下面的內容的顏色
  • UIVisualEffect：一個視覺效果抽象類，繼承自NSObject，是UIBlurEffect和UIVibrancyEffect的父類

UIBlurEffect

    _imageView = [[UIImageView alloc] initWithFrame:self.view.bounds];
    _imageView.image = [UIImage imageNamed:@"image"];
    _imageView.contentMode = UIViewContentModeScaleAspectFill;
    _imageView.layer.masksToBounds = YES;
    [self.view addSubview:_imageView];
    /**  UIBlurEffect 毛玻璃的樣式(枚舉)
     * UIBlurEffectStyleExtraLight, // 極度白
     * UIBlurEffectStyleLight,      // 淺色
     * UIBlurEffectStyleDark        // 深色
     */
    
    UIBlurEffect * effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:effect];
    effectView.frame = CGRectMake(0, 100, self.view.bounds.size.width, 200);
    [_imageView addSubview:effectView];

UIVibrancyEffect

    UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    UIVibrancyEffect * vibrancy = [UIVibrancyEffect effectForBlurEffect:blurEffect];
    UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:vibrancy];
    UIView *redView = [[UIView alloc]init];
    redView.backgroundColor = [UIColor blueColor];
    [effectView.contentView addSubview:redView];
    effectView.frame = CGRectMake(0, 310,375, 300);
    redView.frame = effectView.bounds;
    [self.view addSubview:effectView];

效果圖:

3.png

運用UIBlurEffect是可逆的，我們可以去掉蒙層，顯示圖片

 [effectView removeFromSuperview];

vImage是Accelerate.framework框架中的這個framework主要是用來做數字信號處理、圖像處理相關的向量、矩陣運算的庫。首先導入#import <Accelerate/Accelerate.h>我們可以認為我們的圖像都是由向量或者矩陣數據構成的，Accelerate里既然提供了高效的數學運算API，自然就能方便我們對圖像做各種各樣的處理。模糊算法就是用到了vImageBoxConvolve_ARGB8888這個函數:

- (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (blur < 0.f || blur > 1.f) {
        blur = 0.5f;
    }
    
    int boxSize = (int)(blur * 40);
    boxSize = boxSize - (boxSize % 2) + 1;
    CGImageRef img = image.CGImage;
    vImage_Buffer inBuffer, outBuffer;
    vImage_Error error;
    void *pixelBuffer;
    
    //從CGImage中獲取數據
    CGDataProviderRef inProvider = CGImageGetDataProvider(img);
    CFDataRef inBitmapData = CGDataProviderCopyData(inProvider);
    
    //設置從CGImage獲取對象的屬性
    inBuffer.width = CGImageGetWidth(img);
    inBuffer.height = CGImageGetHeight(img);
    inBuffer.rowBytes = CGImageGetBytesPerRow(img);
    inBuffer.data = (void*)CFDataGetBytePtr(inBitmapData);
    pixelBuffer = malloc(CGImageGetBytesPerRow(img) * CGImageGetHeight(img));
    if(pixelBuffer == NULL)
        NSLog(@"No pixelbuffer");
    outBuffer.data = pixelBuffer;
    outBuffer.width = CGImageGetWidth(img);
    outBuffer.height = CGImageGetHeight(img);
    outBuffer.rowBytes = CGImageGetBytesPerRow(img);
    error = vImageBoxConvolve_ARGB8888(&inBuffer, &outBuffer, NULL, 0, 0, boxSize, boxSize, NULL, kvImageEdgeExtend);
    if(error){
        NSLog(@"error from convolution %ld", error);
    }
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef ctx = CGBitmapContextCreate( outBuffer.data, outBuffer.width, outBuffer.height, 8, outBuffer.rowBytes, colorSpace, kCGImageAlphaNoneSkipLast);
    CGImageRef imageRef = CGBitmapContextCreateImage(ctx);
    UIImage *returnImage = [UIImage imageWithCGImage:imageRef];
    
    //clean up CGContextRelease(ctx)
    CGColorSpaceRelease(colorSpace);
    free(pixelBuffer);
    CFRelease(inBitmapData);
    CGColorSpaceRelease(colorSpace);
    CGImageRelease(imageRef);
    return returnImage;
}

總結:

以上就是幾種常用的毛玻璃處理方式, 寫的不好還請小伙伴們見諒!

參考文獻:

iOS-毛玻璃效果詳解
iOS 開發之模糊效果的五種實現

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4贊 61
  • iOS開發中有的時候需要將圖片設置模糊，來實現特定的效果獲取更好的用戶體驗, iOS7之后半透明模糊效果得到大范圍...
    零距離仰望星空閱讀 46,622評論 47贊 223
  • 昨天去體育館游泳，二百米過后，精疲力盡，在下一個五十米的盡頭，右腳突然就被拉住，一瞬間整個身體都沉下去了，當時就懵...
    只會蛙泳的企鵝閱讀 174評論 0贊 0
  • 認為的總是離開 或許再也遇不見你這樣的 蔚藍的天空 也只是你留下的云彩 會遇見的 是友情還是錯過的愛情 時光的這局...
    正捌閱讀 224評論 6贊 12
  • 有時候，突然收到不常聯系的人發來的信息說系統檢測，感謝你沒有把我刪除了，突然覺得你這么提醒我我倒是想刪除了。
    日音中又見察xx閱讀 603評論 0贊 0