PhoneGap+jQm webapp本地化(2)-攝像頭調用和本地數據庫

時間 2019-11-07

標籤 phonegap+jqm phonegap jqm webapp 本地化攝像頭調用本地數據庫欄目無線简体版

原文原文鏈接

前言

上一章中,咱們討論了環境的配置,這本章中咱們,寫一個小模塊來貫通學習,phonegap對攝像頭的調用,已經phonegap對於拍下來的照片的處理,已經,使用本地數據庫保存咱們的數據,讓在程序從新運行的時候可以保留咱們的結果.先說明一下,爲了,減小工做量,不少地方因爲,官方文檔已經很詳細了我就可貴在描述了,若是有些地方,沒有而官方文檔也沒有的話,能夠來問我...javascript

例子設計

咱們通常註冊都有一個,上傳圖像的模塊,之前,用電腦註冊的話,這個頭像就比較麻煩了,不過,咱們用手機的話就基本沒這個問題了,這個例子就是,使用phonegap 調用攝像頭拍下咱們的頭像,上傳到服務器,而後,也保存到本地裏面,方便加載.css

原型設計:html

顯示用的主頁java

調用拍照的頁面jquery

爲了,突顯出咱們用jqm的好處的,增長一個swip事件來控制,頁面的切換android

代碼編寫

1,寫個模板,方便,咱們之後的代碼的重用web

<!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文件進行對應用的初始化工做api

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);
}

以上就是此次的內容了．

說點題外話

研究了一個星期的phonegap,因爲在家,沒學校那麼方即可以找同窗借iphone來測試應用,說下phonegap在android的體驗吧,在我手頭上一臺能在象限跑分到2000的設備,運行這個,與Java寫的應用相同的顯示,要慢不少....以目前,android 2000分以上的設備而言,我以爲還不是主流,因此,這個phonegap的應用目前而言,用來開發Iphone程序以爲還能夠,Iphone的webview性能還算能夠吧...

接下來,說下此次的例子,這個例子裏面有個比較嚴重的拖慢性能的地方,有興趣的能夠在swipe幾回之後用backbutton來猜一下,代碼的話晚些時候我整理出來在發佈吧...

下一次,估計得好久才更新這個系列了,有空的話,我專門搞個視頻,來跟你們演示一下...phonegap目前而言,作android的web native app的性能問題吧....

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。