对UIImage进行模糊处理以实现类似于墙纸的密码模糊处理的效果 [英] Blur UIImage to achieve effect like passcode blur of the wallpaper with swift

问题描述

我想实现密码视图具有的效果(墙纸图片模糊且较暗)

这给了我黑屏

func blurWithCoreImage(){

    var inputImage = CIImage(image: UIImage(named: "wallpaper"));

    // Apply gaussian blur filter with radius of 30
    var gaussianBlurFilter = CIFilter(name: "CIGaussianBlur");
    gaussianBlurFilter.setValue(inputImage, forKey: "inputImage")
    gaussianBlurFilter.setValue(30, forKey: "inputRadius")

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

    // Set up output context.
    UIGraphicsBeginImageContext(self.view.frame.size);
    var outputContext = UIGraphicsGetCurrentContext();

    // Invert image coordinates
    CGContextScaleCTM(outputContext, 1.0, -1.0);
    CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height);

    // Draw base image.
    CGContextDrawImage(outputContext, self.view.frame, cgImage);

    // Apply white tint
    CGContextSaveGState(outputContext);
    //  CGContextSetFillColorWithColor(outputContext, UIColor.blackColor().CGColor!);

    CGContextFillRect(outputContext, self.view.frame);
    CGContextRestoreGState(outputContext);

    // Output image is ready.
    var outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    backgroundImg.image =  outputImage;
}

此功能使图像模糊但会缩小图像，并且在密码视图中距离效果太远

func blurWithCoreImage2(){
    var ciimage = CIImage(image: UIImage(named: "passcode"))

    var filter = CIFilter(name:"CIGaussianBlur")

    filter.setDefaults()

    filter.setValue(ciimage, forKey: kCIInputImageKey)

    filter.setValue(1, forKey: kCIInputRadiusKey)

    var outputImage = filter.outputImage;

    var finalImage = UIImage(CIImage: outputImage);
    backgroundImg.image =  finalImage;
    UIGraphicsEndImageContext();

}

解决方案

由于您只需要支持iOS 8及更高版本，因此可以使用新的UIVisualEffectView，这是添加模糊的新内置方法.

它非常易于使用，类似于以下内容:

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = myFrame
self.view.addSubview(blurView)

您会看到可以指定UIBlurEffectStyle，这也会使它变暗.

I want to achieve the effect that passcode view have (the wallpaper picture is blurred and darker)

This give me a black screen

func blurWithCoreImage(){

    var inputImage = CIImage(image: UIImage(named: "wallpaper"));

    // Apply gaussian blur filter with radius of 30
    var gaussianBlurFilter = CIFilter(name: "CIGaussianBlur");
    gaussianBlurFilter.setValue(inputImage, forKey: "inputImage")
    gaussianBlurFilter.setValue(30, forKey: "inputRadius")

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

    // Set up output context.
    UIGraphicsBeginImageContext(self.view.frame.size);
    var outputContext = UIGraphicsGetCurrentContext();

    // Invert image coordinates
    CGContextScaleCTM(outputContext, 1.0, -1.0);
    CGContextTranslateCTM(outputContext, 0, -self.view.frame.size.height);

    // Draw base image.
    CGContextDrawImage(outputContext, self.view.frame, cgImage);

    // Apply white tint
    CGContextSaveGState(outputContext);
    //  CGContextSetFillColorWithColor(outputContext, UIColor.blackColor().CGColor!);

    CGContextFillRect(outputContext, self.view.frame);
    CGContextRestoreGState(outputContext);

    // Output image is ready.
    var outputImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    backgroundImg.image =  outputImage;
}

This function make the image to blur but allso shrink the image and is too far from effect in passcode view

func blurWithCoreImage2(){
    var ciimage = CIImage(image: UIImage(named: "passcode"))

    var filter = CIFilter(name:"CIGaussianBlur")

    filter.setDefaults()

    filter.setValue(ciimage, forKey: kCIInputImageKey)

    filter.setValue(1, forKey: kCIInputRadiusKey)

    var outputImage = filter.outputImage;

    var finalImage = UIImage(CIImage: outputImage);
    backgroundImg.image =  finalImage;
    UIGraphicsEndImageContext();

}

解决方案

As you only need to support iOS 8 and above you can use the new UIVisualEffectView, which is the new built-in way of adding blur.

It's very easy to use, something like the following:

let blurEffect = UIBlurEffect(style: UIBlurEffectStyle.Dark)
let blurView = UIVisualEffectView(effect: blurEffect)
blurView.frame = myFrame
self.view.addSubview(blurView)

You can see that you can specifiy a UIBlurEffectStyle, which will allow you to make it darker as well.

这篇关于对UIImage进行模糊处理以实现类似于墙纸的密码模糊处理的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！