在 iOS 中应用模糊滤镜时如何从图像中删除黑色阴影矩形？

Posted 2023-02-24

【中文标题】在 iOS 中应用模糊滤镜时如何从图像中删除黑色阴影矩形？

【英文标题】：How to Remove Black Shadow Rectangle from Image when Applying Blur Filter in iOS?

【发布时间】：2018-08-07 15:20:00

【问题描述】：

我想在应用模糊滤镜时移除图像周围的黑色阴影边框。

请查看以下随附的屏幕截图。 Blur 功能正常工作，但想要去除黑色阴影。我只想模糊图像。我不想应用任何带有模糊的颜色效果。请让我们知道我什么时候应该错过...

由于低分，我在这里上传了图片：

https://drive.google.com/open?id=1KtVgqRXOmIEQXh9IMyWNAlariL0hcJBN https://drive.google.com/open?id=1l2eLq7VwFPb3-SfIokW0Ijhk2jqUvjlU

这是我在特定图像上应用模糊效果的函数：

参数：

doBlurImage - 主图像想要模糊它

imageBlurValue - 0 到 50 Float 的模糊值

func makeBlurImage(doBlurImage : UIImage, imageBlurValue :  CGFloat) -> UIImage 

        let beginImage = CIImage(image: doBlurImage)

        let currentFilter = CIFilter(name: "CIGaussianBlur")
        currentFilter!.setValue(beginImage, forKey: kCIInputImageKey)
        currentFilter!.setValue(imageBlurValue, 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


        return UIImage(ciImage: output!)

【问题讨论】：

你考虑过使用UIVisualEffectView吗？

我首先建议使用UIVisualEffectView 和UIBlurEffect。黑色边框可能是由图像背后的背景颜色引起的，因此请尝试使视觉效果视图比图像本身稍大一些，以免边缘渗色。

【参考方案1】：

我找到了解决此问题的不同方法..

苹果说：

在模糊滤镜之前应用钳位效果可通过使原始图像在所有方向上不透明来避免边缘软化。

所以我们应该应用CIAffineClamp 过滤器来避免黑色阴影，clampedToExtent() 函数返回一个新图像，该图像通过沿其边缘的像素颜色向各个方向无限延伸而创建，并且它已经是CIImage 类的成员，所以我们可以使用它而无需创建任何额外的功能。

所以解决方案的实现将是这样的：

fileprivate final func blurImage(image: UIImage?, blurAmount: CGFloat, completionHandler: @escaping (UIImage?) -> Void) 

    guard let inputImage = image else 
        print("Input image is null!")
        completionHandler(nil); return
    

    guard let ciImage = CIImage(image: inputImage) else 
        print("Cannot create ci image from ui image!")
        completionHandler(nil); return
    

    let blurFilter = CIFilter(name: "CIGaussianBlur")
    blurFilter?.setValue(ciImage.clampedToExtent(), forKey: kCIInputImageKey)
    blurFilter?.setValue(blurAmount, forKey: kCIInputRadiusKey)

    guard let openGLES3 = EAGLContext(api: .openGLES3) else 
        print("Cannot create openGLES3 context!")
        completionHandler(nil); return
    

    let context = CIContext(eaglContext: openGLES3)

    guard let ciImageResult = blurFilter?.outputImage else 
        print("Cannot get output image from filter!")
        completionHandler(nil); return
    

    guard let resultImage = context.createCGImage(ciImageResult, from: ciImage.extent) else 
        print("Cannot create output image from filtered image extent!")
        completionHandler(nil); return
    

    completionHandler(UIImage(cgImage: resultImage))

注意：创建上下文很昂贵，然后您可以在函数之外创建它。

【参考方案2】：

这些是在 ios 中生成模糊效果的可能选项：

CIGaussianBlur 将根据 Image 的背景颜色生成模糊效果。 UIVisualEffectView 将根据 UIVisualEffectView 的 Style 生成模糊效果。 UIVisualEffectView 中的模糊效果是 .extraLight、.light、.dark、.extraDark、常规和突出。 建议选项 - GPUIMage - 您可以使用 GPUImage 处理库归档最佳模糊效果。

使用 GPUImage 的模糊效果：

            var resultImage = UIImage()
            let gaussianBlur = GaussianBlur()
            gaussianBlur.blurRadiusInPixels = Float(ImageBlurValue)
            let pictureInput = PictureInput(image: YourImage)
            let pictureOutput = PictureOutput()
            pictureOutput.imageAvailableCallback = image in
                print("Process completed")

                resultImage = image
            
            pictureInput --> gaussianBlur --> pictureOutput
            pictureInput.processImage(synchronously:true)

            pictureInput.removeAllTargets()
            return resultImage

编码愉快！...:)

【讨论】：

GPUImage - 处理效果很好...非常感谢.. :)