PhoneGap:拍攝照片

PhoneGap API 讓我們可以寫程式控制手機上的硬體設備,既然如此當然少不了拍攝照片。PhoneGap APP 拍攝的照片預設會存放在系統隱藏的data資料夾裡,但是PhoneGap API的檔案存取(FileSystem)並不能讀取該資料夾裡的檔案列表。所以如果沒有把照片的路徑存起來,程式結束後就找不回這張照片了(當然有root的手機利用其它程式存取是另當別論)。所以一般來說,剛拍攝完的照片我們會複製一份到 FileSystem 的目錄底下,並且修改成我們喜歡的檔名。這樣之後只要透過 FileSystem 就可以列出 APP 曾經拍攝的所有照片。

載入 API

拍攝照片除了使用 camera 的API之外,另外還必須載入 file 的API(包含 FileSystem 與 FileTransfer),這樣才能在系統內搬移照片,並且讀取 FileSystem 目錄下的照片。另外,因為要使用 file API 的關係,device API 當然也必須載入(參考檔案存取)。

<gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.file" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.camera" />

如果不想使用 FileSystem 與 FileTransfer,讓照片僅存在data資料夾中的話,拍攝完回傳的”路徑”就必須儲存起來,才不會找不到照片。

拍攝照片



拍攝照片


首先是第 8 行必須引用 PhoneGap API 的JavaScript(參考用HTML5製作APP)。第 10-22 行完全就是檔案存取的前置動作,這裡主要是為了讓第 10 行的 filesystem 變數有內容,好讓我們可以讀取根目錄的位置。第 11 行表明 requestFS() 函數在設備準備好之後(類似onLoad)自動執行。當使用者點擊第 44 行的連結時,才會呼叫本篇的重點 getPhoto() 函數。

第 24 行是請求系統開啟相機,並且拍攝一張照片之後回傳照片的位置(重點只有這一行)。由於回傳的是檔案路徑,所以第 25 行利用自串處理取得預設的檔名。第 26 行是我們希望更改的檔案名稱(預設的是亂碼),這裡是直接套用預設檔名。第 27 行取得 Filesystem 根目錄之後,將我們打算儲存的照片路徑存到 picURL。接著,第 29-36 行就是 FileTransfer 的語法(參考檔案同步),30 行從原始路徑中下載圖片,儲存到新的路徑裡,並且呼叫成功與失敗的函式。第 37-39 行是接著 24 行的語法,分別是失敗處理與壓縮品質設定。