iOS: how to scale up image nicely?

Question

I'm having trouble scaling up an image in a nice way. I'm displaying an image in a UIImageView. But while the image is downloading from the server, I'd like to display a blurred version of the image. The server quickly gives me a small version of the image that looks like this:

Magnified, it looks like this:

I'd like to be able to draw it like this (which is how Chrome draws it when I scale the image up):

But when I put the image into a UIImageView and set imageview.layer.magnificationFilter to kCAFilterLinear or kCAFilterTrilinear, I get this:

... which is ugly - notice the hard bands of light and dark.

I've tried using CIFilter with CILanczosScaleTransform, and that looks promising, but I get an ugly border effect:

Well - any advice? Anybody done this nicely? I can try filters forever, thought I'd see if anybody's cracked this...

EDIT: I tried bbarnhart's suggestion. I get this - nicer, but the blur radius is too large or something:

EDIT 2: @bbarnhart, I can now get this, much closer!

Answer 1

Using the blur effect on your UIImageView might give you something closer to what you want.

let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))    
blurView.frame = yourImageView.bounds
yourImageView.addSubview(blurView)

Also check out bluuur

Update to include a playground:

import UIKit
import XCPlayground

let image = UIImage(named: "pixels")
let view = UIView(frame: CGRect(x: 0, y: 0, width: 346, height: 431))
let imageView = UIImageView(image: image)

let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .Light))
blurView.frame = imageView.bounds
imageView.addSubview(blurView)

view.addSubview(imageView)
XCPlaygroundPage.currentPage.liveView = view