Comment ajouter l'effet de flou comme le téléchargement d'image

Question

Je fais une application de causerie et veux ajouter un effet de flou comme le téléchargement d'image semblable à whatsapp comme j'essaye également le UIVisualEffectView mais n'atteint pas à l'effet semblable et essaye également de réduire alpha de UIVisualEffectView mais n'atteint pas près de cet effet.Peut-on me dire comment faire cela. Merci d'avance.

J'essayez d'utiliser UIVisual effectView mais ne peut pas atteindre le même

Answer 1

Vous pouvez utiliser une bibliothèque tierce partie comme https://github.com/nicklockwood/FXBlurView

Créer une image floue en utilisant cela et l'ajouter à votre cellule sur l'événement spécifique.

Vous pouvez également utiliser la méthode suivante d'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]; 

Answer 2

Vous pouvez créer ce point de vue en ajoutant vue blureffect sur imageview. Mais ceci fonctionnera quand l'image est montrée dans l'imageview.

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

Answer 3

Vous pouvez essayer cette

+(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; 
}