版本記錄

版本號	時間
V1.0	2017.06.26

前言

在app中，類似頭條的視頻播放，在播放列表里面，會有背景是處理成模糊效果的，這中效果給人很新奇的感覺。這一篇，就仿照實現頭條的模糊效果。感興趣的可以看看我寫的其他小技巧
1. 實用小技巧（一）：UIScrollView中上下左右滾動方向的判斷

 2. 實用小技巧（二）：屏幕橫豎屏的判斷和相關邏輯
 3.實用小技巧（三）：點擊手勢屏蔽子視圖的響應
 4.實用小技巧（四）：動態的增刪標簽視圖
 5.實用小技巧（五）：通過相冊或者相機更改圖標
 6.實用小技巧（六）：打印ios里所有字體
 7. 實用小技巧（七）：UITableViewCell自適應行高的計算
 8. 實用小技巧（八）：數字余額顯示的分隔

實現目標

類似頭條的視頻，會有很多模糊的效果，我截了兩張圖，大約就是這個效果。

實例1

示例2

大家可以看見熊貓和吾六一兩邊的都是模糊的效果。下面我就實現一個這種效果。

實現過程

下面還是直接看代碼，寫一個UIImageView的分類。

#import <Foundation/Foundation.h>

@interface UIImageView (ZBUntil)

- (void)sd_setGaussFuzzyImageWithURL:(nullable NSURL *)url placeholderImage:(nullable UIImage *)placeholder;

@end

#import "UIImageView+ZBUntil.h"

@implementation UIImageView (ZBUntil)

- (void)sd_setGaussFuzzyImageWithURL:(nullable NSURL *)url placeholderImage:(nullable UIImage *)placeholder 
{  
    self.contentMode = UIViewContentModeScaleToFill;
    
    NSArray *subViewsArr = self.subviews;
    [subViewsArr enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (obj.tag == 100) {
            [obj removeFromSuperview];
        }
    }];
    
    UIImageView *gaosiView = [[UIImageView alloc] init];
    gaosiView.tag = 100;
    gaosiView.contentMode = UIViewContentModeScaleAspectFit;
    [self addSubview:gaosiView];
    [gaosiView mas_remakeConstraints:^(MASConstraintMaker *make) {
        make.left.right.top.bottom.mas_equalTo(self);
    }];
    gaosiView.image = [UIImage boxblurImage:placeholder withBlurNumber:0.5f];
    [self sd_setImageWithURL:url placeholderImage:placeholder options:0 progress:nil completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {
        if (image) {
            self.image = [UIImage boxblurImage:image withBlurNumber:0.5f];
            gaosiView.image = image;
        }
    }];
}

@end

+  (UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blu;

+(UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur
{
    if (!image) {
        return nil;
    }
    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;
}

這里有幾句代碼我一開始的時候并沒有加。

    NSArray *subViewsArr = self.subviews;
    [subViewsArr enumerateObjectsUsingBlock:^(UIView *obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if (obj.tag == 100) {
            [obj removeFromSuperview];
        }
    }];

但是，如果不加，就會發現有些對象釋放不掉，運行出來的視圖查看層次也是很多疊在一起的。效果如下：