Как использовать API-интерфейсы Core Image для размытия изображения, похожего на эффект `UIVisualView`?

Первое изображение ниже — это исходное изображение.
Второе изображение — это размытое изображение, реализованное с помощью Core Image API.
Третье изображение — это размытое изображение, реализованное с помощью UIVisualView.

Очевидно, что Core Image размыл изображение и уменьшил его. Больший радиус привел к более широкой белой рамке.

Вопрос. Как использовать основное изображение для создания визуального эффекта, подобного эффекту UIVisualView.

По крайней мере, как использовать Core Image для размытия изображения без белой рамки.

func blur(image: UIImage, withRadius radius: Float) -> UIImage {
    let context = CIContext(options: nil)
    let image = CIImage(image: image)

    let filter = CIFilter(name: "CIGaussianBlur")
    filter?.setValue(image, forKey: kCIInputImageKey)
    filter?.setValue(radius, forKey: "inputRadius")
    let result = filter?.outputImage
    return UIImage(cgImage: context.createCGImage(result!, from: (result?.extent)!)!)
}

Третье изображение

func addVisualEffectView() {
    let effectView = UIVisualEffectView(effect: UIBlurEffect(style:.light))
    effectView.frame = originalImageView.bounds // originalImageView is the ImageView represents the original image
    originalImageView.addSubview(effectView)
}

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

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


ios uivisualeffectview core-image
person JsW    schedule 19.12.2017    source источник
comment
У вас есть ответ. Теперь, если вам нужно лучшее объяснение того, что происходит под вещами, я рекомендую Core Image для Swift, особенно главу 3.1. Это объясняет, почему у вас белая рамка и как ее исправить — в основном, это сверточный фильтр, а края… ну, края.   -  person dfd    schedule 19.12.2017
comment
@dfd Спасибо, чувак. Я проверю.   -  person JsW    schedule 19.12.2017

Ответы (1)


arrow_upward
4
arrow_downward

Используя это, я получил эффект размытия, такой как визуальный эффект.

func blurredImage(with sourceImage: UIImage) -> UIImage {
    //  Create our blurred image
    let context = CIContext(options: nil)
    let inputImage = CIImage(cgImage: sourceImage.cgImage as! CGImage)
    //  Setting up Gaussian Blur
    var filter = CIFilter(name: "CIGaussianBlur")
    filter?.setValue(inputImage, forKey: kCIInputImageKey)
    filter?.setValue(50.0, forKey: "inputRadius")
    let result = filter?.value(forKey: kCIOutputImageKey) as? CIImage

   /*  CIGaussianBlur has a tendency to shrink the image a little, this ensures it matches 
    *  up exactly to the bounds of our original image */

    let cgImage = context.createCGImage(result ?? CIImage(), from: inputImage.extent)
    let retVal = UIImage(cgImage: cgImage!)
    return retVal
}

CIContext. Вся обработка основного образа выполняется в CIContext. Это чем-то похоже на контекст Core Graphics или OpenGL.

Вызов createCGImage(from:) в контексте с предоставленным CIImage вернет новый экземпляр CGImage.

Этот урок поможет понять:

Учебное пособие по основному образу: начало работы

Вот результат:

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

person Faysal Ahmed    schedule 19.12.2017
comment
Будет полезно всем, если вы добавите объяснение, почему CIContext.createCGImage(from:) является ключевым в этом. На самом деле, было бы неплохо сделать больше, чем предоставить код! Мы здесь, чтобы помочь, а не просто предоставить код. Кроме этого, отличный ответ. - person dfd; 19.12.2017
comment
@Файсал, спасибо! И дфд. Спасибо вам обоим. Эта проблема смущала меня в течение некоторого времени. - person JsW; 19.12.2017
comment
@dfd Может ли это быть намного больше похоже на UIVisualEffect? Независимо от того, что такое radius, размытое изображение все равно выглядит немного иначе, чем UIVisualEffect. - person JsW; 19.12.2017
comment
Вероятно, это так. Помните, что вы используете представление, созданное Apple, а не то, что вы используете API более низкого уровня для точного воспроизведения. Я вижу восемь CICategoryBlur фильтров, среди которых нет тех простых, которые вы могли бы написать сами. В вашем вопросе, кстати, никогда не говорилось о воссоздании этого размытия, а только о том, почему у вас получилась белая рамка. :-) - person dfd; 19.12.2017
comment
@dfd Хорошо. Спасибо. Но этот вопрос называется «Как использовать основное изображение для создания визуального эффекта, подобного эффекту UIVisualView». Думаю, мой английский недостаточно хорош. Приносим извинения за введение в заблуждение или недопонимание. :D - person JsW; 19.12.2017