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!
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