CODEWITHSUNDEEP
iosswiftcore-imagecifilterciimage
Disha Patel
Disha Patel

Reputation: 23

How to Remove Black Shadow Rectangle from Image when Applying Blur Filter in iOS?

I want to remove a BLACK shadow border around Image when applying a Blur filter.

Please review below-attached screenshot. Blur function work correctly but want to remove a black shadow. I only want to do blur an Image. I don't want to apply any color effect with blur. Please let us know when should I missed...

Here I Have uploaded Image due to the low points:

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

Here is my function to Apply Blur effects on particular Image:

Parameter :

doBlurImage - Main Image want to Blur it

imageBlurValue - Blur value from 0 to 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!)
}

Upvotes: 2

Views: 1278

Answers (3)

hstdt
hstdt

Reputation: 6243

put same picture below blurred picture if clampedToExtent filter lead to Performance problem.

In my case, blur is related to offset.Y and scroll will stuck if apply clampedToExtent filter.

image
    .blur(radius: blur)
    .background {
        if blur > 0 {
            image
                .padding(.all, -4)
                .blur(radius: blur)
        }
    }

Upvotes: -1

Coder ACJHP
Coder ACJHP

Reputation: 2194

I found a different way to fix this problem..

Apple says :

Applying a clamp effect before the blur filter avoids edge softening by making the original image opaque in all directions.

So we should applying CIAffineClamp filter to avoid black shadow, clampedToExtent() function is returns a new image created by making the pixel colors along its edges extend infinitely in all directions and it already member of CIImage class so we can use it without creating any extra func.

So implementation of solution will be like this :

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

Note: Creation of context is expensive then you can create it out side of your function.

Upvotes: 2

Renish Dadhaniya
Renish Dadhaniya

Reputation: 10752

These are possible options to generate a Blur effect in ios:

  1. CIGaussianBlur will generate a Blur effect based on a background color of Image.
  2. UIVisualEffectView will generate a Blur effect based on a Style of UIVisualEffectView. Blur effect in UIVisualEffectView are .extraLight, .light, .dark, .extraDark, regular, and prominent.
  3. Suggested Option - GPUIMage - You can archive best blur effect using GPUImage Processing Library.

Blur effect using 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

Happy Coding!...:)

Upvotes: 0

Related Questions