PhoneGap调用摄像头

今天研究了下如何使用phonegap调用手机摄像头;写了一个小小的demo,给出部分代码仅供参考

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <script type="text/javascript" charset="utf-8" src="../js/cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="../js/jquery-1.7.1.min.js"></script>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8">
        function loadImage() {
            //拍照并显示在屏幕
            navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {destinationType: Camera.DestinationType.DATA_URL});
        }
        //拍照成功后回调
        function onLoadImageSuccess(imageURI) {
            //这里的图片经过了base64编码
            var src = "data:image/jpeg;base64," + imageURI;
            $("#getImage").attr("src", src);
            $("#getImage").show();
        }
        //所有获取图片失败都回调此函数
        function onLoadImageFail(message) {
            navigator.notification.alert("拍照失败,原因:" + message, null, "警告");
        }
        function loadImageLocal() {
            //获取本地图片并显示在屏幕
            navigator.camera.getPicture(onLoadImageLocalSuccess, onLoadImageFail, {
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: Camera.PictureSourceType.PHOTOLIBRARY
            });
        }
        //本地图片选择成功后回调此函数
        function onLoadImageLocalSuccess(imageURI) {
            $("#getImageLocal").attr("src", imageURI);
            $("#getImageLocal").show();
        }
        function loadImageUpload() {
            //拍照上传并显示在屏幕
            navigator.camera.getPicture(onLoadImageUploadSuccess, onLoadImageFail, {
                destinationType: Camera.DestinationType.FILE_URI
            });
        }
        //图片拍照成功后回调此函数
        function onLoadImageUploadSuccess(imageURI) {
            //此处执行文件上传的操作,上传成功后执行下面代码
            var options = new FileUploadOptions(); //文件参数选项
            options.fileKey = "file";//向服务端传递的file参数的parameter name
            options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);//文件名
            options.mimeType = "image/jpeg";//文件格式,默认为image/jpeg
            var ft = new FileTransfer();//文件上传类
            ft.onprogress = function (progressEvt) {//显示上传进度条
                if (progressEvt.lengthComputable) {
                    navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100));
                }
            }
            navigator.notification.progressStart("提醒", "当前上传进度");
            ft.upload(imageURI, encodeURI('http://192.168.191.1:8010/AndroidService/PersonServlet'), function () {
                navigator.notification.progressStop();//停止进度条
                $("#getImageUpload").attr("src", imageURI);
                $("#getImageUpload").show();
                navigator.notification.alert("文件上传成功!", null, "提醒");
            }, null, options);
        }
    </script>
</head>
<body>
<h1>Hello PhoneGap</h1>

<p>
    <input type="button" value="拍照" onclick="loadImage();"/>
    <img src="" id="getImage" style="display: none;width: 120px;height: 120px;"/>
</p>

<p>
    <input type="button" value="本地图片" onclick="loadImageLocal();"/>
    <img src="" id="getImageLocal" style="display: none;width: 120px;height: 120px;"/>
</p>

<p>
    <input type="button" value="拍照上传" onclick="loadImageUpload();"/>
    <img src="" id="getImageUpload" style="display: none;width: 120px;height: 120px;"/>
</p>
</body>
</html>

AndroidManifest.xml中权限的配置:

 

 <uses-permission android:name="android.permission.CAMERA"/>
    <uses-permission android:name="android.permission.VIBRATE"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.RECEIVE_SMS"/>
    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <uses-permission android:name="android.permission.RECORD_VIDEO"/>
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
    <uses-permission android:name="android.permission.READ_CONTACTS"/>
    <uses-permission android:name="android.permission.WRITE_CONTACTS"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    <uses-permission android:name="android.permission.GET_ACCOUNTS"/>
    <uses-permission android:name="android.permission.BROADCAST_STICKY"/>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章