Adding a blur effect to the background in quick

Question

I set the background image to view the controller. But also I want to add a blur effect to this background. How can i do this?

I set the background with the following code:

self.view.backgroundColor = UIColor(patternImage: UIImage(named: "testBg")!) 

I found on the Internet for a blur imageview, how can I implement this against my background?

 var darkBlur = UIBlurEffect(style: UIBlurEffectStyle.Dark) // 2 var blurView = UIVisualEffectView(effect: darkBlur) blurView.frame = imageView.bounds // 3 imageView.addSubview(blurView) 

Answer 1

I checked this code and it works fine:

 let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = view.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(blurEffectView) 

For Swift 3.0:

 let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = view.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(blurEffectView) 

For Swift 4.0:

 let blurEffect = UIBlurEffect(style: UIBlurEffect.Style.dark) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = view.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(blurEffectView) 

Here you can see the result:

Or you can use this library for this:

https://github.com/FlexMonkey/Blurable

Answer 2

You can do a UIImageView extension.

Swift 2.0

 import Foundation import UIKit extension UIImageView { func makeBlurImage(targetImageView:UIImageView?) { let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = targetImageView!.bounds blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation targetImageView?.addSubview(blurEffectView) } } 

Using:

 override func viewDidLoad() { super.viewDidLoad() let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325)) let sampleImage:UIImage = UIImage(named: "ic_120x120")! sampleImageView.image = sampleImage //Convert To Blur Image Here sampleImageView.makeBlurImage(sampleImageView) self.view.addSubview(sampleImageView) } 

Swift 3 Extension

 import Foundation import UIKit extension UIImageView { func addBlurEffect() { let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.light) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = self.bounds blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // for supporting device rotation self.addSubview(blurEffectView) } } 

Using:

 yourImageView.addBlurEffect() 

Application:

 extension UIView { /// Remove UIBlurEffect from UIView func removeBlurEffect() { let blurredEffectViews = self.subviews.filter{$0 is UIVisualEffectView} blurredEffectViews.forEach{ blurView in blurView.removeFromSuperview() } } } 

Answer 3

@AlvinGeorge should just use:

 extension UIImageView{ func blurImage() { let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = self.bounds blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation self.addSubview(blurEffectView) } } 

Using

  blurredBackground.frame = self.view.bounds blurredBackground.blurImage() self.view.addSubview(self.blurredBackground) 

Answer 4

For Swift 3 (iOS 10.0 and 8.0)

 var darkBlur:UIBlurEffect = UIBlurEffect() if #available(iOS 10.0, *) { //iOS 10.0 and above darkBlur = UIBlurEffect(style: UIBlurEffectStyle.prominent)//prominent,regular,extraLight, light, dark } else { //iOS 8.0 and above darkBlur = UIBlurEffect(style: UIBlurEffectStyle.dark) //extraLight, light, dark } let blurView = UIVisualEffectView(effect: darkBlur) blurView.frame = self.view.frame //your view that have any objects blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.addSubview(blurView) 

Answer 5

U can also use CoreImage to create a blurry image with a dark effect.

• Take a picture for the image

   func snapShotImage() -> UIImage { UIGraphicsBeginImageContext(self.frame.size) if let context = UIGraphicsGetCurrentContext() { self.layer.renderInContext(context) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } return UIImage() } 

• Apply CoreImage filters as you like with

   private func bluredImage(view:UIView, radius:CGFloat = 1) -> UIImage { let image = view.snapShotImage() if let source = image.CGImage { let context = CIContext(options: nil) let inputImage = CIImage(CGImage: source) let clampFilter = CIFilter(name: "CIAffineClamp") clampFilter?.setDefaults() clampFilter?.setValue(inputImage, forKey: kCIInputImageKey) if let clampedImage = clampFilter?.valueForKey(kCIOutputImageKey) as? CIImage { let explosureFilter = CIFilter(name: "CIExposureAdjust") explosureFilter?.setValue(clampedImage, forKey: kCIInputImageKey) explosureFilter?.setValue(-1.0, forKey: kCIInputEVKey) if let explosureImage = explosureFilter?.valueForKey(kCIOutputImageKey) as? CIImage { let filter = CIFilter(name: "CIGaussianBlur") filter?.setValue(explosureImage, forKey: kCIInputImageKey) filter?.setValue("\(radius)", forKey:kCIInputRadiusKey) if let result = filter?.valueForKey(kCIOutputImageKey) as? CIImage { let bounds = UIScreen.mainScreen().bounds let cgImage = context.createCGImage(result, fromRect: bounds) let returnImage = UIImage(CGImage: cgImage) return returnImage } } } } return UIImage() } 

Answer 6

It worked for me on Swift 5

 let blurredView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) blurredView.frame = self.view.bounds backgroundimage.addSubview(blurredView) 

Answer 7

This one always holds the correct frame:

 public extension UIView { @discardableResult public func addBlur(style: UIBlurEffect.Style = .extraLight) -> UIVisualEffectView { let blurEffect = UIBlurEffect(style: style) let blurBackground = UIVisualEffectView(effect: blurEffect) addSubview(blurBackground) blurBackground.translatesAutoresizingMaskIntoConstraints = false blurBackground.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true blurBackground.topAnchor.constraint(equalTo: topAnchor).isActive = true blurBackground.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true blurBackground.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true return blurBackground } } 

Answer 8

This code works well for me! this is for swift 4.x

 let blurEffect = UIBlurEffect(style: .ExtraLight) let blurEffectView = UIVisualEffectView(effect: blurEffect) blurEffectView.frame = self.view.frame self.view.insertSubview(blurEffectView, atIndex: 0) 

Answer 9

Found another way. I am using Apple UIImage + ImageEffects.

  UIImage *effectImage = [image applyExtraLightEffect]; self.imageView.image = effectImage; 

Answer 10

You should always use .dark for the style and add the following code to make it look cool

  blurEffectView.backgroundColor = .black blurEffectView.alpha = 0.4