iOS開發:選取&顯示GIF的方法

更新於 發佈於 閱讀時間約 8 分鐘

本篇又名:UIImagePickerController與GIF的形同陌路😂😂😂
結論就是,要選擇GIF要用新的PHPickerViewController(iOS14以上),或是其他第三方套件,UIImagePickerController會把它變成靜態截圖🤨

先準備一張可愛鴨鴨.gif

鴨鴨.gif

鴨鴨.gif


UIImagePickerController

準備一個ViewController,裡面有一個ImageView用來顯示圖片+一個Label顯示圖片的副檔名+一個按鈕開UIImagePickerController

UIImagePickerController的Delegate

extension ViewController: UIImagePickerControllerDelegate,  UINavigationControllerDelegate {
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
picker.dismiss(animated: true)
if let url = info[UIImagePickerController.InfoKey.imageURL] as? URL {
if let fileExtension = url.lastPathComponent.components(separatedBy: ".").last {
descLabel.text = "fileExtension: \(fileExtension)"
}
do {
let data = try Data(contentsOf: url)
imageView.image = UIImage(data: data)
} catch {
print(error.localizedDescription)
}
}
}

顯示選到一張jpeg檔

顯示鴨鴨.gif是一張jpeg檔

顯示鴨鴨.gif是一張jpeg檔

原因是UIImagePickerControllerdidFinishPickingMediaWithInfo 方法中,InfoKey.originalImage 返回的是被選取的照片的 UIImage。如果你選擇的是一個 GIF 檔案,originalImage 將是 GIF 的一張靜態快照而不是原始的 GIF 動畫。

另外CHATGPT説如果你想要取得原始的 GIF 檔案的 URL,你可以使用 InfoKey.imageURL

我用了還是給我截圖的jpeg

file:///private/var/mobile/Containers/Data/Application/BA887D86-726D-4D11-94BB-7DC0CB58F174/tmp/167A39CB-D85B-4F51-BDF2-2F2ABFBA4CFD.jpeg

如果要保留完整的GIF檔案,請用新出的PHPickerViewController

PHPickerViewController

開啟PHPickerViewController

@IBAction func openImagePicker(_ sender: UIButton) {
var configuration = PHPickerConfiguration()
configuration.filter = .images //只能選圖片
configuration.selectionLimit = 1 // 一次只選一張
let picker = PHPickerViewController(configuration: configuration)
picker.delegate = self
present(picker, animated: true)
}

選完圖片的Delegate

extension ViewController: PHPickerViewControllerDelegate {
func picker(_ picker: PHPickerViewController, didFinishPicking results: [PHPickerResult]) {
picker.dismiss(animated: true)
let result = results.first
guard let selectedResult = results.first else { return }
selectedResult.itemProvider.loadFileRepresentation(forTypeIdentifier: UTType.image.identifier) { (url, error) in
if let error = error {
print("Error loading file representation: \(error.localizedDescription)")
return
}
if let fileURL = url {
// 取得檔案副檔名
let fileExtension = fileURL.pathExtension
print("File Extension: \(fileExtension)")
do {
let data = try Data(contentsOf: fileURL)
DispatchQueue.main.async {
self.imageView.image = UIImage(data: data)
self.descLabel.text = "File Extension: \(fileExtension)"
}
} catch {
print(error.localizedDescription)
}
}

}
}
}


選到gif了!

選到gif了!

圖片為什麼不會動?

上面用PHPickerViewController選到的副檔名是對的,但爲什麼圖片都不會動??

因為UIImage也不支援直接播放GIF動圖XDDDDDD需要另外處理

原生不同方法處理可看大大教學

因為我們已經是iOS13以上了,就用一個最簡單的方法來做

把放圖片那段改成播放GIF動畫

 DispatchQueue.main.async {
let cfData = data as CFData
CGAnimateImageDataWithBlock(cfData, nil) { (_, cgImage, _) in
self.imageView.image = UIImage(cgImage: cgImage)
}
self.descLabel.text = "File Extension: \(fileExtension)"
}

動起來。:.゚ヽ(*´∀`)ノ゚.:。

raw-image




留言
avatar-img
留言分享你的想法!
avatar-img
Michelle Chen的沙龍
8會員
34內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
Michelle Chen的沙龍的其他內容
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
看更多
你可能也想看
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
在數位時代,視覺效果的重要性不言而喻。無論是社交媒體、影片剪輯還是網站設計,吸引人的動態內容都是不可或缺的。今天我要介紹的是一個免費又簡單,且高質量的GIF下載庫——Cliply。這個網站提供的免版稅GIF動態貼紙,不僅可愛還可用於商業使用,絕對是你創作路上的好夥伴!! Cliply是一個專為商業
Thumbnail
在數位時代,視覺效果的重要性不言而喻。無論是社交媒體、影片剪輯還是網站設計,吸引人的動態內容都是不可或缺的。今天我要介紹的是一個免費又簡單,且高質量的GIF下載庫——Cliply。這個網站提供的免版稅GIF動態貼紙,不僅可愛還可用於商業使用,絕對是你創作路上的好夥伴!! Cliply是一個專為商業
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
將圖片添加到PDF文件中可以提升內容質量,使其更具吸引力。無論您是在製作專業文件、報告或演示文稿,插入圖片都是非常重要的。以下是使用各種工具進行操作的方法
Thumbnail
iOS15推出了新的按鈕外觀設定功能,讓設定變得更加直觀。使用不同的圓角設定和圖片位置可以輕鬆創建不同風格的按鈕。另外,新的選取效果變化功能也讓按鈕設計更加靈活。本文將介紹這些新功能的使用方法和效果。
Thumbnail
iOS15推出了新的按鈕外觀設定功能,讓設定變得更加直觀。使用不同的圓角設定和圖片位置可以輕鬆創建不同風格的按鈕。另外,新的選取效果變化功能也讓按鈕設計更加靈活。本文將介紹這些新功能的使用方法和效果。
Thumbnail
GIFShift 是一個免費的 AI GIF 轉換工具,可以將 GIF 圖片轉換為動漫風格,支援輸入提示改變圖像內容,例如指定英雄電影主角來生成人物,用情緒描述更換臉部表情。無須註冊、完全免費,提供 GIPHY 搜尋功能,方便尋找素材創作新的 GIF 梗圖。
Thumbnail
GIFShift 是一個免費的 AI GIF 轉換工具,可以將 GIF 圖片轉換為動漫風格,支援輸入提示改變圖像內容,例如指定英雄電影主角來生成人物,用情緒描述更換臉部表情。無須註冊、完全免費,提供 GIPHY 搜尋功能,方便尋找素材創作新的 GIF 梗圖。
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
在這篇文章中,我們將帶領讀者深入探討數位圖片管理的核心——「連結影像」與「嵌入影像」的使用技巧。這是每位從事視覺設計、版面編排和數位藝術的創作者必須掌握的基本知識。在進行數位設計時,如何選擇這兩種不同的圖片處理方式,不僅關係到作品的最終呈現,還直接影響到工作流程的效率和靈活性。 追尋影像的軌跡
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
運用生成的AI圖像來激發視覺和創意,無論是生成素材、用在社交媒體上,這些圖像都能為你的的視覺帶來獨特的風格。
Thumbnail
Freepik除了提供素材下載外,還可以線上生成AI圖片, 圖片生成工具名為「AI Image Generator」,只需要輸入文字就能快速生成圖片,每天能免費生成 20 張圖片,還可依照自己的喜好設定不同風格、燈光、畫面尺寸等參數。
Thumbnail
Freepik除了提供素材下載外,還可以線上生成AI圖片, 圖片生成工具名為「AI Image Generator」,只需要輸入文字就能快速生成圖片,每天能免費生成 20 張圖片,還可依照自己的喜好設定不同風格、燈光、畫面尺寸等參數。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News