Android應用開發之使用PhoneGap實現拍照上傳功能

時間 2019-11-06

標籤 android 應用開發使用 phonegap 實現拍照上傳功能欄目 Android 简体版

原文原文鏈接

看這裏：Android應用開發之使用PhoneGap實現拍照上傳功能
javascript

在以前的使用Intellij Idea 搭建PhoneGap Android開發環境以及Android應用開發之使用PhoneGap實現位置上報功能兩篇文章中，咱們學習了phonegap Android環境的搭建以及phonegap獲取位置信息自動上報等，本篇在以前的基礎上，咱們繼續進行PhoneGap Android應用的開發，經過PhoneGap調用攝像頭實現拍照自動上傳的功能。html

總體的學習思路大概是這樣：index.html中提供三個按鈕，分別是【拍照】、【本地圖片】、【拍照上傳】，主要是如下三個步驟：java

點擊【拍照】按鈕，調用攝像頭拍照，成功後在按鈕右側顯示相應的圖片；jquery
點擊【本地圖片】按鈕，調用本地圖片庫，選擇圖片後在按鈕右側顯示選擇的圖片；git
點擊【拍照上傳】按鈕，調用攝像頭拍照，成功後首先上傳圖片到服務器端後，上傳成功後提醒，並在按鈕右側顯示上傳的圖片。web

初始的html文件，大體是這樣，簡單的進行了佈局和javascript代碼的編寫，以下：服務器

<!DOCTYPE html>
<html>
<head>
    <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>Hello PhoneGap</title>
    <script type="text/javascript">
        function loadImage() {
            //拍照並顯示在屏幕
        }
        function loadImageLocal() {
            //獲取本地圖片並顯示在屏幕
        };
        function loadImageUpload() {
            //拍照上傳並顯示在屏幕
        };
    </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>

首先，咱們來實現【拍照】的功能，調用攝像頭拍照，並顯示，phonegap提供了一些camera的API，經過調用navigator.camera.getPicture(cameraSuccess,cameraError,[cameraOptions])方法，咱們能夠簡單的實現拍照功能，三個參數分別對應拍照成功、拍照失敗和拍照參數選項，咱們定義onLoadImageSuccess，onLoadImageFail做爲拍照成功或失敗的回調函數，cameraOptions 咱們定義了最主要的destinationType來區分圖片來自於拍照仍是圖片庫，這裏定義爲{destinationType: Camera.DestinationType.DATA_URL}，其餘的參數定義請參見API或查閱源碼，完整的js以下：app

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, "警告");
}

接下來運行module，在手機上點擊【拍照】按鈕，咱們就能夠調用攝像頭拍照，並在屏幕上顯示拍的照片，第一步的工做已經完成，接下來實現從本地圖片庫獲取圖片，與第一步主要是 cameraOptions 的不一樣，須要額外的添加sourceType圖片資源類型爲sourceType: Camera.PictureSourceType.PHOTOLIBRARY，即來自本地圖片庫，另外，咱們修改下destinationType: Camera.DestinationType.FILE_URI，返回完整的圖片路徑，同時定義相應的 onLoadImageLocalSuccess，失敗的回調仍是onLoadImageFail，相應的js代碼以下：函數

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

這樣，第二步的功能也已經實現，比較簡單，接下來，最重要的一點，咱們實現第三步的【拍照上傳】功能，與第一步的功能較爲相似，主要是在圖片拍照成功後，對圖片進行上傳處理，這裏一樣指定destinationType: Camera.DestinationType.FILE_URI，相應的js代碼以下：佈局

function loadImageUpload() {
    //拍照上傳並顯示在屏幕
    navigator.camera.getPicture(onLoadImageUploadSuccess, onLoadImageFail, {
        destinationType: Camera.DestinationType.DATA_URL
    });
}
//圖片拍照成功後回調此函數
function onLoadImageUploadSuccess(imageURI) {
    //此處執行文件上傳的操做，上傳成功後執行下面代碼
    $("#getImageLocalUpload").attr("src", imageURI);
    $("#getImageLocalUpload").show();
    navigator.notification.alert("文件上傳成功！", null, "提醒");
}

本功能的關鍵是執行上傳部分的代碼，phonegap提供了FileUploadOptions和FileTransfer，經過FileTransfer.upload方法，同時傳遞options選項，進行上傳的操做，也能夠定義相應的成功或回調函數，完整的onLoadImageUploadSuccess代碼以下：

//圖片拍照成功後回調此函數
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.0.32:8888/app/upload.jfinal'), function () {
        navigator.notification.progressStop();//中止進度條
        $("#getImageLocalUpload").attr("src", imageURI);
        $("#getImageLocalUpload").show();
        navigator.notification.alert("文件上傳成功！", null, "提醒");
    }, null, options);
}

至此，使用phonegap實現拍照上傳功能已經完成，基本可以簡單的經過phonegap進行Android應用的開發，下面是完成後的效果圖：