Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Blur UIImage outside of bounds (Photoshop-style)

I'm trying to do a Gaussian blur on a UIImage that replicates my photoshop mockup.

Desired Behavior: In Photoshop, when I run a Gaussian blur filter, the image layer gets larger as a result of the blurred edges.

Observed Behavior: Using GPUImage, I can successfully blur my UIImages. However, the new image is cropped at the original bounds, leaving a hard edge all the way around.

Setting UIImageView.layer.masksToBounds = NO; doesn't help, as the image is cropped not the view.

I've also tried placing the UIImage centered on a larger clear image before blurring, and then resizing. This also didn't help.

Is there a way to achieve this "Photoshop-style" blur?

enter image description here

UPDATE Working Solution thanks to Brad Larson:

UIImage sourceImage = ...
GPUImagePicture *imageSource = [[GPUImagePicture alloc] initWithImage:sourceImage];
GPUImageTransformFilter *transformFilter = [GPUImageTransformFilter new];
GPUImageFastBlurFilter *blurFilter = [GPUImageFastBlurFilter new];

//Force processing at scale factor 1.4 and affine scale with scale factor 1 / 1.4 = 0.7
[transformFilter forceProcessingAtSize:CGSizeMake(SOURCE_WIDTH * 1.4, SOURCE_WIDTH * 1.4)];
[transformFilter setAffineTransform:CGAffineTransformMakeScale(0.7, 0.7)];

//Setup desired blur filter        
[blurFilter setBlurSize:3.0f];
[blurFilter setBlurPasses:20];

//Chain Image->Transform->Blur->Output        
[imageSource addTarget:transformFilter];
[transformFilter addTarget:blurFilter];
[imageSource processImage];

UIImage *blurredImage = [blurFilter imageFromCurrentlyProcessedOutputWithOrientation:UIImageOrientationUp];
like image 806
nighthawk454 Avatar asked Oct 14 '13 17:10

nighthawk454


People also ask

Which type of blur can be applied in the blur Gallery?

Field Blur The Field Blur can help you blur part of a portrait while still being able to see the subject's eyes or even their entire face. Once you select Field Blur, you'll see the Blur Gallery open. Also, your entire image will be blurred, and you'll see a little circle in the middle.

What is Field blur?

About the Field Blur filter Against a uniformly blurred image, one or more selection handles can be added, positioned and edited to control the extent of blurring at that handle position, i.e.the focus origin. Multiple areas of focus can therefore be created.

How do I apply a Gaussian blur to a photo?

The Gaussian blur can be applied to an image with the skimage. filters. gaussian() function. Larger sigma values may remove more noise, but they will also remove detail from an image.


1 Answers

GPUImage will only produce a result that is processed up to the limits of your image. In order to extend past your image, you'll need to expand the canvas on which it operates.

To do this, you'll want to feed your image into a GPUImageTransformFilter, then use -forceProcessingAtSize: or -forceProcessingAtSizeRespectingAspectRatio: to enlarge the working area. However, this will also enlarge the image by default, so to counter that, use a scale transform with your GPUImageTransformFilter to reduce the size of your image relative to the larger area. This will keep it with the same pixel dimensions, while placing it within a larger overall image.

Then all you need to do is feed this output into your blur filter and the blur will now extend past the edge of your original image. The size you force the image to be will depend on how far the blur needs to extend past the original image's edges.

like image 113
Brad Larson Avatar answered Oct 20 '22 23:10

Brad Larson