cordova camera插件——攝像頭插件的使用及上傳圖片

介紹

cordova提供照相機API與設備相機進行交互。

通過照相機API、我們可以拍攝或者訪問照片庫中的照片，返回圖片的base64編碼字符串或者圖片的url文件路徑。

安裝插件

需要cordova 5.0以上版本

cordova plugin add cordova-plugin-camera

通過ID安裝舊版本的cordova

cordova plugin add org.apache.cordova.camera

當然，也可以通過下載直接添加：（不穩定）

cordova plugin add https://github.com/apache/cordova-plugin-camera.git

使用方法：

這個插件定義了一個全局的navigator.camera 對象，它提供了一個API，用於拍照和從系統圖庫中選擇圖像。

雖然對象是附加到全局的navigator對象內，但是需要在deviceready事件之後纔可用。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(navigator.camera);
}

API 參考

navigator.camera.getPicture

使用camera.getPicture，可以調用設備默認的攝像頭拍照，或從設備相冊中獲取一張照片。照片將以base64編碼的字符串或圖片URI形式返回。

navigator.camera.getPicture的參數：

示例：

拍一張照片，並返回它的一個 base64 編碼的圖像：

    navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.DATA_URL
    });
    
    function onSuccess(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }

拍一張照片和返回圖像文件的位置：

navigator.camera.getPicture(onSuccess, onFail, { 
quality: 50,
        destinationType: Camera.DestinationType.FILE_URI 
    });
    
    function onSuccess(imageURI) {
        var image = document.getElementById('myImage');
        image.src = imageURI;
    }
    
    function onFail(message) {
        alert('Failed because: ' + message);
    }

namera.cleanup()

移除掉中間圖像文件是調用camera.getPicture所保存在臨時的存儲空間。

只適用於當Camera.sourceType的值=Camera.PictureSourceType.CAMERA和Camera.destinationType =Camera.DestinationType.FILE_URI。

Supported Platforms 支持平臺

· iOS

示例：

navigator.camera.cleanup(onSuccess, onFail);
function onSuccess() {
    console.log("Camera cleanup success.")
}
function onFail(message) {
    alert('Failed because: ' + message);
}

CameraError

onError 的回調函數提供了一條錯誤信息。

    function(message) {
        // Show a helpful message
    }

參數

message 消息提供的設備的本機代碼

CameraSuccess

成功訪問圖片後的回調函數，該函數的參數取值取決於destinationType的類型，如果destinationType是DATA_URI，則該參數返回Base64編碼的圖片數據；如果destinationType的FIEL_URI，則該參數返回的是圖片的URI。

不論是圖像數據或者URI，都可以通過img標籤的src屬性顯示在網頁中，

如對於圖片數據imageData，通過給src屬性賦值”data:image/jpeg:base64,”+imageData即可，

而對於圖片URI imageURI，通過給src屬性直接賦值imageURI即可。

    function(imageData) {
        // Do something with the image
    }

參數

imageData Base64 編碼進行編碼的圖像資料，或圖片文件的 URI，取決於 `cameraOptions` 效果。

示例：返回的base64設置到img標籤中

    function cameraCallback(imageData) {
        var image = document.getElementById('myImage');
        image.src = "data:image/jpeg;base64," + imageData;
    }

CameraOptions

相機設置的可選參數。

名字	類型	默認值	描述
quality	number	50	圖像的保存質量，範圍0-100，100是最大值，最高的分辨率，沒有任何壓縮損失（請注意有關該相機的分辨率信息不可用。）
destinationType	DestinationType	FILE_URI	選擇返回值的格式
sourceType	PictureSourceType	CAMERA	獲取圖片的來
allowEdit	Boolean	true	允許在選擇圖片之前進行簡單的編輯
encodingType	EncodingType	JPEG	選擇圖像的返回編碼
targetWidth	number		寬度像素用來縮放圖像。必須和targetHeight一起使用。寬高比保持不變。
targetHeight	number		高度像素用來縮放圖像。必須和targetWidth一起使用。寬高比保持不變
mediaType	MediaType	PICTURE	選擇media類型。它只適用PictureSourceType是PHOTOLIBRARY或SAVEDPHOTOALBUM
correctOrientation	Boolean		如果是橫向拍攝的照片，會自動旋轉到正確的方向
saveToPhotoAlbum	Boolean		設備拍照後的圖像是否保存的圖片庫中
popoverOptions	CameraPopoverOptions		僅ios可用，設定在ipad的popover的位置
cameraDirection	Direction	BACK	選擇前置攝像頭還是後置攝像頭

Camera.DestinationType :枚舉

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值	描述
DATA_URL	number	0	返回Base64編碼的字符串
FILE_URI	number	1	返回文件的URI(content://media/external/images/media/2 for Android)
NATIVE_URI	number	2	返回原生URI (eg. asset-library://... for iOS)

Camera.EncodingType :枚舉

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值	描述
JPEG	number	0	返回JPEG的圖片
PNG	number	1	返回PNG的圖片

Camera.MediaType :枚舉

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值	描述
PICTURE	number	0	僅允許選擇靜態影像。默認。將通過DestinationType返回指定格式
VIDEO	number	1	僅允許選擇視頻，只返回網址
ALLMEDIA	number	2	允許返回所有媒體格式

Camera.PictureSourceType :枚舉

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值	描述
PHOTOLIBRARY	number	0	從設備相冊選擇圖片
CAMERA	number	1	用攝像頭拍攝圖片
SAVEDPHOTOALBUM	number	2	從設備相冊選擇圖片（一個應該是ios一個安卓）

Camera.PopoverArrowDirection :枚舉

匹配的iOS UIPopoverArrowDirection在popover固定的箭頭位置。

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值
ARROW_UP	number	1
ARROW_DOWN	number	2
ARROW_LEFT	number	4
ARROW_RIGHT	number	8
ARROW_ANY	number	15

Camera.Direction :enum

類型：相機的靜態枚舉屬性

特性：

變量名	類型	默認值	描述
BACK	number	0	使用後置攝像頭
FRONT	number	1	使用前置攝像頭

CameraPopoverOptions

iOS特供，從iPad的系統相冊選擇圖片，指定popover的定位元素的位置箭頭方向和參數。需要注意的是popover的尺寸可以改變，以適應屏幕的箭頭和取向方向。確保指定元素位置時考慮方向變化。

變量名	類型	默認值	描述
[x]	number	0	屏幕選取框的x座標
[y]	number	32	屏幕選取框的y座標
[width]	number	320	屏幕選取框的寬度
[height]	number	480	屏幕選取框的高度
[arrowDir]	PopoverArrowDirection	ARROW_ANY	確定popover的指向

示例

示例一：使用camera插件，從圖片庫中選擇圖片，返回base64編碼字符串

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按鈕</button></div>
    <div class="line"><img id="myImage" style="height: 200px;"></img></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var _this = this;
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 打開圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                       // 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM, // 設置從圖片庫獲取
                destinationType: Camera.DestinationType.DATA_URL       // 以base64返回
            });
            function onSuccess(imageData) {
                console.log(imageData)
                _this.$$('myImage').src = "data:image/jpeg;base64," + imageData;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();

運行：

點擊按鈕，顯示相冊，選擇圖片

圖片被添加到頁面上

注意：

返回base64編碼字符串是沒有data:image/jpeg;base64,頭部的！！！

示例二：

使用camera插件，打開攝像頭拍照，返回照片的文件路徑，並顯示在頁面上

index.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <title>Hello World</title>
    <style>
        .line {
            padding: 5px;
        }
        #myImage {
            height: 200px;
        }
    </style>
</head>
<body>
<div class="app">
    <div class="line"><button id="openLabrary">按鈕</button></div>
    <div class="line"><img id="myImage"></img></div>
    <div class="line"><span id="text"></span></div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js：

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 打開圖片庫
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片質量是50
            sourceType: Camera.PictureSourceType.Camera,            // 設置從攝像頭拍照獲取
            destinationType: Camera.DestinationType.FILE_URI        // 以文件路徑返回
         });

         function onSuccess(imageURI) {
             console.log(imageURI)
             _this.$$('myImage').src = imageURI;
             _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   }
};

app.initialize();

運行：

點擊按鈕，打開照相機

拍照後會顯示一個扣扣，點擊扣扣確認拍下的照片

顯示圖片到頁面上

備註：

camera插件獲取了拍照的圖片的文件路徑並返回

續上：

通過返回的圖片文件路徑，獲取到圖片的base64編碼字符串

使用這個函數就可以把圖片轉成base64

   // 把圖片轉成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }

index.js：

var app = {
   initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
   },
   onDeviceReady: function() {
      this.receivedEvent();
   },
   $$: function(id) {
      return document.getElementById(id);
   },
   receivedEvent: function() {
      var getDomLabrary = this.$$('openLabrary');
      var _this = this;
      getDomLabrary.onclick = function() {
         // 打開圖片庫
         navigator.camera.getPicture(onSuccess, onFail, {
            quality: 50,                                            // 相片質量是50
            sourceType: Camera.PictureSourceType.Camera,            // 設置攝像頭拍照獲取
            destinationType: Camera.DestinationType.FILE_URI        // 以文件路徑返回
         });

         function onSuccess(imageURI) {
            console.log(imageURI)
            _this.$$('myImage').src = imageURI;
                _this.$$('text').innerHTML = imageURI.substr(imageURI.lastIndexOf('/')+1);

            // 轉base64
            _this.convertImgToBase64(imageURI, function(base64Img) {
               console.log(base64Img)
            });
         }

         function onFail(message) {
            alert('Failed because: ' + message);
         }
      }
   },
   // 把圖片轉成base64
   convertImgToBase64(url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
         ctx = canvas.getContext('2d'),
         img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function() {
         canvas.height = img.height;
         canvas.width = img.width;
         ctx.drawImage(img, 0, 0);
         var dataURL = canvas.toDataURL(outputFormat || 'image/png');
         callback.call(this, dataURL);
         canvas = null;
      };
      img.src = url;
   }
};

app.initialize();

注意：

拿到的base64編碼字符串是有data:image/png;base64,頭部的！！！

小結：

提供以上2種方法，獲取base64編碼字符串。

區別：

第1種方法獲取的base64編碼字符串沒有data:image/png;base64,頭部

第2種方法獲取的base64編碼字符串有data:image/png;base64,頭部

第2種方法還拿到了文件名。

示例三：

從圖庫中獲取圖片，返回圖片在系統中的路徑

index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <button id="openLabrary">按鈕</button>
            <img id="myImage" style="height: 200px;"></img>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

index.js：

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        getDomLabrary.onclick = function(){
            // 打開圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,					// 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,	// 設置從圖片庫獲取
                destinationType: Camera.DestinationType.FILE_URI	// 以文件路徑返回
            });
            function onSuccess(imageURI) {
                 console.log(imageURI)
		_this.$$('myImage').src = imageURI;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    }
};

app.initialize();

運行：

點擊按鈕，打開圖片庫，選擇圖片，顯示

續上：結合使用FileTransfer插件上傳圖片

index.js：

var app = {
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },
    onDeviceReady: function() {
        this.receivedEvent();
    },
    $$: function(id) {
        return document.getElementById(id);
    },
    receivedEvent: function(){
        var getDomLabrary = this.$$('openLabrary');
        var _this = this;
        getDomLabrary.onclick = function(){
            // 打開圖片庫
            navigator.camera.getPicture(onSuccess, onFail, {
                quality: 50,                                            // 相片質量是50
                sourceType : Camera.PictureSourceType.SAVEDPHOTOALBUM,  // 設置從圖片庫獲取
                destinationType: Camera.DestinationType.FILE_URI        // 以文件路徑返回
            });
            function onSuccess(imageURI) {
                console.log(imageURI)
                _this.$$('myImage').src = imageURI;

                // 上傳
                _this.upLoadImg(imageURI);
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
        }
    },
    // file-Transfer插件，上傳圖片文件
    upLoadImg(imageURI){
        var options = new FileUploadOptions();
        options.chunkedMode = false;
        options.fileKey = "file";
        options.fileName = imageURI.substring(imageURI.lastIndexOf('/')+1);
        options.mimeType = "image/jpeg";
        options.httpMethod = "POST";
        console.log("options=======");
        console.log(options);

        var fileTransfer = new FileTransfer();
        var successCallback = function(r){
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
        }
        var errorCallback = function (error) {
            console.log("An error has occurred: Code = " + error.code);
            console.log("upload error source " + error.source);
            console.log("upload error target " + error.target);
        }
        fileTransfer.upload(
                    imageURI,   //本地文件路徑
                    encodeURI("http:\/\/10.1.10.53:8089/oss/UploadServlet"),  //服務器上傳的路徑
                    successCallback,  //成功的回調
                    errorCallback,    //失敗的回調
                    options);         //配置項
    }
};

app.initialize();

運行：

點擊按鈕，打開圖片庫，選擇圖片，顯示

上傳成功

備註：

這個上傳的服務器路徑：

var SERVER = "http://10.1.10.53:8089/oss/UploadServlet"

使用了一個.jsp文件寫成的

需要查看fileTransfer插件的使用方法，可以點擊下面鏈接

http://blog.csdn.net/michael_ouyang/article/details/75305119

michael_ouyang

發佈了99 篇原創文章 · 獲贊 374 · 訪問量 149萬+

他的留言板關注

cordova camera插件——攝像頭插件的使用及上傳圖片

介紹

安裝插件

使用方法：

API 參考

navigator.camera.getPicture

navigator.camera.getPicture的參數：

示例：

namera.cleanup()

Supported Platforms 支持平臺

示例：

CameraError

參數

CameraSuccess

參數

示例：返回的base64設置到img標籤中

CameraOptions

示例

示例一：使用camera插件，從圖片庫中選擇圖片，返回base64編碼字符串

示例二：

續上：

示例三：

從圖庫中獲取圖片，返回圖片在系統中的路徑

續上：結合使用FileTransfer插件上傳圖片

cordova battery-status插件

cordova media插件

mint-ui —— picker的使用

cordova splashscreen插件

cordova device插件——獲取設備信息

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結