一、cordova-plugin-camera提供照相機API與設備相機進行交互。
通過API我們可以拍攝或訪問照片庫中的照片,返回圖片的base64編碼字符串或者圖片的url文件路徑。
二.安裝命令:
cordova plugin add cordova-plugin-camera
官當文檔:
/docs/en/latest/reference/cordova-plugin-camera/index.html#module_Camera.Direction
三.API和相關對象
1.navigator.camera.getPicture(onSuccess,onError,opiotns) 從相機或圖片庫獲取
2.navigator.camera.cleanup(onSuccess,onError) 移除掉圖像文件調用camera.getPicture所保存的臨時存儲空間。
3.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 :前后攝像頭指定
特性:
變量名
類型
默認值
描述
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的指向
四、獲取圖片示例
1.從相冊獲取DATA_URL類型
navigator.camera.getPicture(onSuccess, onError, {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,//返回Base64編碼字符串
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,//指定圖片來自相冊
encodingType: Camera.EncodingType.JPEG, //指定返回圖片是png格式還是jpeg
});
function onSuccess(data) {
alert(data.length);
var result = "data:image/jpeg;base64," + data;
app.url1 = result;
document.getElementById('imgOne').src = result;
}
function onError() {
alert('獲取失敗');
}2.從拍照獲取圖片File_Uri路徑
navigator.camera.getPicture(onSuccess, onError, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,//返回FILE_URI類型
sourceType: Camera.PictureSourceType.CAMERA,//指定圖片來自拍照
cameraDirection: Camera.Direction.FRONT,//指定前后攝像頭--好像沒起作用
targetWidth: 300,
targetHeight: 300
//encodingType: Camera.EncodingType.PNG //指定返回圖片是png格式還是jpeg
});
function onSuccess(data) {
alert(data);
app.url2 = data;
document.getElementById('imgTwo').src = data;
}
function onError() {
alert('獲取失敗');
}
更多: