`
longgangbai
  • 浏览: 7340542 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

phonegap拍照的获取图片和设置问题

 
阅读更多

          目前项目中Android中第一次加载使用用户的个人图像时候,如果没有采用默认的如果有采用用户设置的。实现如下:

拍照的js代码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('settingImage');
    cameraImage.style.visibility = 'visible';
    //把图片存进数据库里面
    kset("image",imageData);
   cameraImage.src = "data:image/jpeg;base64," + imageData;
   
}

 

启动是加载的硬件js:device.js

 

function init() {  
     document.addEventListener("deviceready", onDeviceReady, true);  
} 
var onDeviceReady = function() {
    console.log("deviceready event fired");
    
 // api-camera  Photo URI
  //这个是设置图片是调用摄像头还是,本机相册,默认是调用摄像头
  //更多参见官方文档
  pictureSource=navigator.camera.PictureSourceType;
  //这个是,当phonegap 获取图片的时候,我们希望获取的是路径?还是
  //给予base64编码的图像格式
  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);
};

存储 storage.js:

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

 

html页面如下:

<!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-->
    <!--import custom library -->
	<script type="text/javascript" charset="utf-8" src="js/camera.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/device.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/storage.js"></script>
	<!--end-->

    <!--自己写的js-->
   <script type="text/javascript">
            //在页面初始化的时候,利用phonegap初始化我们的应用
            $('body').live("pageinit",function(){
               init();
            });
    
            $('#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();
                });
            });
            
            $("#btnSubmit").click(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;
                }
            });
            

        </script>
    <!--end-->
</head>
<body>
		<div data-role="page" id="home">
			<div data-role="header">
				<h1>个人信息</h1>
				<a href="#setting" data-rel="dialog" data-icon="home" id="intro" class="ui-btn-right">设置</a>
			</div>
			<div data-role="content" id="homeContent" data-theme="b">
				<p>头像</p>
				<img id="cameraImage" src="images/default.jpg"  width="100%"  height="200"/>
                <!--这一块的动态实现你会图片的读取和存储,这个就很简单了..这里就不做介绍了..-->
                <p>名字:阿柴</p>
                <p>联系方式:xxxxx</p>
			</div>
		</div>
        <div data-role="dialog" id="setting" data-overlay-theme="a"  data-theme="b" data-title="设置">
            <div data-role="header">
                <h1>头像设置</h1>
            </div>
            <div data-role="settingContent">
                <div style="text-align: center;" align="center">
                <img  align="middle" id="settingImage" src="images/default.jpg"  width="90%" height="200"/>
                </div>
                <br>
                 <div style="text-align: center;" align="center">
                   <div style="text-align: center;" align="center"><div  data-role="button" id="takePhoto">拍照</div></div>
                </div>
            </div>
            <br/>
             <fieldset class="ui-grid-a">
				<div class="ui-block-a">
				<a href="index.html" data-role="button" data-rel="back"   data-theme="c" id="btnSubmit">确定 </a> 
				</div>
				<div class="ui-block-b">
				<a href="index.html" data-role="button" data-rel="back"   data-theme="b">取消 </a> 
				</div>	   
			</fieldset>
        </div>
		<script type="text/javascript" charset="utf-8" src="js/camera.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/device.js"></script>
		<script type="text/javascript" charset="utf-8" src="js/storage.js"></script>
	</body>
</html>

 

 

源代码如下:

 

 

分享到:
评论
2 楼 gisedu 2014-08-19  
在android上图像会被拉伸,有没有好的处理办法啊?
1 楼 dweller001 2013-12-06  
感谢,可以运行,做个参考

相关推荐

    Phonegap拍照,图片保存应用

    在"PhoneGap拍照,图片保存应用"这个主题中,我们将探讨如何利用PhoneGap API调用Android设备的摄像头功能,并将拍摄的照片保存到应用内部。以下是一些关键的知识点: 1. **PhoneGap安装与配置**:首先,你需要在...

    PhoneGap-拍照上传DEMO

    开发者可以通过调用`navigator.camera.getPicture`方法,选择拍照或从相册选取图片,并获取图片的Base64编码或文件路径。 4. **图片处理**:在上传之前,可能需要对图片进行一些处理,如调整尺寸、裁剪或者压缩,以...

    phonegap拍照上传

    在"phonegap拍照上传"这个主题中,我们将探讨如何使用PhoneGap来实现在移动应用中拍照并上传到服务器的功能。这一过程通常包括以下几个关键步骤: 1. **安装和配置PhoneGap**:首先,你需要在本地环境安装PhoneGap...

    PhoneGap+Jquery+Html5从照相机和手机相册获取图片

    例如,创建一个按钮触发拍照或选图操作,并在成功获取图片后更新页面: ```html 选择图片 &lt;div id="imagePreview"&gt;&lt;/div&gt; $(document).ready(function() { $('#getPic').click(function() { navigator.camera....

    PhoneGap实例

    `camera` API则允许用户拍照或从相册选择图片。`geolocation` API可以获取设备的位置信息。这些功能在`phonegap100_apidemo`中通常会有专门的示例代码来演示如何调用和使用。 3. **文件系统访问**:通过`file` API...

    phoneGap1.0

    7. **社区和文档**:PhoneGap拥有强大的社区支持,开发者可以通过论坛、博客和教程获取帮助。不过,对于较旧的版本,文档可能不如最新版完善,因此找到可靠的资料和示例代码至关重要。 8. **性能考虑**:在PhoneGap...

    PhoneGap的API组件及使用方法

    8. **摄像头** (Camera): 通过调用`navigator.camera`,用户可以访问设备的摄像头,拍照或选择现有图片。 9. **联系人** (Contacts): `navigator.contacts`接口用于创建、读取、更新和删除联系人信息。 10. **加速...

    PhoneGap-2.9.0

    例如,通过Geolocation API获取用户的地理位置,通过Camera API拍照或选取图片,使用Accelerometer API检测设备的加速度等。 4. **PhoneGap Build**:除了本地开发环境,PhoneGap还提供了在线的PhoneGap Build服务...

    phonegap入门经典源码

    章节可能涵盖`navigator.camera.getPicture()`用于拍照或选取相册图片,以及`Media`对象用于录制和播放音频。 10. 应用生命周期管理:PhoneGap应用遵循设备的生命周期,如启动、暂停、恢复和关闭。开发者需要理解...

    最新phonegap插件集合

    1. 设备功能插件:如Camera插件,允许用户在应用内拍照或从相册选择图片;Geolocation插件,用于获取设备的地理位置信息;Accelerometer插件,用于读取设备的运动数据。 2. 用户界面插件:例如Toast插件,可以显示...

    phonegap api中文手册

    **加速度计**是PhoneGap API中的一个重要模块,用于获取设备在X、Y、Z三个方向上的物理加速度。它主要用于监测设备的物理运动,比如摇晃、倾斜等动作。 - **方法** - `accelerometer.getCurrentAcceleration()`: ...

    三、phoneGap中使用相机功能

    1. `getPicture`: 这是获取图片的主要方法,可以用来打开摄像头拍照或者从设备的相册选择图片。它接受三个参数,分别是: - `successCallback`: 图片数据(以Base64编码或文件路径)返回的回调函数。 - `...

    phonegap-调用

    // 成功获取图片后执行的回调函数 console.log('图片已拍摄:', imageUri); // 在这里可以处理图片,如显示在页面上或上传服务器 }, function(error) { // 拍照失败时执行的回调函数 console.error('拍照失败:...

    phonegap5.4.1(cordova)拍照并且上传功能的一个Android应用demo

    PhoneGap 5.4.1 是一个开源框架,它...通过这个Demo,开发者可以学习如何在PhoneGap应用中实现拍照和上传功能,同时也了解了如何在Java后端接收并处理这些上传的文件。这对于开发跨平台的移动应用具有实际指导意义。

    phonegap头像裁剪上传

    这个方法接受三个回调参数:成功处理函数、错误处理函数和配置选项,用于指定获取图片的方式(相机或相册)、图片质量、存储位置等。 2. **HTML5文件API**:获取到图片后,我们需要在前端进行裁剪操作。HTML5的...

    phonegap开发中JS与Android之间的交互

    例如,在调用设备相机拍照后,可以通过`onSuccess`和`onError`回调处理图片数据或错误。 7. **安全与性能** JS与Android交互时需要注意权限管理,确保只访问必要的设备功能。同时,频繁的跨层通信可能影响性能,...

    html5框架PhoneGap API详解笔记(ppt及word版)

    5. **相机API(Camera API)**:拍照或从图库选择图片,并进行裁剪。 6. **文件系统API(File System API)**:读写文件和目录,实现本地文件存储。 7. **通知API(Notification API)**:弹出警告框、振动设备或者...

    Phonegap API中文版

    例如,`Camera` API用于拍照或从相册选择图片,`Geolocation` API获取设备位置信息,`Accelerometer` API监测设备的运动状态。 4. **插件系统**:PhoneGap的核心API可能无法满足所有需求,但其强大的插件系统允许...

Global site tag (gtag.js) - Google Analytics