master2012

导航

PhoneGap+Jquery mobile开发摄像头调用和本地数据库使用的示例

http://www.open-open.com/lib/view/open1329489994405.html

例子设计

我们一般注册都有一个,上传图像的模块,以前,用电脑注册的话,这个头像就比较麻烦了,不过,我们用手机的话就基本没这个问题了,这个例子就是,使用phonegap 调用摄像头拍下我们的头像,上传到服务器,然后,也保存到本地里面,方便加载.

原型设计:

显示用的主页

PhoneGap+Jquery mobile开发摄像头调用和本地数据库使用的示例

调用拍照的页面

PhoneGap+Jquery mobile开发摄像头调用和本地数据库使用的示例 

为了,突显出我们用jqm的好处的,增加一个swip事件来控制,页面的切换

PhoneGap+Jquery mobile开发摄像头调用和本地数据库使用的示例

代码编写

1,写个模板,方便,我们以后的代码的重用

01 <!DOCTYPE html>
02  
03 <html>
04 <head>
05     <meta charset="UTF-8">
06     <!--自适应界面,如果出现,在某些设备出现界面偏小的话,检查一下有没有加入这句 -->
07     <meta http-equiv="Content-type" name="viewport"
08  
09           content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
10     <!--样式-->
11     <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" />
12     <!--end-->
13  
14     <!--导入的js框架-->
15     <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
16     <script src="jquery.mobile/jquery-1.6.4.min"></script>
17  
18     <script src="jquery.mobile/jquery.mobile-1.0.1.min.js"></script>
19     <!--end-->
20     <!--自己写的js-->
21     <script type="text/javascript">
22  
23  
24     </script>
25     <!--end-->
26 </head>
27 <body onload="init();">
28 <div data-role="page" id="home">
29  
30     <div data-role="header">
31         <h1>Hello,World</h1>
32     </div>
33     <div data-role="content" id="content">
34  
35         <h1>content</h1>
36     </div>
37     <div data-role="footer">
38         <h1>footer</h1>
39  
40     </div>
41 </div>
42  
43 <!--import custom library -->
44 <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
45  
46 <script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
47 <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
48  
49 <!--end-->
50 </body>
51 </html>

 

2,模板写好了,就开始我们实际代码的编写吧.

1,首先,编写我们的device.js文件进行对应用的初始化工作

1 function init() {
2     document.addEventListener("deviceready", onDeviceReady, true);
3 }

 

2,然后接着写初始化用干的事情

01 var onDeviceReady = function() {
02     console.log("deviceready event fired");
03      
04  // api-camera  Photo URI
05     pictureSource=navigator.camera.PictureSourceType;
06     destinationType=navigator.camera.DestinationType;
07     //这里是初始化主页,如果,已经有头像的话,就加载
08     var saveImage = kget("image");
09     if(saveImage){
10          //console.log("have image"+saveImage);
11           var cameraImage = document.getElementById('cameraImage');
12           cameraImage.style.visibility = 'visible';
13           cameraImage.src = "data:image/jpeg;base64," + saveImage;
14           
15     }
16     //系统的事件,按需求实现自己的回调方法,这里就默认了..
17     document.addEventListener("searchbutton", onSearchKeyDown, false);  
18     document.addEventListener("menubutton", onMenuButtonDown, false);
19     document.addEventListener("pause", onEventFired, false);
20     document.addEventListener("resume", onEventFired, false);
21     document.addEventListener("online", onEventFired, false);
22     document.addEventListener("offline", onEventFired, false);
23     document.addEventListener("backbutton", onEventFired, false);
24     document.addEventListener("batterycritical", onEventFired, false);
25     document.addEventListener("batterylow", onEventFired, false);
26     document.addEventListener("batterystatus", onEventFired, false);
27     document.addEventListener("startcallbutton", onEventFired, false);
28     document.addEventListener("endcallbutton", onEventFired, false);
29     document.addEventListener("volumedownbutton", onEventFired, false);
30     document.addEventListener("volumeupbutton", onEventFired, false);
31 };

 

这样我们的devices.js就简单的写完了.

3,写UI界面,这里也很简单

01 <body>
02         <div data-role="page" id="home">
03  
04             <div data-role="header">
05                 <h1>个人信息</h1>
06                 <a href="#setting" data-icon="home" id="intro" class="ui-btn-right">设置</a>
07  
08             </div>
09             <div data-role="content" id="homeContent">
10                 <p>头像</p>
11                 <img id="cameraImage" src="" />
12  
13                 <!--这一块的动态实现你会图片的读取和存储,这个就很简单了..这里就不做介绍了..-->
14                 <p>名字:阿柴</p>
15                 <p>联系方式:xxxxx</p>
16             </div>
17         </div>
18  
19         <div data-role="page" id="setting">
20             <div data-role="header">
21                 <h1>头像设置</h1>
22             </div>
23  
24             <div data-role="settingContent">
25                 <p>头像</p>
26                 <img id="settingImage" src="" />
27  
28                 <div class="ui-grid-a">
29                    <div class="ui-block-a"><div  data-role="button"id="takePhoto">take photo</div></div>
30                   <div class="ui-block-b">  <div  data-role="button" id="upload">upload</div></div>
31  
32                 </div>
33                 
34             </div>
35         </div>
36         <script type="text/javascript" charset="utf-8" src="apis/camera.js"></script>
37  
38         <script type="text/javascript" charset="utf-8" src="apis/device.js"></script>
39         <script type="text/javascript" charset="utf-8" src="apis/storage.js"></script>
40  
41     </body>

 

上面就是页面的代码,就两个DIV的page,学过,jqm的朋友应该对此毫无压力了...

4,开始写点jqm的事件js,写在模板那个head,自己的那个块里面

 

01 <script type="text/javascript">
02             //在页面初始化的时候,利用phonegap初始化我们的应用
03             $('body').live("pageinit",function(){
04                init();
05             });
06             //为页面添加swip 事件
07             $("#home").live("pageinit",function(){
08                 //当我们向左滑动的时候,进入setting页面
09                 $('#homeContent').bind("swipeleft",function(){
10                   $.mobile.changePage('#setting', { transition: "fade"});
11                 });
12  
13             });
14             $('#setting').live("pageinit",function(){
15                 //显示头像图片
16                 var saveImage = kget("image");
17                 if(saveImage){
18                     //console.log("have image"+saveImage);
19                     var cameraImage = document.getElementById('settingImage');
20                     cameraImage.style.visibility = 'visible';
21                     cameraImage.src = "data:image/jpeg;base64," + saveImage;
22  
23                 }
24                 //当我们向右滑动的时候,回到主页
25                 $('#settingContent').bind("swiperight",function(){
26                     $.mobile.changePage('#home',{ transition: "fade"});
27                 });
28                 //进行拍照
29                 $('#takePhoto').bind("tap",function(){
30                     take_pic();
31                 });
32             });
33  
34         </script>

 

这块代码的就要有一点熟悉jqm的人写好了,有啥不懂的先看一下jqm的官方文档吧...

5,写了这么久,都没怎么用到phonegap,接下来就是phonegap大展身手的时刻到了..

phonegap的照片类型

还记得我们在devices.js定义的两个变量吗?

1 //这个是设置图片是调用摄像头还是，本机相册，默认是调用摄像头
2 //更多参见官方文档
3 pictureSource=navigator.camera.PictureSourceType;
4 //这个是,当phonegap 获取图片的时候,我们希望获取的是路径?还是
5 //给予base64编码的图像格式
6 destinationType=navigator.camera.DestinationType;

以上就是等下,可能要用到的参数介绍

新建一个camera.js,

01 function take_pic() {
02     navigator.camera.getPicture(onPhotoDataSuccess, function(ex) {
03         alert("Camera Error!");
04     }, {
05     //这里的更多设置参数参见官方文档
06         quality : 50,
07     targetWidth: 320,
08     targetHeight: 240,
09     //用data_url,而不用file_url的原因是,file_url在不同平台有差异
10     //不好编写,而用data_url就可以不考虑这个,加上,拍张图片,不要太好的话,就几十k存到数据库里面也没多慢..
11     destinationType:destinationType.DATA_URL
12         });
13 }

 

1 function onPhotoDataSuccess(imageData) {
2     console.log("* * * onPhotoDataSuccess");
3     var cameraImage = document.getElementById('cameraImage');
4     cameraImage.style.visibility = 'visible';
5     //把图片存进数据库里面
6     kset("image",imageData);
7    cameraImage.src = "data:image/jpeg;base64," + imageData;
8     
9 }

 

接下来,新建一个storage.js,用来简单封装storage的api

01 function kset(key, value){
02     console.log("key"+key+"value"+value);
03     window.localStorage.setItem(key, value);
04 }
05  
06 function kget(key){
07     console.log(key);
08     return window.localStorage.getItem(key);
09 }
10  
11 function kremove(key){
12     window.localStorage.removeItem(key);
13 }
14  
15 function kclear(){
16     window.localStorage.clear();
17 }
18  
19 //测试更新方法
20 function kupdate(key,value){
21     window.localStorage.removeItem(key);
22     window.localStorage.setItem(key, value);
23 }

以上就是这次的内容了

posted on 2013-08-27 22:03  master2012  阅读(1048)  评论(1)    收藏  举报