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
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
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