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
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
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 張圖片,還可依照自己的喜好設定不同風格、燈光、畫面尺寸等參數。
Thumbnail
這一篇要測試一下Video Linear CFG Guidance這個節點,在網路上很多的教學影片跟網友分享的工作流中會看到這個節點,據說這個節點不只可以用在生成影片的工作流中,也可以使用在一般的生成圖片工作流中。
Thumbnail
這一篇要測試一下Video Linear CFG Guidance這個節點,在網路上很多的教學影片跟網友分享的工作流中會看到這個節點,據說這個節點不只可以用在生成影片的工作流中,也可以使用在一般的生成圖片工作流中。
Thumbnail
以​文字​建立​影像,有很多功能如下: 完成提示詞之後,選擇功能設定 1.模型版本:內有兩個模型 Image1屬於照片和插圖風格,Image2擬真人版風格,我還是喜歡Image2風格比較好看。 2.比例:3:4或4:3或1:1或16:9,這個有別於目前AI生圖都是1:1版型,這可以依據您想要使
Thumbnail
以​文字​建立​影像,有很多功能如下: 完成提示詞之後,選擇功能設定 1.模型版本:內有兩個模型 Image1屬於照片和插圖風格,Image2擬真人版風格,我還是喜歡Image2風格比較好看。 2.比例:3:4或4:3或1:1或16:9,這個有別於目前AI生圖都是1:1版型,這可以依據您想要使
Thumbnail
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
Thumbnail
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News