Colin Colin - 1 month ago 5
iOS Question

iOS: how to scale up image nicely?

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:

small preview image

Magnified, it looks like this:

large preview image

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

chrome blurred image

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

uiimageview scaled image

... 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:

lanczos scaled image

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:

visual effect blur

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

enter image description here


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

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

XCPlaygroundPage.currentPage.liveView = view