PhoneGap+Jquery mobile開發攝像頭調用和本地數據庫使用的示例
例子設計
我們一般注冊都有一個,上傳圖像的模塊,以前,用電腦注冊的話,這個頭像就比較麻煩了,不過,我們用手機的話就基本沒這個問題了,這個例子就是,使用phonegap 調用攝像頭拍下我們的頭像,上傳到服務器,然后,也保存到本地里面,方便加載.
原型設計:
顯示用的主頁
調用拍照的頁面
為了,突顯出我們用jqm的好處的,增加一個swip事件來控制,頁面的切換
代碼編寫
1,寫個模板,方便,我們以后的代碼的重用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--自適應界面,如果出現,在某些設備出現界面偏小的話,檢查一下有沒有加入這句 --> <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width"> <!--樣式--> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /> <!--end--> <!--導入的js框架--> <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> <script src="jquery.mobile/jquery-1.6.4.min"></script> <script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script> <!--end--> <!--自己寫的js--> <script type="text/javascript"> </script> <!--end--> </head> <body onload="init();"> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello,World</h1> </div> <div data-role="content" id="content"> <h1>content</h1> </div> <div data-role="footer"> <h1>footer</h1> </div> </div> <!--import custom library --> <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script> <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script> <!--end--> </body> </html>
2,模板寫好了,就開始我們實際代碼的編寫吧.
1,首先,編寫我們的device.js文件進行對應用的初始化工作
function init() { document.addEventListener("deviceready", onDeviceReady, true); }
2,然后接著寫初始化用干的事情
var onDeviceReady = function() { console.log("deviceready event fired"); // api-camera Photo URI pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; //這里是初始化主頁,如果,已經有頭像的話,就加載 var saveImage = kget("image"); if(saveImage){ //console.log("have image"+saveImage); var cameraImage = document.getElementById('cameraImage'); cameraImage.style.visibility = 'visible'; cameraImage.src = "data:image/jpeg;base64," + saveImage; } //系統的事件,按需求實現自己的回調方法,這里就默認了.. document.addEventListener("searchbutton", onSearchKeyDown, false); document.addEventListener("menubutton", onMenuButtonDown, false); document.addEventListener("pause", onEventFired, false); document.addEventListener("resume", onEventFired, false); document.addEventListener("online", onEventFired, false); document.addEventListener("offline", onEventFired, false); document.addEventListener("backbutton", onEventFired, false); document.addEventListener("batterycritical", onEventFired, false); document.addEventListener("batterylow", onEventFired, false); document.addEventListener("batterystatus", onEventFired, false); document.addEventListener("startcallbutton", onEventFired, false); document.addEventListener("endcallbutton", onEventFired, false); document.addEventListener("volumedownbutton", onEventFired, false); document.addEventListener("volumeupbutton", onEventFired, false); };
這樣我們的devices.js就簡單的寫完了.
3,寫UI界面,這里也很簡單
<body> <div data-role="page" id="home"> <div data-role="header"> <h1>個人信息</h1> <a href="#setting" data-icon="home" id="intro" class="ui-btn-right">設置</a> </div> <div data-role="content" id="homeContent"> <p>頭像</p> <img id="cameraImage" src="" /> <!--這一塊的動態實現你會圖片的讀取和存儲,這個就很簡單了..這里就不做介紹了..--> <p>名字:阿柴</p> <p>聯系方式:xxxxx</p> </div> </div> <div data-role="page" id="setting"> <div data-role="header"> <h1>頭像設置</h1> </div> <div data-role="settingContent"> <p>頭像</p> <img id="settingImage" src="" /> <div class="ui-grid-a"> <div class="ui-block-a"><div data-role="button" id="takePhoto">take photo</div></div> <div class="ui-block-b"> <div data-role="button" id="upload">upload</div></div> </div> </div> </div> <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script> <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script> </body>
上面就是頁面的代碼,就兩個DIV的page,學過,jqm的朋友應該對此毫無壓力了...
4,開始寫點jqm的事件js,寫在模板那個head,自己的那個塊里面
<script type="text/javascript"> //在頁面初始化的時候,利用phonegap初始化我們的應用 $('body').live("pageinit",function(){ init(); }); //為頁面添加swip 事件 $("#home").live("pageinit",function(){ //當我們向左滑動的時候,進入setting頁面 $('#homeContent').bind("swipeleft",function(){ $.mobile.changePage('#setting', { transition: "fade"}); }); }); $('#setting').live("pageinit",function(){ //顯示頭像圖片 var saveImage = kget("image"); if(saveImage){ //console.log("have image"+saveImage); var cameraImage = document.getElementById('settingImage'); cameraImage.style.visibility = 'visible'; cameraImage.src = "data:image/jpeg;base64," + saveImage; } //當我們向右滑動的時候,回到主頁 $('#settingContent').bind("swiperight",function(){ $.mobile.changePage('#home',{ transition: "fade"}); }); //進行拍照 $('#takePhoto').bind("tap",function(){ take_pic(); }); }); </script>
這塊代碼的就要有一點熟悉jqm的人寫好了,有啥不懂的先看一下jqm的官方文檔吧...
5,寫了這么久,都沒怎么用到phonegap,接下來就是phonegap大展身手的時刻到了..
phonegap的照片類型
還記得我們在devices.js定義的兩個變量嗎?
//這個是設置圖片是調用攝像頭還是，本機相冊，默認是調用攝像頭 //更多參見官方文檔 pictureSource=navigator.camera.PictureSourceType; //這個是,當phonegap 獲取圖片的時候,我們希望獲取的是路徑?還是 //給予base64編碼的圖像格式 destinationType=navigator.camera.DestinationType;以上就是等下,可能要用到的參數介紹
新建一個camera.js,
function take_pic() { navigator.camera.getPicture(onPhotoDataSuccess, function(ex) { alert("Camera Error!"); }, { //這里的更多設置參數參見官方文檔 quality : 50, targetWidth: 320, targetHeight: 240, //用data_url,而不用file_url的原因是,file_url在不同平臺有差異 //不好編寫,而用data_url就可以不考慮這個,加上,拍張圖片,不要太好的話,就幾十k存到數據庫里面也沒多慢.. destinationType:destinationType.DATA_URL }); }
function onPhotoDataSuccess(imageData) { console.log("* * * onPhotoDataSuccess"); var cameraImage = document.getElementById('cameraImage'); cameraImage.style.visibility = 'visible'; //把圖片存進數據庫里面 kset("image",imageData); cameraImage.src = "data:image/jpeg;base64," + imageData; }
接下來,新建一個storage.js,用來簡單封裝storage的api
function kset(key, value){ console.log("key"+key+"value"+value); window.localStorage.setItem(key, value); } function kget(key){ console.log(key); return window.localStorage.getItem(key); } function kremove(key){ window.localStorage.removeItem(key); } function kclear(){ window.localStorage.clear(); } //測試更新方法 function kupdate(key,value){ window.localStorage.removeItem(key); window.localStorage.setItem(key, value); }以上就是這次的內容了．
本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！