Question

我有一个移动的背景图像，我想模糊它的底部。我会只用photoshop来做，但是由于图像移动，它不会很好用。

这就是我的意思（查看图片的底部）：

所以基本上就像Dock对iPhone的影响一样。我使用的是iOS 8而不是Swift。

Answer 1

我根据您的照片做了一个小例子。我的算法如下：

从底部提取部分图像。
对其应用高斯滤镜并将其模糊。
然后，创建一个新的图像上下文，在其上绘制原始图像。
然后，绘制图像的模糊部分，使其准确地放在原始图像上。
从上下文中提取新图像。

以下是执行此操作的源代码，

 @implementation ViewController


- (void)viewDidLoad{

  [super viewDidLoad];
  UIImageView *imageView = [[UIImageView alloc] init];
  imageView.frame = self.view.bounds;
  [self.view  addSubview:imageView];
  imageView.contentMode = UIViewContentModeScaleAspectFit;
  UIImage *image = [UIImage imageNamed:@"monogram.jpg"];
  imageView.image = [self imageWithBlurredImageWithImage: image andBlurInsetFromBottom: 200 withBlurRadius:3];
}

- (UIImage*)imageWithBlurredImageWithImage:(UIImage*)image andBlurInsetFromBottom:(CGFloat)bottom withBlurRadius:(CGFloat)blurRadius{
  UIGraphicsBeginImageContext(image.size);
  CGContextRef context =  UIGraphicsGetCurrentContext();
  CGContextScaleCTM(context, 1, -1);
  CGContextTranslateCTM(context, 0, -image.size.height);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, image.size.height), image.CGImage);
  CGContextDrawImage(context, CGRectMake(0, 0, image.size.width, bottom), [self blurImage: image withBottomInset: bottom blurRadius: blurRadius].CGImage);
  image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return image;
}

- (UIImage*)blurImage:(UIImage*)image withBottomInset:(CGFloat)inset blurRadius:(CGFloat)radius{

  image =  [UIImage imageWithCGImage: CGImageCreateWithImageInRect(image.CGImage, CGRectMake(0, image.size.height - inset, image.size.width,inset))];

  CIImage *ciImage = [CIImage imageWithCGImage:image.CGImage];
  CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];
  [filter setValue:ciImage forKey:kCIInputImageKey];
  [filter setValue:@(radius) forKey:kCIInputRadiusKey];

  CIImage *outputCIImage = filter.outputImage;
  CIContext *context = [CIContext contextWithOptions:nil];

  return [UIImage imageWithCGImage: [context createCGImage:outputCIImage fromRect:ciImage.extent]];

}
@end

以下是结果的屏幕截图。

enter image description here

Answer 2

Apple 为此提供了 UIView。它被称为UIVisualEffectView。在下面的示例中，我只是简单地在界面构建器中拖入一个 UIVisualEffectView。

这是我的 ViewController 代码。

import UIKit

class ViewController: UIViewController {

    @IBOutlet var blurView: UIVisualEffectView!

    override func viewDidLoad() {
        super.viewDidLoad()
        blurView.layer.cornerRadius = 30
        blurView.clipsToBounds = true
    }
}

这是我的故事板源代码：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="tne-QT-ifu">
            <objects>
                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="InToOut" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" misplaced="YES" image="FujiImage" translatesAutoresizingMaskIntoConstraints="NO" id="GYq-6X-DmU">
                                <rect key="frame" x="0.0" y="30" width="414" height="832"/>
                            </imageView>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2U4-G5-MnJ">
                                <rect key="frame" x="87" y="384" width="280" height="168"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="a76-IV-MdK">
                                        <rect key="frame" x="0.0" y="0.0" width="280" height="168"/>
                                        <subviews>
                                            <visualEffectView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="GMM-QK-Qmi">
                                                <rect key="frame" x="20" y="20" width="240" height="128"/>
                                                <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="hNU-PM-AUc">
                                                    <rect key="frame" x="0.0" y="0.0" width="240" height="128"/>
                                                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                                                </view>
                                                <blurEffect style="regular"/>
                                                <userDefinedRuntimeAttributes>
                                                    <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                                        <integer key="value" value="14"/>
                                                    </userDefinedRuntimeAttribute>
                                                </userDefinedRuntimeAttributes>
                                            </visualEffectView>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="280" id="6d8-um-POm"/>
                                            <constraint firstAttribute="height" constant="168" id="GL8-8m-cDd"/>
                                        </constraints>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="168" id="0ob-cA-8hH"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="centerY" secondItem="2U4-G5-MnJ" secondAttribute="centerY" id="2yc-38-IUg"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="top" secondItem="2U4-G5-MnJ" secondAttribute="top" id="42X-Qf-aYe"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="centerX" secondItem="2U4-G5-MnJ" secondAttribute="centerX" id="7Rw-Ll-smB"/>
                                    <constraint firstAttribute="bottom" secondItem="a76-IV-MdK" secondAttribute="bottom" id="Dxd-Z8-6kU"/>
                                    <constraint firstAttribute="trailing" secondItem="a76-IV-MdK" secondAttribute="trailing" id="OT3-3x-zEO"/>
                                    <constraint firstAttribute="width" constant="280" id="qHu-Je-7HQ"/>
                                    <constraint firstItem="a76-IV-MdK" firstAttribute="leading" secondItem="2U4-G5-MnJ" secondAttribute="leading" id="tu4-dC-sdn"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="bottom" secondItem="GYq-6X-DmU" secondAttribute="bottom" id="71W-6Z-DKH"/>
                            <constraint firstItem="6Tk-OE-BBY" firstAttribute="trailing" secondItem="GYq-6X-DmU" secondAttribute="trailing" id="K6b-6G-j9N"/>
                            <constraint firstItem="GYq-6X-DmU" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" id="Nw1-qO-cc2"/>
                            <constraint firstItem="2U4-G5-MnJ" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="QJ8-2m-dH8"/>
                            <constraint firstItem="GYq-6X-DmU" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" id="oQd-Bi-jeL"/>
                            <constraint firstItem="2U4-G5-MnJ" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="snX-1a-TU4"/>
                        </constraints>
                    </view>
                    <connections>
                        <outlet property="blurView" destination="GMM-QK-Qmi" id="SUt-LU-NTu"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="234.78260869565219" y="-27.455357142857142"/>
        </scene>
    </scenes>
    <resources>
        <image name="FujiImage" width="248" height="214"/>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>

高斯模糊图像 - iOS 8

2 个答案: