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"/>


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