Menambahkan efek blur ke latar belakang dengan cepat


118

Saya mengatur gambar latar belakang untuk melihat pengontrol. Tetapi saya juga ingin menambahkan efek blur pada latar belakang ini. Bagaimana saya bisa melakukan ini?

Saya mengatur latar belakang dengan kode berikut:

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

Saya menemukan di internet untuk imageview blur bagaimana saya bisa menerapkan ini ke latar belakang saya?

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

Silakan lihat di sini untuk skala blur kustom stackoverflow.com/a/51406290/7576100
Jack

Jawaban:


334

Saya telah menguji kode ini dan berfungsi dengan baik:

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

Untuk 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)

Untuk 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)

Di sini Anda dapat melihat hasilnya:

pandangan kabur

Atau Anda dapat menggunakan lib ini untuk itu:

https://github.com/FlexMonkey/Blurable


5
Apakah ada cara untuk mengubah skala blur? Itu terlalu kabur.
Tolgay Toklar

2
ubah sajaUIBlurEffectStyle.Light
Dharmesh Kheni

11
Atau Anda dapat menyetel alfa di UIVisualEffectView menjadi kurang dari 1.0. Coba 0,8 atau 0,7.
Duncan C

31
Apple tidak merekomendasikan mengubah alfa visualEffectVÄ°ew
Tolgay Toklar

4
semua kontrol disembunyikan di bawah blur ini. Alih-alih addSubview - gunakan self.view.insertSubview (blurEffectView, di: 0)
Leonif

45

Anda dapat membuat ekstensi dari UIImageView.

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)
    }
}

Pemakaian:

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)
}

Ekstensi Swift 3

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)
    }
}

Pemakaian:

yourImageView.addBlurEffect()

Tambahan:

extension UIView {

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

7
Ide bagus! Tidak bisakah itu hanya makeBlurImage () dan kemudian menggunakan self sebagai ganti targetImageView?
Emanuele Fumagalli

1
Saya tidak yakin tetapi kode ini mungkin macet jika tidak ada argumen yang diberikan, bukan? Ini harus memiliki pernyataan "if let tmpTargetImageView = targetImageView {}"
RomOne

@RomOne Anda hanya akan mendapatkan kesalahan kompilasi / build gagal jika Anda tidak memberikan argumen. Juga, itu akan bekerja tanpa gambar jadi tidak perlu membukanya; dan pengujian akan menunjukkan kepada Anda apakah Anda lupa menambahkan gambar atau tidak.
Josh

Intinya adalah itu akan macet jika ImageView nihil dilewatkan. Idealnya adalah ide @EmanueleFumagalli untuk menggunakan self daripada targetImageView, tetapi juga memungkinkan untuk menggunakan pernyataan penjaga dan mengembalikan jika ada argumen nihil.
Uzaak

lebih baik memberikan deskripsi gambar juga dengan buram. baik terima kasih.
MRizwan33

13

@AlvinGeorge sebaiknya menggunakan:

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)
    }
}

penggunaan :

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

11

Untuk Swift 3 (iOS 10.0 dan 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)

10

Anda juga dapat menggunakan CoreImage untuk membuat gambar buram dengan efek gelap

  1. Jepret untuk gambar

    func snapShotImage() -> UIImage {
        UIGraphicsBeginImageContext(self.frame.size)
        if let context = UIGraphicsGetCurrentContext() {
            self.layer.renderInContext(context)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()
            return image
        }
    
        return UIImage()
    }
  2. Terapkan Filter CoreImage sesuai keinginan Anda

    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()
    }

8

Ini berhasil untuk saya di Swift 5

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

1
Hai @Marta, Apakah Anda tahu cara mengurangi kapasitas blurredView?
Langit

5

Yang ini selalu menjaga bingkai yang tepat:

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
    }
}

3

Anda harus selalu menggunakan .dark untuk gaya dan menambahkan kode berikut agar terlihat keren

    blurEffectView.backgroundColor = .black
    blurEffectView.alpha = 0.4

1

Kode Ini Berfungsi dengan Baik Bagi saya! ini untuk Swift 4.x

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

0

Menemukan cara lain .. Saya menggunakan Apple UIImage + ImageEffects.

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

0

Dalam ekstensi UIView:

func addBlurredBackground(style: UIBlurEffect.Style) {
    let blurEffect = UIBlurEffect(style: style)
    let blurView = UIVisualEffectView(effect: blurEffect)
    blurView.frame = self.frame
    blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.addSubview(blurView)
    self.sendSubviewToBack(blurView)
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.