Skip to content
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Fx Studio
  • Home
  • Code
  • iOS & Swift
  • Combine
  • RxSwift
  • SwiftUI
  • Flutter & Dart
  • Tutorials
  • Art
  • Blog
Written by chuotfx on January 7, 2020

Loading images from URL

Tutorials

Contents

  • Chuẩn bị
  • Cách 1: Data Content
  • Cách 2: URLSession
  • Cách 3: Data Content with Dispatch
  • Cách 4: Extension
  • Tạm kết

Chào bạn đến với Fx Studio.

Bài viết này là một tutorial nhỏ, hướng dẫn việc lấy một ảnh từ một URL. Tuy chủ đề này rất rất là nhỏ, nhưng lại được rất nhiều bạn mới học iOS tìm kiếm. Và mình sẽ trình các cách cơ bản nhất.

Chuẩn bị thì bạn cần có một số kiến thức nhất định như sau:

  • Basic iOS tutorial : Connect Networking

Mọi thứ đã ổn rồi thì …

Bắt đầu thôi!

Chuẩn bị

  • MacOS 10.14.4
  • Xcode 11.0
  • Swift 5.1

Để mô tả về code thì bạn chỉ cần tạo một project đơn giản từ Xcode. Project mình có sử dụng:

  • 4 UIImageView để loading images
  • 4 function với 4 cách sử dụng khác nhau
  • 1 image url

Cách 1: Data Content

func loading1() {
        let url = URL(string: image_url)
        let data = try? Data(contentsOf: url!)

        if let imageData = data {
            let image = UIImage(data: imageData)
            imageView1.image = image
        }

    }

Đây là cách đơn giản nhất. Bạn có thể tìm thấy nhiều trên google. Cách này lấy một data là nội dung của url. Công việc của bạn là biến link ảnh (đang kiểu dữ liệu String) thành một URL.

Sau đó, sử dụng function contentOf: để lấy Data của ảnh về. Tiến hành kiểm tra dữ liệu nhận được ổn hay không.

Cuối cùng, chuyển đổi Data thành UIImage. Và gán vào thuộc tính image của UIImageView.

Nhược điểm của nó là thực thi ở Main Thread. Nếu ảnh có dung lượng lớn thì UI ứng dụng sẽ bị block.

Cách 2: URLSession

func loading2() {
        let url = URL(string: image_url)
        
        let session = URLSession.shared
        let dataTask = session.dataTask(with: url!) { (data, response, error) in
            DispatchQueue.main.async {
                if error != nil {
                    print("Error fetching the image! 😢")
                } else {
                    self.imageView2.image = UIImage(data: data!)
                }
            }
        }
            
        dataTask.resume()
    }

Vì tất cả dữ liệu đều là kiểu Data. Và ảnh lại để ở một nơi nào đó trên server. Nên áp dụng cách đơn giản nhất của bài Connect Networking, thì mình có thể dễ dàng lấy được data của ảnh. Công việc còn lại là biến đổi Data thành UIImage.

Đối tượng cần sử dụng là URLSession. Thao tác qua một DataTask.

Cách này sẽ rất hiệu quả khi bạn muốn loading/download image từ các function của delegate TableView/CollectionView hoặc sử dụng với ViewModel.

Cài đặt thêm callback để nó ngầu hơn.

func loading2(urlString: String, completion: @escaping (UIImage?) -> ()) {
        let url = URL(string: urlString)
        
        let session = URLSession.shared
        let dataTask = session.dataTask(with: url!) { (data, response, error) in
            DispatchQueue.main.async {
                if error != nil {
                    completion(nil)
                } else {
                    completion(UIImage(data: data!))
                }
            }
        }
            
        dataTask.resume()
    }

Cách dùng:

loading2(urlString: image_url) { (image) in
            if let image = image {
                self.imageView2.image = image
            }
        }

Cách 3: Data Content with Dispatch

func loading3() {
        guard let imageURL = URL(string: image_url) else { return }

        DispatchQueue.global().async {
            guard let imageData = try? Data(contentsOf: imageURL) else { return }

            let image = UIImage(data: imageData)
            DispatchQueue.main.async {
                self.imageView3.image = image
            }
        }
    }

Cách này sẽ khắc phục nhược điểm của cách 1.

  • Việc quan trọng của chúng ta cần làm là tách việc lấy dữ liệu của ảnh ra một Thread khác.
  • Việc hiển thị ảnh thì sẽ cập nhật lại ở Main Thread.

Bạn cần chú ý:

  • DispatchQueue.global() : làm việc ở background
  • DispatchQueue.main : làm việc tại Main Thread

Cách 4: Extension

extension UIImageView {
    func load(url: URL) {
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
    
    func load(urlString: String) {
        guard let url = URL(string: urlString) else { return }
        
        DispatchQueue.global().async { [weak self] in
            if let data = try? Data(contentsOf: url) {
                if let image = UIImage(data: data) {
                    DispatchQueue.main.async {
                        self?.image = image
                    }
                }
            }
        }
    }
}

Khi bạn thấy mệt mỏi vì phải viết rất nhiều dòng code và viết đi viết lại nhiều lần ở nhiều file. Tại sao không tái sử dụng chúng. Bằng cách tạo ra 1 extension của UIImageView. Ở đoạn code trên, mình viết 2 function với 2 tham số:

  • URL
  • String.

Cách loading/download tương tự như các thứ 3.

Bạn xem cách dùng của nó như thế nào?

func loading4() {
        imageView4.load(urlString: image_url)
    }

Đơn giản, nhanh, gọn, lẹ.

 

Tới đây thì bạn có thể loading/download image từ một url rồi. Bạn có thể checkout mã nguồn tại đây. Chúc bạn thành công!

Tạm kết

  • Các cách cơ bản để loading/download image từ url
  • Thao tác với Dispatch
  • Tạo extension để tái sử dụng trong project

 

FacebookTweetPinYummlyLinkedInPrintEmailShares28
Tags: api, iOS
Written by chuotfx

Hãy ngồi xuống, uống miếng bánh và ăn miếng trà. Chúng ta cùng nhau đàm đạo về đời, về code nhóe!

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Donate – Buy me a coffee!

Fan page

Fx Studio

Tags

Actor Advanced Swift api AppDistribution Asynchronous autolayout basic ios tutorial blog callback ci/cd closure collectionview combine concurrency CoreData Core Location crashlytics darkmode dart dart basic dart tour Declarative decoding delegate deploy fabric fastlane firebase flavor flutter GCD iOS mapview MVVM optional protocol rxswift Swift Swift 5.5 SwiftUI SwiftUI Notes tableview testing TravisCI unittest

Recent Posts

  • Raw String trong 10 phút
  • Dispatch Semaphore trong 10 phút
  • Tổng kết năm 2022
  • KeyPath trong 10 phút – Swift
  • Make color App Flutter
  • Ứng dụng Flutter đầu tiên
  • Cài đặt Flutter SDK & Hello world
  • Coding Conventions – người hùng hay kẻ tội đồ?
  • Giới thiệu về Flutter
  • Tìm hiểu về ngôn ngữ lập trình Dart

Archives

  • February 2023 (1)
  • January 2023 (2)
  • November 2022 (2)
  • October 2022 (1)
  • September 2022 (5)
  • August 2022 (6)
  • July 2022 (7)
  • June 2022 (8)
  • May 2022 (5)
  • April 2022 (1)
  • March 2022 (3)
  • February 2022 (5)
  • January 2022 (4)
  • December 2021 (6)
  • November 2021 (8)
  • October 2021 (8)
  • September 2021 (8)
  • August 2021 (8)
  • July 2021 (9)
  • June 2021 (8)
  • May 2021 (7)
  • April 2021 (11)
  • March 2021 (12)
  • February 2021 (3)
  • January 2021 (3)
  • December 2020 (3)
  • November 2020 (9)
  • October 2020 (7)
  • September 2020 (17)
  • August 2020 (1)
  • July 2020 (3)
  • June 2020 (1)
  • May 2020 (2)
  • April 2020 (3)
  • March 2020 (20)
  • February 2020 (5)
  • January 2020 (2)
  • December 2019 (12)
  • November 2019 (12)
  • October 2019 (19)
  • September 2019 (17)
  • August 2019 (10)

About me

Education, Mini Game, Digital Art & Life of coders
Contacts:
contacts@fxstudio.dev

Fx Studio

  • Home
  • About me
  • Contact us
  • Mail
  • Privacy Policy
  • Donate
  • Sitemap

Categories

  • Art (1)
  • Blog (22)
  • Code (4)
  • Combine (22)
  • Flutter & Dart (24)
  • iOS & Swift (86)
  • RxSwift (37)
  • SwiftUI (76)
  • Tutorials (70)

Newsletter

Stay up to date with our latest news and posts.
Loading

    Copyright © 2023 Fx Studio - All rights reserved.

    Share this ArticleLike this article? Email it to a friend!

    Email sent!