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

最新推荐文章于 2021-05-26 22:51:41 发布

longgangbai

最新推荐文章于 2021-05-26 22:51:41 发布

阅读量152

点赞数

分类专栏： Phonegap学习总结文章标签：数据库 javascript 移动开发 ViewUI

本文链接：https://blog.csdn.net/longgangbai/article/details/84244724

版权

Phonegap学习总结专栏收录该内容

32 篇文章 0 订阅

订阅专栏

目前项目中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>

源代码如下：