web-dev-qa-db-ja.com

iOS7でぼかし効果を作成する

私は数時間後にこの質問に対する答えを探していましたが、それを理解することはできません。 「ボタン」ボタンを押したときに画像にガウスぼかし効果を追加したい。ユーザーは、画像を追加するユーザーです。

SOおよびWeb上の他の場所からのソースに基づいて「ボタン」のアクションを作成しました。動作しません。何が間違っていますか?どんなコードでも大歓迎です。私の「ボタン」アクションです:

- (IBAction)test:(id)sender {
    CIFilter *gaussianBlurFilter = [CIFilter filterWithName: @"CIGaussianBlur"];
    [gaussianBlurFilter setValue:imageView.image forKey: @"inputImage"];
    [gaussianBlurFilter setValue:[NSNumber numberWithFloat: 10] forKey: @"inputRadius"];
}

あなたが質問に答えるために私がしたことを他に必要とするなら、私に知らせてください:D

Here is my UI

26
user2891448

3つの観察:

  1. inputImageCIImageUIImageに設定する必要があります。

    [gaussianBlurFilter setValue:[CIImage imageWithCGImage:[imageView.image CGImage]] forKey:kCIInputImageKey];
    
  2. あなたがoutputImageをつかんでいるのを見ません、例えば:

    CIImage *outputImage = [gaussianBlurFilter outputImage];
    
  3. そして、あなたはおそらくそのCIImageUIImageに変換したいと思うでしょう。

だから、それをすべてまとめる:

CIFilter *gaussianBlurFilter = [CIFilter filterWithName:@"CIGaussianBlur"];
[gaussianBlurFilter setDefaults];
CIImage *inputImage = [CIImage imageWithCGImage:[imageView.image CGImage]];
[gaussianBlurFilter setValue:inputImage forKey:kCIInputImageKey];
[gaussianBlurFilter setValue:@10 forKey:kCIInputRadiusKey];

CIImage *outputImage = [gaussianBlurFilter outputImage];
CIContext *context   = [CIContext contextWithOptions:nil];
CGImageRef cgimg     = [context createCGImage:outputImage fromRect:[inputImage extent]];  // note, use input image extent if you want it the same size, the output image extent is larger
UIImage *image       = [UIImage imageWithCGImage:cgimg];
CGImageRelease(cgimg);

または、 WWDC 2013サンプルコード (有料の開発者サブスクリプションが必要)にアクセスしてiOS_UIImageEffects、その後、UIImage+ImageEffects カテゴリー。それはいくつかの新しいメソッドを提供します:

- (UIImage *)applyLightEffect;
- (UIImage *)applyExtraLightEffect;
- (UIImage *)applyDarkEffect;
- (UIImage *)applyTintEffectWithColor:(UIColor *)tintColor;
- (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage;

だから、それをぼかして画像化し、それを明るくする(その「すりガラス」効果を与える)ためにあなたはそれからできる:

UIImage *newImage = [image applyLightEffect];

興味深いことに、AppleのコードはnotCIFilterを使用しますが、むしろ vImageBoxConvolve_ARGB8888vImage高性能画像処理フレームワーク

この手法は、WWDC 2013ビデオで説明されています iOSでのEngaging UIの実装


質問はiOS 7に関するものでしたが、iOS 8では、UIViewを使用してUIBlurEffectオブジェクトにぼかし効果を追加できます。

UIVisualEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
UIVisualEffectView *effectView = [[UIVisualEffectView alloc] initWithEffect:effect];    
effectView.frame = imageView.bounds;
[imageView addSubview:effectView];
74
Rob

これはうまくいきましたが、時間がかかります。アプリの読み込み時に変換を行い、一度変換した画像を多くの場所で使用します。

このぼかし効果はiOS 8.4用です。 Swift言語。

override func viewDidLoad()
{
    super.viewDidLoad()

    var backgroundImage = self.blurImage(UIImage(named: "background.jpg")!)

    self.view.backgroundColor = UIColor(patternImage:backgroundImage)
}

func blurImage(imageToBlur:UIImage) -> UIImage
{
    var gaussianBlurFilter = CIFilter(name: "CIGaussianBlur")
    gaussianBlurFilter.setValue(CIImage(CGImage: imageToBlur.CGImage), forKey:kCIInputImageKey)

    var inputImage = CIImage(CGImage: imageToBlur.CGImage)

    var outputImage = gaussianBlurFilter.outputImage
    var context = CIContext(options: nil)
    var cgimg = context.createCGImage(outputImage, fromRect: inputImage.extent())

    return UIImage(CGImage: cgimg)!
}
4
MB_iOSDeveloper

CIFilterの入力は、CIImageではなくUIImageである必要があります。

1
rjstelling

Swift 4UIImage拡張子を強制的に展開せずに:

extension UIImage {
    /// Applies a gaussian blur to the image.
    ///
    /// - Parameter radius: Blur radius.
    /// - Returns: A blurred image.
    func blur(radius: CGFloat = 6.0) -> UIImage? {
        let context = CIContext()
        guard let inputImage = CIImage(image: self) else { return nil }

        guard let clampFilter = CIFilter(name: "CIAffineClamp") else { return nil }
        clampFilter.setDefaults()
        clampFilter.setValue(inputImage, forKey: kCIInputImageKey)

        guard let blurFilter = CIFilter(name: "CIGaussianBlur") else { return nil }
        blurFilter.setDefaults()
        blurFilter.setValue(clampFilter.outputImage, forKey: kCIInputImageKey)
        blurFilter.setValue(radius, forKey: kCIInputRadiusKey)

        guard let blurredImage = blurFilter.value(forKey: kCIOutputImageKey) as? CIImage,
            let cgImage = context.createCGImage(blurredImage, from: inputImage.extent) else { return nil }

        let resultImage = UIImage(cgImage: cgImage, scale: scale, orientation: imageOrientation)
        return resultImage
    }
}

背景スレッドの画像をぼかすことを強くお勧めします。

let image = UIImage(named: "myImage")
DispatchQueue.global(qos: .userInitiated).async {
    let blurredImage = image.blur()
    DispatchQueue.main.async {
        self.myImageView.image = blurredImage
    }
}
1
Andrey Gordeev

Swift 2.

UIImageViewの拡張を作成します。 (File-New-File-Empty Swift File -Name it Extensions。)

import Foundation
import UIKit

extension UIImageView{

 //Method 1
 func makeBlurImage(targetImageView:UIImageView?)
 {
  let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
  let blurEffectView = UIVisualEffectView(effect: blurEffect)
  blurEffectView.frame = targetImageView!.bounds

  blurEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] // for supporting device rotation
  targetImageView?.addSubview(blurEffectView)
 }
 //Method 2
 func convertToBlurImage(imageToBlur:UIImage) -> UIImage
 {
  let gaussianBlurFilter = CIFilter(name: "CIGaussianBlur")
  gaussianBlurFilter!.setValue(CIImage(CGImage: imageToBlur.CGImage!), forKey:kCIInputImageKey)

  let initialImage = CIImage(CGImage: imageToBlur.CGImage!)

  let finalImage = gaussianBlurFilter!.outputImage
  let finalImagecontext = CIContext(options: nil)

  let finalCGImage = finalImagecontext.createCGImage(finalImage!, fromRect: initialImage.extent)
  return UIImage(CGImage: finalCGImage)
 }
}

使用法:

方法1を使用する:

override func viewDidLoad() {
  super.viewDidLoad()

  let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325))
  let sampleImage:UIImage = UIImage(named: "ic_120x120")!
  sampleImageView.image =  sampleImage

  //Convert To Blur Image Here
  sampleImageView.makeBlurImage(sampleImageView)

  self.view.addSubview(sampleImageView)
 }

方法2を使用する:

   override func viewDidLoad() {
      super.viewDidLoad()

      let sampleImageView = UIImageView(frame: CGRectMake(0, 200, 300, 325))
      let sampleImage:UIImage = UIImage(named: "ic_120x120")!

      //Convert to Blurred Image Here
      let sampleImage2 =  sampleImageView.convertToBlurImage(sampleImage)
      sampleImageView.image =  sampleImage2

      self.view.addSubview(sampleImageView)
     }
0
A.G

以下は画像ぼかしの拡張機能です

Swift

extension UIImage {

    public func blurImage(radius: CGFloat) -> UIImage {

        let inputImage = CIImage(image: self)!

        let parameters: [String:Any] = [
            kCIInputRadiusKey: radius,
            kCIInputImageKey: inputImage
        ]
        let filter = CIFilter(name: "CIGaussianBlur",
                              withInputParameters: parameters)!

        let cgimg = CIContext().createCGImage(filter.outputImage!, from: inputImage.extent)
        return UIImage(cgImage: cgimg!)
    }

}
0
Alex Shubin