如何使用 Core Image APIs 模糊图像看起来就像 `UIVisualView` 效果？答案

【问题标题】：How to use Core Image APIs to blur a image looks just like the `UIVisualView` effect?如何使用 Core Image APIs 模糊图像看起来就像 `UIVisualView` 效果？
【发布时间】：2017-12-19 04:00:47
【问题描述】：

下面的第一张图片是原始图片。
第二个图像是使用 Core Image API 实现的模糊图像。
第三张图像是使用UIVisualView 实现的模糊图像。

很明显，Core Image 模糊了图像并缩小了它。更大的半径导致更宽的白色边框。

问题：如何使用core image做一个类似UIVisualView效果的视觉效果。

至少，如何使用 Core Image 来模糊没有白色边框的图像。

func blur(image: UIImage, withRadius radius: Float) -> UIImage {
    let context = CIContext(options: nil)
    let image = CIImage(image: image)

    let filter = CIFilter(name: "CIGaussianBlur")
    filter?.setValue(image, forKey: kCIInputImageKey)
    filter?.setValue(radius, forKey: "inputRadius")
    let result = filter?.outputImage
    return UIImage(cgImage: context.createCGImage(result!, from: (result?.extent)!)!)
}

第三张图片是

func addVisualEffectView() {
    let effectView = UIVisualEffectView(effect: UIBlurEffect(style:.light))
    effectView.frame = originalImageView.bounds // originalImageView is the ImageView represents the original image
    originalImageView.addSubview(effectView)
}

【问题讨论】：

你有你的答案。现在，如果你想更好地解释下面发生的事情，我推荐“Core Image for Swift”——尤其是第 3.1 章。它解释了为什么你有一个白色边框以及如何纠正它 - 基本上，它是一个卷积过滤器，边缘是......嗯，边缘。
@dfd 谢谢，伙计。我会检查的。

标签： ios core-image uivisualeffectview

【解决方案1】：

使用这个我得到了像视觉效果视图一样的模糊效果。

func blurredImage(with sourceImage: UIImage) -> UIImage {
    //  Create our blurred image
    let context = CIContext(options: nil)
    let inputImage = CIImage(cgImage: sourceImage.cgImage as! CGImage)
    //  Setting up Gaussian Blur
    var filter = CIFilter(name: "CIGaussianBlur")
    filter?.setValue(inputImage, forKey: kCIInputImageKey)
    filter?.setValue(50.0, forKey: "inputRadius")
    let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage

   /*  CIGaussianBlur has a tendency to shrink the image a little, this ensures it matches 
    *  up exactly to the bounds of our original image */

    let cgImage = context.createCGImage(result ?? CIImage(), from: inputImage.extent)
    let retVal = UIImage(cgImage: cgImage!)
    return retVal
}

CI上下文。核心图像的所有处理都在 CIContext 中完成。这有点类似于 Core Graphics 或 OpenGL 上下文。

使用提供的 CIImage 在上下文中调用 createCGImage(from:) 将返回一个新的 CGImage 实例。

本教程将有助于理解：

Core Image Tutorial: Getting Started

这是输出：

【讨论】：

如果您添加一些解释为什么 CIContext.createCGImage(from:) 是 key 这将对每个人都有帮助。事实上，除了提供代码之外，做更多的事情会更好！我们在这里提供帮助，而不仅仅是提供代码。除此之外，很好答案。
@Faysal 谢谢！和dfd。谢谢你们俩。这个问题让我困惑了好久。
@dfd 这可能更类似于 UIVisualEffect 吗？不管radius是什么，模糊后的图像看起来和UIVisualEffect还是有点区别的。
它可能是。请记住，您使用的是由 Apple 创建的视图，而不是您使用较低级别的 API 来密切复制的视图。我看到八个CICategoryBlur 过滤器，其中不包括您可以自己编写的那些简单过滤器。顺便说一句，您的问题从未谈到“重新创建”那种模糊 - 只是关于 为什么 你最终会出现白色边框。 :-)

【解决方案2】：

你可以在image view上方创建一个UIImageView和一个UIViewVisualEffectView，然后渲染成图片，看我的做法：

extension UIImage
{
    var glass: UIImage?
    {
        let area = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    
        let mainView = UIView(frame: area)
    
        let imageView = UIImageView(image: self)
        imageView.frame = area
    
        let blurEffect = UIBlurEffect(style: .light)
        let blurredEffectView = UIVisualEffectView(effect: blurEffect)
        blurredEffectView.frame = area
    
        mainView.addSubview(imageView)
        mainView.addSubview(blurredEffectView)
    
        let renderer = UIGraphicsImageRenderer(size: size)
        let blurImage = renderer.image { _ in
            mainView.drawHierarchy(in: area, afterScreenUpdates: true)
        }
        return blurImage
    }
}

【讨论】：