web-dev-qa-db-ja.com

SwiftでUIImageViewの既存の画像をぼかす方法は？

セットアップは簡単です。

  • 画像が割り当てられたUIImageViewを持つViewController。
  • クリックするとUIImageViewの画像をぼかすUIButton。

Storyboard

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var bg: UIImageView!

    @IBAction func blur(_ sender: Any) {
        let inputImage = CIImage(cgImage: (bg.image?.cgImage)!)

        let filter = CIFilter(name: "CIGaussianBlur")
        filter?.setValue(inputImage, forKey: "inputImage")
        filter?.setValue(10, forKey: "inputRadius")
        let blurred = filter?.outputImage
        bg.image = UIImage(ciImage: blurred!)
    }
}

ボタンをクリックすると、画面が白に変わります。何が間違っているのかわかりません。誰が私が間違っているのか知っていますか？

iosswiftuiimageviewcifilterciimage
17
Mark Moeykens

単にUIVisualEffectを使用してぼかし効果を実現できます。 CoreImageを使用してぼかし効果を達成しようとする場合、クラスのimport CoreImageの後のコードの下を試してください。

var context = CIContext(options: nil)

func blurEffect() {

    let currentFilter = CIFilter(name: "CIGaussianBlur") 
    let beginImage = CIImage(image: bg.image!)
    currentFilter!.setValue(beginImage, forKey: kCIInputImageKey)
    currentFilter!.setValue(10, forKey: kCIInputRadiusKey)

    let cropFilter = CIFilter(name: "CICrop")
    cropFilter!.setValue(currentFilter!.outputImage, forKey: kCIInputImageKey)
    cropFilter!.setValue(CIVector(cgRect: beginImage!.extent), forKey: "inputRectangle")

    let output = cropFilter!.outputImage 
    let cgimg = context.createCGImage(output!, from: output!.extent)
    let processedImage = UIImage(cgImage: cgimg!)
    bg.image = processedImage
}

出力：

enter image description here

注：coreImageではシミュレーターのパフォーマンスが遅すぎるため、実際のデバイスでコードをテストすることをお勧めします。

22
Joe

プロトコルを❤️する人のために

protocol Bluring {
    func addBlur(_ alpha: CGFloat)
}

extension Bluring where Self: UIView {
    func addBlur(_ alpha: CGFloat = 0.5) {
        // create effect
        let effect = UIBlurEffect(style: .dark)
        let effectView = UIVisualEffectView(effect: effect)

        // set boundry and alpha
        effectView.frame = self.bounds
        effectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        effectView.alpha = alpha

        self.addSubview(effectView)
    }
}

// Conformance
extension UIView: Bluring {}

// use
someImageview.addBlur()
16
kaushal.exe

Swift 3.1：役に立てば幸いです。

func blurImage(image:UIImage) -> UIImage? {
        let context = CIContext(options: nil)
        let inputImage = CIImage(image: image)
        let originalOrientation = image.imageOrientation
        let originalScale = image.scale

        let filter = CIFilter(name: "CIGaussianBlur")
        filter?.setValue(inputImage, forKey: kCIInputImageKey)
        filter?.setValue(10.0, forKey: kCIInputRadiusKey) 
        let outputImage = filter?.outputImage

        var cgImage:CGImage?

        if let asd = outputImage
        {
            cgImage = context.createCGImage(asd, from: (inputImage?.extent)!)
        }

        if let cgImageA = cgImage
        {
            return UIImage(cgImage: cgImageA, scale: originalScale, orientation: originalOrientation)
        }

        return nil
    }
4
Md Milan Mia

これを使って：

 import UIKit

    class ViewController: UIViewController {

        @IBOutlet weak var bgImageView: UIImageView!
        @IBOutlet weak var blurButton: UIButton!


        override func viewDidLoad() {
            super.viewDidLoad()
            // Do any additional setup after loading the view, typically from a nib.
        }

        override func didReceiveMemoryWarning() {
            super.didReceiveMemoryWarning()
            // Dispose of any resources that can be recreated.
        }


        @IBAction func blurButtonTapped(_ sender: Any) {

                let inputImage = CIImage(cgImage: (self.bgImageView.image?.cgImage)!)
                let filter = CIFilter(name: "CIGaussianBlur")
                filter?.setValue(inputImage, forKey: "inputImage")
                filter?.setValue(10, forKey: "inputRadius")
                let blurred = filter?.outputImage

                var newImageSize: CGRect = (blurred?.extent)!
                newImageSize.Origin.x += (newImageSize.size.width - (self.bgImageView.image?.size.width)!) / 2
                newImageSize.Origin.y += (newImageSize.size.height - (self.bgImageView.image?.size.height)!) / 2
                newImageSize.size = (self.bgImageView.image?.size)!

                let resultImage: CIImage = filter?.value(forKey: "outputImage") as! CIImage
                let context: CIContext = CIContext.init(options: nil)
                let cgimg: CGImage = context.createCGImage(resultImage, from: newImageSize)!
                let blurredImage: UIImage = UIImage.init(cgImage: cgimg)
                self.bgImageView.image = blurredImage
        }

    }

出力：

enter image description here

Gitbubリンク：

https://github.com/k-sathireddy/ImageBlurEffect

1
KSR

適切な結果を得る優れたパフォーマンスのソリューションは、StackBlurです。これは、ぼかしを効率的に近似する巧妙なアルゴリズムを使用します。

これは、Gaussian BlurとBox blurの妥協案です。BoxBlurよりもはるかに見栄えの良いぼかしを作成しますが、Gaussian Blur実装よりも7倍高速です。これは、このフィルターが内部でどのように機能するかを最もよく説明しているため、Stack Blurと呼ばれます。この「タワー」は、コンボリューションカーネル内の単一ピクセルの重みを制御し、中央のピクセルに最大の重みを与えます。速度の秘密は、アルゴリズムがスタックの右側に1つの新しいピクセルを追加すると同時に、左端のピクセルを削除するだけであるということです。スタックの最上層の残りの色は、スタックの右側にあるか左側にあるかに応じて、1つずつ追加または削減されます。

GithubのStackBlur をご覧ください。

Swift portsもありますが、Obj-Cバージョンよりもかなり遅いバージョンがあります。

1
Manuel

NSObjectクラスでぼかしを作成したため、プロジェクト全体でこのメソッドを簡単に使用できます。

class Helper: NSObject
{
    class func addBlurView(_ inView : UIView) -> UIVisualEffectView
    {
        let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.dark)
        let blurEffectView = UIVisualEffectView(effect: blurEffect)

        //always fill the view
        blurEffectView.frame = inView.bounds
        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        blurEffectView.alpha = 0.5

        return blurEffectView
    }
}

ViewControllerでIVisualEffectViewのオブジェクトを作成しました。次に、のヘルパークラスメソッドを呼び出してぼかしを追加します。

import UIKit

class ViewController: UIViewController
{
   var blurEffectView : UIVisualEffectView!
    override func viewDidLoad() {
        super.viewDidLoad()

      blurEffectView = Helper.addBlurView((imgView)!)
      self.imgView.addSubview(blurEffectView)
}
0
Amanpreet