Skip to content

davbeck/ImageIOSwift

BranchesTags

Repository files navigation

ImageIO.Swift

CI Status Version License Platform

ImageIO.Swift makes working with images on Apple platforms easy. It's SDWebImage, FLAnimatedImage and Concorde all in one!

  • Download images asychronously.
  • Animate GIFs, PNGs and (in iOS 13) HEICs!
  • Incrementally load interlaced and progressive JPEGs.
  • Generate thumbnails directly from the file (especially useful for HEIC images because they often embed pre-rendered thumbnails).
  • Examine image details and exif metadata.

Usage

UIKit (ImageIOUIKit)

ImageSourceView handles loading and displaying images.

// display an image downloaded from a URL
let view = ImageSourceView()
view.isAnimationEnabled = true
view.load(url)

If an image url is shown in multiple places on the same screen (like a single users profile picture on a news feed layout) it will only be downloaded and loaded into memory once. It will also be intelligently cached so that subsequent requests will re-use memory and downloaded data.

You can also set an image source directly:

let view = ImageSourceView()
view.isAnimationEnabled = true
view.imageSource = imageSource

You can access the views imageSource (regardless of whether you set it directly or loaded it from a url) and subscribe to it's didUpdateData notification to track it's download. To get updates for different animation frames, you can either subclass ImageSourceView or use KVO with displayedImage.

The UIKit module also includes extensions on ImageSource to access UIImages that are correctly orriented (a feature that CGImage doesn't account for).

Experimental: SwiftUI (ImageIOSwiftUI)

Works with iOS, macOS, watchOS and tvOS!

URLImageSourceView works a lot like an img tag in html.

// display an image downloaded from a URL
URLImageSourceView(
	url: url, 
	isAnimationEnabled: true,
	label: Text("Alt text")
)

If an image url is shown in multiple places on the same screen (like a single user's profile picture on a news feed layout) it will only be downloaded and loaded into memory once. It will also be intelligently cached so that subsequent requests will re-use memory and downloaded data.

If you want to load an image source separately, you can use ImageSourceView:

// display an image source, animating if possible
ImageSourceView(
	imageSource: imageSource,
	isAnimationEnabled: true,
	label: Text("Alt text")
)

Finally, if you want to customize how an image is rendered, you can provide your own content to either URLImageSourceView or ImageSourceView:

// places an animation progress bar at the bottom of the image
URLImageSourceView(
	url: url,
	isAnimationEnabled: true,
	label: Text("Alt text")
) { imageSource, animationFrame, label in
	StaticImageSourceView(imageSource: imageSource, animationFrame: animationFrame, label: label)
		.aspectRatio(contentMode: .fit)
		.overlay(
			Rectangle()
				.fill(Color.blue.opacity(0.5))
				.frame(height: 10)
				.relativeWidth(Length(imageSource.progress(atFrame: animationFrame))),
			alignment: .bottomLeading
		)
}

The content callback is called every time image data is updated or an animation frame changes. By default, StaticImageSourceView is used to display an image frame, and you can use it as a base for your customization.

If you want to provide a placeholder while the image loads, the recommended way to do that is with a ZStack: