在边界外模糊UIImage（Photoshop风格） [英] Blur UIImage outside of bounds (Photoshop-style)

问题描述

我正在尝试在复制我的photoshop模型的UIImage上进行高斯模糊。

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

所需行为
在Photoshop中，当我运行高斯模糊滤镜时，图像层会因为模糊的边缘。

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

观察到的行为：使用GPUImage，我可以成功模糊我的UIImages。但是，新图像在原始边界处被裁剪，一直留下硬边。

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.

设置 UIImageView.layer.masksToBounds = NO; 没有帮助，因为图像被裁剪而不是视图。

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

我还尝试在模糊之前将UIImage放在较大的清晰图像上，然后调整大小。这也没有帮助。

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

有没有办法实现这种Photoshop式模糊？

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

更新工作解决方案谢谢致Brad Larson：

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];

推荐答案

GPUImage只生成一个处理过的结果你的形象的极限。为了扩展您的图像，您需要扩展其运行的画布。

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.

为此，您需要将图像输入到GPUImageTransformFilter，然后使用 -forceProcessingAtSize：或 -forceProcessingAtSizeRespectingAspectRatio：来扩大工作区域。但是，这也会默认放大图像，因此要对此进行处理，请使用GPUImageTransformFilter进行缩放变换，以减小图像相对于较大区域的大小。这将使其保持相同的像素尺寸，同时将其置于更大的整体图像中。

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.

这篇关于在边界外模糊UIImage（Photoshop风格）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！