使用PhoneGap+Canvas實作含文字的相片

最近在測試PhoneGap的功能,所以寫了這個範例
主要是透過PhjoneGap的camera api取得相片之後,轉存到canvas物件內
在透過上傳到PHP server存檔
想學的朋友就直接看原始碼八~XD
PhoneGap version:1.3
上傳的圖片資料是使用base64字串,只要用PHP的base64解碼再轉成圖就可以做存檔的動作

-----------------------------------以下為原始碼----------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta charset="utf-8">
    <title>File Transfer Example</title>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>   
    <script type="text/javascript" charset="utf-8">    
    var pictureSource;   // 圖片來源
    var destinationType; //設定回傳的圖片資源類型
    var imageURI; //圖片URI資源
    var GPSText; //GPS文字
    var img = new Image();//DOM圖片元件
    //監聽Phonegap裝置準備完成事件
    document.addEventListener("deviceready", onDeviceReady, false);       
    //PhoneGap準備完成
    function onDeviceReady() {    
     //設定圖片來源
    pictureSource=navigator.camera.PictureSourceType;       
    //設定回傳圖片資源類型
      destinationType=navigator.camera.DestinationType;     
      //取得GPS座標
      navigator.geolocation.getCurrentPosition(onGPSSuccess, onGPSError); 
    }
    //取得GPS座標並產生文字
    function onGPSSuccess(position) {
            var element = document.getElementById('geolocation');       
            element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +                           
            'Longitude: '          + position.coords.longitude             + '<br />' +                           
            'Altitude: '           + position.coords.altitude              + '<br />' +                           
            'Accuracy: '           + position.coords.accuracy              + '<br />' +                           
            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +                           
            'Heading: '            + position.coords.heading               + '<br />' +                           
            'Speed: '              + position.coords.speed                 + '<br />' +                           
            'Timestamp: '          + new Date(position.timestamp)          + '<br />';   
            GPSText = "緯度:" + position.coords.latitude + "經度" + position.coords.longitude;
    }   
    //GPS座標取得失敗 
    function onGPSError(error) {
            alert('code: '    + error.code    + '\n' + 'message: ' + error.message + '\n');  
            GPSText = "GPS尚未定位";
    }   
    //拍照
    function capturePhoto() {
     //使用裝置的相機拍照並存成base64編碼字串
     navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });   
    }
    //拍照完成,儲存相片資訊並顯示預覽
    function onPhotoDataSuccess(imageData) {          
      //除錯模式,使用log顯示圖片編碼字串
      //console.log(imageData);     
      //取得預覽圖片物件
      var largeImage = document.getElementById('largeImage');  
      //使用CSS開啟預覽圖片的顯示
      largeImage.style.display = 'block';    
      //顯示圖片
      largeImage.src = "data:image/jpeg;base64," + imageData;       
      //img圖片資源
      img.src = "data:image/jpeg;base64," + imageData;       
    }   
    //拍照失敗  
    function onFail(message) {     
     alert('Failed because: ' + message);   
    }        
    //繪製GPS文字到Canvas畫布上    
  function drawGPSText() {
      //取得 Canvas物件
      var ctx = document.getElementById('canvas').getContext('2d');
      //繪製拍照出來的相片到Canvas畫布上
      ctx.drawImage(img,0,0,600,480);
      //設定GPS文字格式   
      ctx.font = 'bold 14px sans-serif';
      ctx.fillStyle    = '#FFFFFF';
    ctx.textBaseline = 'top'; 
    //繪製GPS文字到Canvas畫布上
    ctx.fillText  (GPSText, 0, 450);
  }
  //傳送圖片資料到PHP Server上並存檔成png圖檔
  function sendDataToServer(){
    var img = document.getElementById('canvas').toDataURL("image/png");
    if(img != null)
     post_to_url('http://www.sbiec.com/phonegap/canvasUpload.php', {'data':img});
  }   
  /*傳送資料到http server,使用DOM建立一個空白表單傳送資料到HTTP Server
  參數:
   1.path:HTTP Server URL路徑
   2.params:參數陣列
   3.method:傳送方式 get,post
  */
  function post_to_url(path, params, method) {
    //設定預設方法為POST,GET會有200字元上限限制
      method = method || "post";

      //建立空白表單
      var form = document.createElement("form");
      //設定方法
      form.setAttribute("method", method);
      //設定URL路徑
      form.setAttribute("action", path);
     //設定參數陣列
      for(var key in params) {
         //建立隱藏欄位物件
          var hiddenField = document.createElement("input");
          //設定屬性為隱藏
          hiddenField.setAttribute("type", "hidden");
          //設定名稱
          hiddenField.setAttribute("name", key);
          //設定值
          hiddenField.setAttribute("value", params[key]);
      //將參數新增到空白表單內
          form.appendChild(hiddenField);
      }
    //將空白表單加入到網頁文件
      document.body.appendChild(form);
      //執行送出
      form.submit();
  }
    </script>
    </script>
</head>
 <body>      
 <br>
 <button onclick="capturePhoto();">From Camera</button>
 <br />      
 <button onclick="drawGPSText();">draw Image with GPS text</button>
 <br />      
 <p id="geolocation">Finding geolocation...</p> 
 <br />       
 <canvas id="canvas" width="600" height="480">Canvas is not ready.</canvas>
 <br />      
 <img style="display:none;" id="largeImage" src="" /> 
 <br />      
 <button onClick="sendDataToServer();">SendDataToServer</button>
 </body>
</html>


更新:Android 2.3 才能使用Canvas Base 64 上傳功能

PhoneGap 1.3版更新內容

1.3版主要是針對win phone做基本支援更新,其他的os則是小修正,下面是android的更新內容,可以看出來都是小更新= =||

-------------------------------------------------------------------------------------------------------------
Android

• Added download method to filetransfer
• made getEntry of FileUtils public in order to avoid duplicate code in FileTransfer
• FileTransfer returns JSONObject with code, source and target for upload and download
• Fix for CB-17: WebView caching resized pictures
• Fix for issue #281 of phonegap/phonegap-android: Detect for localStorage if Java has disabled it
• Fix for phonegap-android issue #261: Wrong application scale
• Fix for Issue #33: onReceivedError incorrectly sets openExternal to true
• Remove addWhiteList from public API
• Remove WebViewReflect.java from Android
• Fix for CB-104: Capture not returning an error code on cancel
• Changed createCaptureFile to explicitly check for PNG and to throw an IllegalArgumentException if it is not a JPEG nor a PNG
• Add support for future menu plugin
• Remove PhoneGap.stringify, replace with JSON.stringify
• Fixed: Don’t fire resume upon init – only when returning from background
• Fixed: Backbutton should go back in appview history before going back in our history stack
• Added onMessage(id, data) to the plugin API
• Deprecated addService().
• Refactored the backHistory() code so calling navigator.app.backHistory() has consistent behavior with the backbutton
• Added onload attribute to plugin in plugins.xml to create the plugin at load time instead of lazy loading
• Fixed bug with showing loadingDialog property
• Fixed Issue #23 – Crash when using splash screen
• Changed API to postMessage() to call a plugin’s onMessage() method
• Optimized enumerations

PhoneGap 1.2版

這2天到PhoneGap官網上看到PhoneGap已經更新到了1.2
還把之前還沒開發完成的功能都開發完了~~~(讚)
基本上,現在用PhoneGap開發可以把他視為完整Mobile APP 的開發SDK
因為之前的功能不完整,所以不可以視為完整的APP
看了API doc,支援Mango了~!!!不過有些功能還是要看手機有沒有支援,所以不見得全部功能都可以用~Orz

PhoneGap OpenBeta

今天收到PhoneGap的新聞稿,主要還是說他們被Adobe買走的事情,另外就是Open Beta了!!!!
最近比較少去follow他們的更新進度,不過到了Open Beta應該也完成很多新功能了八= =??
要是要用PhoneGap開發手機App,我還是建議開發比較靜態的App,過於動態的App
可能會遇到效能瓶頸~Orz

補充:PhoneGap要收費了,不過開發者is Free!!!!

Adobe收購PhoneGap

原文網址:
http://techcrunch.com/2011/10/03/adobe-acquires-developer-of-html5-mobile-app-framework-phonegap-nitobi/

Adobe的動機應該是為了吃下PhoneGap的KnowHow,這樣可以強化AIR的跨平台功能,希望會有個好AIR阿~XD

HTML5 phonegap VS. Flash AIR mobile

最近測試了Phonegap 跟 AIR mobile的效能
測試環境:
Android 2.2 Emulator
AIR版本:2.6
phoneGap版本:1.0
測試方式:
只計算FPS不做任何處理
測試結果:
Type FPS
Phonegap 15~18
AIR 60~90

結論:
AIR在效能上的確比PhoneGap好,但是在手機功能支援度上,AIR只有相機跟麥克風可以使用,PhoneGap則有GPS跟加速計等額外的手機功能可以使用,如果在開發遊戲上以AIR來開發,開發速度會比HTML5開發速度快許多,但是在一些創意功能上可能就遜色了,所以目前開發遊戲還是用AIR做好了~O~

更新:AIR已經可以支援GPS等...設備

Phonegap 1.0 release出來了

其實這篇應該要早點發的,部過因為最近在測試HTML5在mobile的效能,今天才去測試Phonegap
這次的Phonegap更新內容:
1.更容易安裝平台插件
2.在res/目錄下多了xml/plugins.xml,這個檔案官方是說可以管理插件用的
3.多了通訊錄的API
4.W3C DAB API(沒去查是什麼ˇˇ)

重點:debug!!!
聽說這版有修正開啟連結的bug,有時間再測試!!

PhoneGap學習文件

PhoneGap是一套可以用HTML5 + JavaScript開發手機應用程式的開放原始碼SDK,以下是如何開發Android APP的安裝設定及基礎使用

/********************************************************************************************************/
//    Android PhoneGap安裝設定說明文件
//    撰寫人:Matis Hsiao
//    撰寫日期:2011/07/14
//
/********************************************************************************************************/
1.Android開發環境設定:
    1.下載安裝最新版JAVA JDK,安裝Android SDK會先確認電腦的JavaSDK是不是符合需求
    2.下載最新版Google android開發SDK:
        2-1.安裝android SDK請注意安裝目錄不能有空白及中文或特殊符號   
        2-2.安裝完成後,開啟Android SDK and AVD Manager(SDK setup.exe),選擇Setting勾選Force https://…sources to be fetched using http://….
        2-3.SDK Manager可以做SDK更新或是下載新版的SDK
    3.下載安裝Eclipse:
        3-1.開啟Eclipse,選擇工具列Help中的Install New Software
        3-2.選擇Add,Name的欄位可自行輸入,該欄位是做為辨識Software用,Location請輸入http://dl-ssl.google.com/android/eclipse,選擇OK
        3-3.Eclipse會自動跟http://dl-ssl.google.com/android/eclipse取得工具目錄清單,可能會花1~2分鐘
        3-4.接著會出現Developer Tools的清單，把所有Checkbox都打勾後按下Next,之後只需一直按Next再來按Accept再按下Select All最後按下OK,便會開始自動下載更新
        3-5.選擇工具列Window-> Preferences
        3-6.打開Android標籤,在SDK Location中輸入你剛剛解壓縮Android SDK的位置後按下OK
        3-7.選擇工具列Window-> Android SDK and AVD Manager
        3-8.選擇Installed Packages標籤接著按下 Update All
        3-9.按下Accept後就可以Install,此時會花一點時間下載更新SDK
    4.建立模擬器環境:
        4-1.開啟Eclipse,選擇工具列Window-> Android SDK and AVD Manager,選擇Virtual Devices標籤,按下New建立模擬器
        4-2.Name欄位可以任意輸入英文的模擬器名稱
        4-3.Target欄位是選擇你需要的Android版本
        4-4.可以設定SD Card和螢幕外觀等詳細設定,接著按下Create AVD
        4-5.建立完成後,可以點選你剛才設定好的模擬器，按下Start->Launch,測試模擬器是否可以運作
   
2.PhoneGap開發設定:
    1.建立Android專案
    2.設定PhoneGap函式庫及網頁根目錄
      2-1.在Android專案下建立libs目錄及在assets目錄下建立www作為網頁根目錄         
        2-2.解開PhoneGap函式庫壓縮檔，選擇Android目錄，並做以下複製動作
            2-2-1.將phonegap.js複製到/assets/www/下 ,原檔名可能為phonegap.x.x.x.js,請把它改名為phonegap.js
            2-2-2.將phonegap.jar複製到/libs/下
            2-2-3.[匯入函式庫]:從Eclipse點選專案目錄右鍵更新目錄,再右鍵點選libs/phonegap.jar，選擇[Build Path」-> [Add to Bulid Path]
    3.設定Android專案使用PhoneGap為主要開發設定
        3-1.開啟android專案內的src/專案package/app.java檔案
          3-1-1.在程式碼上方加入 import com.phonegap.*; //匯入phoneGap函式庫
          3-1-2.將程式碼第7行 Class extends 名稱從Activity 改成 DroidGap
        3-1-3.將程式碼第12行 setContentView(R.layout.main);改成 super.loadUrl("file:///android_asset/www/index.html");
    4.設定AndroidMainifest.xml檔,加入欲使用的硬體功能
      4-1.右鍵點選專案中的AndroidManifest.xml，並選擇Open With -> Text Editor
      4-2.將以下的XML參數複製到<manifest xmlns:android="http://schemas.android.com/apk/res/android" .... android:versionName="1.0">之後
      <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true"
      />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      4-3.將android:configChanges="orientation|keyboardHidden"加到activity屬性內的android:label="@string/app_name"之後,如以下xml設定
          <activity android:name=".AppActivity"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
3.PhoneGap開發:
        1.網頁存放位置為/assets/www/ 可將該目錄視為網頁根目錄
        2.Hello World範例:
            <!DOCTYPE HTML>
            <html>
            <head>
            <title>Hello Inside</title>
            <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
            </head>
            <body>
            <h1>Hello World</h1>
            </body>
            </html>
        3.執行模擬器操作,右鍵點選專案選擇Run As ->Android Application,就可模擬程式           
Q&A:
        Q1.如何使用Android手機實際操作?
            A:只要電腦可以抓到Android手機驅動,則Eclipse執行模擬器時會自動將App.apk安裝到你的手機裡
        Q2.為什麼模擬器效能不好?
            A:由於模擬器是依存在Eclipse,而Eclipse本身會吃記憶體,所以模擬器模擬出來的效能會比一般Android手機來的差,建議使用Android手機實際操作
        Q3.執行模擬器發生錯誤訊息
            A:請確認Android SDK是否有設定完成
           
           
           
參考網址:
        1.Android環境建置: http://www.inside.com.tw/2010/06/17/android-setup
        2.PhoneGap環境建置:http://www.inside.com.tw/2011/01/29/hello-inside-phonegap
          備註:PhoneGap環境建置的設定參數請注意"符號,該作者的參數是用”符號,或造成設定錯誤