相机插件

该插件通过全局变量navigator.camera提供了拍照,从 系统的图像库中选择图像的功能。但需要deviceready事件之后才能使用。

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

API 参考

camera

获取图片 camera.getPicture

navigator.camera.getPicture(successCallback, errorCallback, cameraOptions)

使用系统照相机或从本地相册中获取图片。图片作为一种Base64编码的字符串回调,或者作为图像文件的uri地址回调。

参数:

successCallback:成功时的回调方法

errorCallback:执行遇到错误触发的回调方法

CameraOptions:相机参数  (下文中详细介绍)

例子

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;
					document.getElementById("notice").innerHTML=JSON.stringify(imageData);
				}

				function onFail(message) {
					document.getElementById("notice").innerHTML='Failed because: ' + message;
					//alert('Failed because: ' + message);
				}


删除临时文件camera.cleanup  (该方法只适用于IOS)

删除在调用camera.getPicture方法后临时存储起来的中间图片文件。只适用于当价值camera.sourcetype等于camera.picturesourcetype.camera和camera.destinationtype等于Camera.DestinationType.FILE_URI

例子

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

camera.CameraOptions

相机参数

属性

类型

默认

描述

quality

number

50

对保存的图像质量,表示为一个范围0-100,其中100是典型的全分辨率与文件压缩没有损失。(注:关于相机的分辨率信息是不可用的。)

destinationType

destinationtype

FILE_URI

选择返回值的格式。

sourceType

picturesourcetype

CAMERA

设置图片的来源。

allowEdit

布尔Boolean

false

在选择允许图像的简单编辑。

encodingType

encodingtype

JPEG

选择返回的图像文件的编码。

targetWidth

number

 

宽度的像素灰度图像。必须使用targetHeight。纵横比不变。

targetHeight

number

 

高像素的灰度图像。必须使用targetWidth。纵横比不变。

mediaType

MediaType

PICTURE

设置选择媒体类型。只有当PictureSourceType PHOTOLIBRARY SAVEDPHOTOALBUM

correctOrientation

布尔Boolean

 

图像旋转到正确的方向在捕获装置。

saveToPhotoAlbum

布尔Boolean

 

将图像保存到设备上的相册后捕获。

popoverOptions

camerapopoveroptions

 

iOS只有选项指定弹出位置在iPad。

cameraDirection

Direction

BACK

选择相机使用(前置或后置)。

Camera

Camera.DestinationType:枚举常量

属性

类型

默认值

描述

DATA_URL

number

0

返回 base64 编码的字符串. DATA_URL 非常大的时候,容易导致应用程序奔溃或内存不足错误. 如果可能的话,使用 FILE_URI或者NATIVE_URI 

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:枚举

属性类型默认描述
JPEGnumber
0返回JPEG编码的图像
PNGnumber
1返回PNG图像编码

Camera.MediaType:枚举

属性类型默认描述
PICTURE
number
0允许选择还是图片。默认将通过指定的DestinationType格式
VIDEO
number
1允许选择的视频,只返回URL
ALLMEDIA
number
2让所有的媒体类型的选择

Camera.PictureSourceType:枚举

属性类型默认描述
PHOTOLIBRARY
number
0选择从设备的图片库中的图像(同Android的SAVEDPHOTOALBUM 
CAMERA
number
1从相机拍照
SAVEDPHOTOALBUM
number
2只有从设备的相机胶卷相册选择图像(同Android的PHOTOLIBRARY 

Camera.PopoverArrowDirection : 枚举

与iOS uipopoverarrowdirection常数指定在popover箭头位置。

NameTypeDefault
ARROW_UPnumber1
ARROW_DOWNnumber2
ARROW_LEFTnumber4
ARROW_RIGHTnumber8
ARROW_ANYnumber15

Camera.Direction 枚举

属性
类型默认描述
BACKnumber0使用后置摄像头
FRONTnumber1使用前置摄像头

CameraPopoverOptions

参数类型默认描述
[x]
number
0x像素坐标的屏幕元素上锚弹出。
[y]
number
32y像素坐标的屏幕元素上锚弹出。
[width]
number
320的宽度,以像素的屏幕元素上锚弹出。
[height]
number
480的高度,以像素的屏幕元素上锚弹出。
[arrowDir]
PopoverArrowDirection
ARROW_ANY
在popover箭头方向应指向。

camerapopoverhandle (仅支持IOS)

一个图像选择器弹出手柄。
例子
navigator.camera.getPicture(onSuccess, onFail,
{
    destinationType: Camera.DestinationType.FILE_URI,
    sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
    popoverOptions: new CameraPopoverOptions(300, 300, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY)
});
 
// Reposition the popover if the orientation changes.
window.onorientationchange = function() {
    var cameraPopoverHandle = new CameraPopoverHandle();
    var cameraPopoverOptions = new CameraPopoverOptions(0, 0, 100, 100, Camera.PopoverArrowDirection.ARROW_ANY);
    cameraPopoverHandle.setPosition(cameraPopoverOptions);
}

示例:拍照,选择图片库中的图片,并获得缩略图
在拍照之前,你需要设置一些相机的插件选项进入相机插件getpicture功能。这是一套通用的建议。在这个例子中,您创建您将使用的相机选择的对象,并设置sourcetype动态支持摄像头的应用程序和文件选择器。

function setOptions(srcType) {
    var options = {
        // Some common settings are 20, 50, and 100
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
        // In this app, dynamically set the picture source, Camera or photo gallery
        sourceType: srcType,
        encodingType: Camera.EncodingType.JPEG,
        mediaType: Camera.MediaType.PICTURE,
        allowEdit: true,
        correctOrientation: true  //Corrects Android orientation quirks
    }
    return options;
}

通常情况下,你想使用一个file_uri代替一个data_url避免大部分的内存问题。JPEG是推荐的编码类型为Android。

你拍的照片,通过在选择对象getpicture,以cameraoptions对象作为第三个参数。当你使用setOptions,可以通camera.picturesourcetype.camera作为图片来源。

function openCamera(selection) {
 
    var srcType = Camera.PictureSourceType.CAMERA;
    var options = setOptions(srcType);
    var func = createNewFileEntry;
 
    navigator.camera.getPicture(function cameraSuccess(imageUri) {
 
        displayImage(imageUri);
        // You may choose to copy the picture, save it somewhere, or upload.
        func(imageUri);
 
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
 
    }, options);
}

显示图片

function displayImage(imgUri) {
 
    var elem = document.getElementById('imageFile');
    elem.src = imgUri;
}

拍照和返回缩略图(调整图片大小)

function openCamera(selection) {
 
    var srcType = Camera.PictureSourceType.CAMERA;
    var options = setOptions(srcType);
    var func = createNewFileEntry;
 
    if (selection == "camera-thmb") {
        options.targetHeight = 100;
        options.targetWidth = 100;
    }
 
    navigator.camera.getPicture(function cameraSuccess(imageUri) {
 
        // Do something
 
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
 
    }, options);
}

选择图片库中的文件

function openFilePicker(selection) {
 
    var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
    var options = setOptions(srcType);
    var func = createNewFileEntry;
 
    navigator.camera.getPicture(function cameraSuccess(imageUri) {
 
        // Do something
 
    }, function cameraError(error) {
        console.debug("Unable to obtain picture: " + error, "app");
 
    }, options);
}

选择一个图像并返回缩略图(大小的图像)

function getFileEntry(imgUri) {
    window.resolveLocalFileSystemURL(imgUri, function success(fileEntry) {
 
        // Do something with the FileEntry object, like write to it, upload it, etc.
        // writeFile(fileEntry, imgUri);
        console.log("got file: " + fileEntry.fullPath);
        // displayFileData(fileEntry.nativeURL, "Native URL");
 
    }, function () {
      // If don't get the FileEntry (which may happen when testing
      // on some emulators), copy to a new FileEntry.
        createNewFileEntry(imgUri);
    });
}