Размытие по Гауссу на изображении — iOS 8

У меня есть движущееся фоновое изображение, и я хочу размыть его нижнюю часть. Я сделал бы это с помощью простого фотошопа, но так как изображение движется, это не сработало бы очень хорошо.

Вот что я имею в виду (посмотрите на нижнюю часть изображения):

http://i.imgur.com/OT3vpeQ.png

Так что в основном это похоже на эффект, который док-станция оказывает на iPhone. Я использую iOS 8, но не Swift.


ios objective-c gaussian
person Kyle    schedule 17.09.2014    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Я сделал небольшой пример на основе фотографии, которая у вас есть. Мой алгоритм следующий:

  • Извлеките часть изображения снизу.
  • Примените к нему фильтр Гаусса и размойте.
  • Затем создайте новый контекст изображения, нарисуйте на нем исходное изображение.
  • Затем нарисуйте размытую часть изображения, чтобы разместить ее точно поверх исходного изображения.
  • Извлеките новое изображение из контекста.

Вот исходный код для этого,

 @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

А вот и скриншот результата.

введите здесь описание изображения

person Sandeep    schedule 17.09.2014
comment
Почему бы просто не использовать iOS 8 UIVisualEffectView? - person Jesse Rusak; 17.09.2014
comment
Как предлагает Джесси, проверьте: developer.apple.com/library/ios/documentation/UIKit/Reference/ - person Scott; 20.10.2014
comment
Ну, я это знаю, но сможете ли вы контролировать радиус размытия с помощью UIVisualEffectView. - person Sandeep; 20.10.2014
comment
@JesseRusak Вы не только не можете контролировать радиус, но и вынуждены делать изображение светлее или темнее .. :o - person Albert Renshaw; 09.06.2015

arrow_upward
0
arrow_downward

У 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>
person ScottyBlades    schedule 08.06.2021