如何添加图像下载等模糊效果

Posted 2023-03-11

【中文标题】如何添加图像下载等模糊效果

【英文标题】：How to add blur effect like image downloading

【发布时间】：2017-05-16 07:17:26

【问题描述】：

我正在制作一个聊天应用程序，并希望添加类似于 whatsapp 的图像下载的模糊效果，因为我也尝试了 UIVisualEffectView 但没有达到类似的效果，还尝试降低 UIVisualEffectView 的 alpha 但没有达到附近达到这个效果。谁能告诉我该怎么做。提前致谢。

我尝试使用 UIVisual effectView 但无法达到相同的效果

【问题讨论】：

我不熟悉 whasApp，图像最初是否开始模糊，或者一旦用户尝试从消息中下载图像，图像是否会出现？

***.com/questions/17041669/…

@Mukul 你想要的是使用隔行扫描图像吗？这是一篇很好的文章来解释它blog.codinghorror.com/progressive-image-rendering，如果你能实现它，你可能需要一些第三方控制或你自己的编码。

尝试使用this 或this

【参考方案1】：

您可以使用任何第三方库，例如https://github.com/nicklockwood/FXBlurView

使用它创建模糊图像并将其添加到特定事件的单元格中。

或者您可以使用 Apple 提供的以下方法：

// This method is taken from Apple's UIImageEffects category provided in WWDC 2013 sample code

- (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage

    // Check pre-conditions.
    if (self.size.width < 1 || self.size.height < 1) 
        NSLog (@"*** error: invalid size: (%.2f x %.2f). Both dimensions must be >= 1: %@", self.size.width, self.size.height, self);
        return nil;
    
    if (!self.CGImage) 
        NSLog (@"*** error: image must be backed by a CGImage: %@", self);
        return nil;
    
    if (maskImage && !maskImage.CGImage) 
        NSLog (@"*** error: maskImage must be backed by a CGImage: %@", maskImage);
        return nil;
    

    CGRect imageRect =  CGPointZero, self.size ;
    UIImage *effectImage = self;

    BOOL hasBlur = blurRadius > __FLT_EPSILON__;
    BOOL hasSaturationChange = fabs(saturationDeltaFactor - 1.) > __FLT_EPSILON__;
    if (hasBlur || hasSaturationChange) 
        UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
        CGContextRef effectInContext = UIGraphicsGetCurrentContext();
        CGContextScaleCTM(effectInContext, 1.0, -1.0);
        CGContextTranslateCTM(effectInContext, 0, -self.size.height);
        CGContextDrawImage(effectInContext, imageRect, self.CGImage);

        vImage_Buffer effectInBuffer;
        effectInBuffer.data     = CGBitmapContextGetData(effectInContext);
        effectInBuffer.width    = CGBitmapContextGetWidth(effectInContext);
        effectInBuffer.height   = CGBitmapContextGetHeight(effectInContext);
        effectInBuffer.rowBytes = CGBitmapContextGetBytesPerRow(effectInContext);

        UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
        CGContextRef effectOutContext = UIGraphicsGetCurrentContext();
        vImage_Buffer effectOutBuffer;
        effectOutBuffer.data     = CGBitmapContextGetData(effectOutContext);
        effectOutBuffer.width    = CGBitmapContextGetWidth(effectOutContext);
        effectOutBuffer.height   = CGBitmapContextGetHeight(effectOutContext);
        effectOutBuffer.rowBytes = CGBitmapContextGetBytesPerRow(effectOutContext);

        if (hasBlur) 
            // A description of how to compute the box kernel width from the Gaussian
            // radius (aka standard deviation) appears in the SVG spec:
            // http://www.w3.org/TR/SVG/filters.html#feGaussianBlurElement
            //
            // For larger values of 's' (s >= 2.0), an approximation can be used: Three
            // successive box-blurs build a piece-wise quadratic convolution kernel, which
            // approximates the Gaussian kernel to within roughly 3%.
            //
            // let d = floor(s * 3*sqrt(2*pi)/4 + 0.5)
            //
            // ... if d is odd, use three box-blurs of size 'd', centered on the output pixel.
            //
            CGFloat inputRadius = blurRadius * [[UIScreen mainScreen] scale];
            NSUInteger radius = floor(inputRadius * 3. * sqrt(2 * M_PI) / 4 + 0.5);
            if (radius % 2 != 1) 
                radius += 1; // force radius to be odd so that the three box-blur methodology works.
            

            vImageBoxConvolve_ARGB8888(&effectInBuffer, &effectOutBuffer, NULL, 0, 0, (uint32_t) radius, (uint32_t) radius, 0, kvImageEdgeExtend);
            vImageBoxConvolve_ARGB8888(&effectOutBuffer, &effectInBuffer, NULL, 0, 0, (uint32_t) radius, (uint32_t) radius, 0, kvImageEdgeExtend);
            vImageBoxConvolve_ARGB8888(&effectInBuffer, &effectOutBuffer, NULL, 0, 0, (uint32_t) radius, (uint32_t) radius, 0, kvImageEdgeExtend);
        
        BOOL effectImageBuffersAreSwapped = NO;
        if (hasSaturationChange) 
            CGFloat s = saturationDeltaFactor;
            CGFloat floatingPointSaturationMatrix[] = 
                0.0722 + 0.9278 * s,  0.0722 - 0.0722 * s,  0.0722 - 0.0722 * s,  0,
                0.7152 - 0.7152 * s,  0.7152 + 0.2848 * s,  0.7152 - 0.7152 * s,  0,
                0.2126 - 0.2126 * s,  0.2126 - 0.2126 * s,  0.2126 + 0.7873 * s,  0,
                0,                    0,                    0,  1,
            ;
            const int32_t divisor = 256;
            NSUInteger matrixSize = sizeof(floatingPointSaturationMatrix)/sizeof(floatingPointSaturationMatrix[0]);
            int16_t saturationMatrix[matrixSize];
            for (NSUInteger i = 0; i < matrixSize; ++i) 
                saturationMatrix[i] = (int16_t)roundf(floatingPointSaturationMatrix[i] * divisor);
            
            if (hasBlur) 
                vImageMatrixMultiply_ARGB8888(&effectOutBuffer, &effectInBuffer, saturationMatrix, divisor, NULL, NULL, kvImageNoFlags);
                effectImageBuffersAreSwapped = YES;
            
            else 
                vImageMatrixMultiply_ARGB8888(&effectInBuffer, &effectOutBuffer, saturationMatrix, divisor, NULL, NULL, kvImageNoFlags);
            
        
        if (!effectImageBuffersAreSwapped)
            effectImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();

        if (effectImageBuffersAreSwapped)
            effectImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    

    // Set up output context.
    UIGraphicsBeginImageContextWithOptions(self.size, NO, [[UIScreen mainScreen] scale]);
    CGContextRef outputContext = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(outputContext, 1.0, -1.0);
    CGContextTranslateCTM(outputContext, 0, -self.size.height);

    // Draw base image.
    CGContextDrawImage(outputContext, imageRect, self.CGImage);

    // Draw effect image.
    if (hasBlur) 
        CGContextSaveGState(outputContext);
        if (maskImage) 
            CGContextClipToMask(outputContext, imageRect, maskImage.CGImage);
        
        CGContextDrawImage(outputContext, imageRect, effectImage.CGImage);
        CGContextRestoreGState(outputContext);
    

    // Add in color tint.
    if (tintColor) 
        CGContextSaveGState(outputContext);
        CGContextSetFillColorWithColor(outputContext, tintColor.CGColor);
        CGContextFillRect(outputContext, imageRect);
        CGContextRestoreGState(outputContext);
    

    // Output image is ready.
    UIImage *outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return outputImage;


//Usage:
[imageToBlur applyBlurWithRadius:2.0f tintColor:[UIColor clearColor] saturationDeltaFactor:1.0 maskImage:nil];

【参考方案2】：

您可以通过在 imageview 上添加模糊效果视图来创建此视图。但这将在图像显示在 imageview 中时起作用。

  let effect = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.light))
  effect.frame = imageView.frame    
  imageView.addSubview(effect)

【讨论】：

我尝试使用这个但无法达到相同的效果。

尝试将此代码添加到我可以使用此代码生成模糊效果 effect.autoresizingMask = [.flexibleWidth,.flexibleHeight]

【参考方案3】：

你可以试试这个

+(UIImage *)coreBlurImage:(UIImage *)image
           withBlurNumber:(CGFloat)blur 
    CIContext *context = [CIContext contextWithOptions:nil];
    CIImage  *inputImage=[CIImage imageWithCGImage:image.CGImage];
    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
    [filter setValue:inputImage forKey:kCIInputImageKey];
    [filter setValue:@(blur) forKey: @"inputRadius"];
    CIImage *result=[filter valueForKey:kCIOutputImageKey];
    CGImageRef outImage=[context createCGImage:result fromRect:[result extent]];
    UIImage *blurImage=[UIImage imageWithCGImage:outImage];
    CGImageRelease(outImage);
    return blurImage;