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

Question

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

很明显,核心图像模糊了图像并缩小了图像.半径越大,白边越宽.

问题:如何使用核心图像就像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)
}

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

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

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

本教程将有助于理解:

核心图像教程:入门

这是输出:

Answer 2

您可以在图像视图上方创建一个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
    }
}