Camera 摄像头

优质

小牛编辑

134浏览

2023-12-01

camera 对象提供对设备默认摄像头应用程序的访问。

方法：

camera.getPicture

参数：

cameraSuccess
cameraError
cameraOptions

camera.getPicture

选择使用摄像头拍照，或从设备相册中获取一张照片。图片以base64编码的字符串或图片URI形式返回。

简单的范例：

navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );

说明：

camera.getPicture函数打开设备的默认摄像头应用程序，使用户可以拍照（如果Camera.sourceType 设置为 Camera.PictureSourceType.CAMERA，这也是默认值）。一旦拍照结束，摄像头应用程序会关闭并恢复用户应用程序。

如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。

返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：

一个字符串，包含Base64编码的照片图像（默认情况）。
一个字符串，表示在本地存储的图像文件位置。

你可以对编码的图片或URI做任何处理，例如：

通过标签渲染图片（参看后续范例）
存储为本地数据（LocalStorage，Lawnchair*等）
将数据发送到远程服务器

备注：较新的设备上使用摄像头拍摄的照片的质量是相当不错的，使用Base64对这些照片进行编码已导致其中的一些设备出现内存问题（如IPHONE4、BlackBerry Torch 9800）。因此强烈建议将“Camera.destinationType” 设为 FILE_URI。

支持的平台：

Android
BlackBerry WebWorks (OS 5.0或更高版本)
iOS

简单的范例：

拍照并获取Base64编码的图像：

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
 
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);
}

完整的范例：

<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
 
  var pictureSource;    //图片来源
  var destinationType;    //设置返回值的格式
  
  // 等待PhoneGap连接设备
  document.addEventListener("deviceready",onDeviceReady,false);
  
  // PhoneGap准备就绪，可以使用！
  function onDeviceReady() {
    pictureSource=navigator.camera.PictureSourceType;
    destinationType=navigator.camera.DestinationType;
  }
  
  // 当成功获得一张照片的Base64编码数据后被调用
  function onPhotoDataSuccess(imageData) {
  
    // 取消注释以查看Base64编码的图像数据
    // console.log(imageData);
    // 获取图像句柄
    var smallImage = document.getElementById('smallImage');
       
    // 取消隐藏的图像元素
    smallImage.style.display = 'block';
    
    // 显示拍摄的照片
    // 使用内嵌CSS规则来缩放图片
    smallImage.src = "data:image/jpeg;base64," + imageData;
  }
     
   // 当成功得到一张照片的URI后被调用
   function onPhotoURISuccess(imageURI) {
  
    // 取消注释以查看图片文件的URI
    // console.log(imageURI);
    // 获取图片句柄
    var largeImage = document.getElementById('largeImage');
     
    // 取消隐藏的图像元素
    largeImage.style.display = 'block';
  
    // 显示拍摄的照片
    // 使用内嵌CSS规则来缩放图片
    largeImage.src = imageURI;
  }
     
   // “Capture Photo”按钮点击事件触发函数
   function capturePhoto() {
 
    // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的图像
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
   }
   
   // “Capture Editable Photo”按钮点击事件触发函数
   function capturePhotoEdit() {
 
    // 使用设备上的摄像头拍照，并获得Base64编码字符串格式的可编辑图像
    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
   }
     
   //“From Photo Library”/“From Photo Album”按钮点击事件触发函数
   function getPhoto(source) {
   
       // 从设定的来源处获取图像文件URI
    navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
    destinationType: destinationType.FILE_URI,sourceType: source });
   }
 
   // 当有错误发生时触发此函数
   function onFail(mesage) {
    alert('Failed because: ' + message);
   }
  
</script>
  <button onclick="capturePhoto();">Capture Photo</button> <br>
  <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
  <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
  <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
  <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
  <img style="display:none;" id="largeImage" src="" />

cameraSuccess

提供图像数据的onSuccess回调函数。

function(imageData) {
   // 对图像进行处理
}

参数：

imageData：根据cameraOptions的设定值，为Base64编码的图像数据或图像文件的URI。（字符串类型）

范例：

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

cameraError

提供错误信息的onError回调函数。

function(message) {
   // 显示有用信息
}

参数：

message：设备本地代码提供的错误信息。（字符串类型）

cameraOptions

定制摄像头设置的可选参数。

{  quality : 75,
  destinationType : Camera.DestinationType.DATA_URL,
  sourceType : Camera.PictureSourceType.CAMERA,
  allowEdit : true,
  encodingType : Camera.EncodingType.JPEG,
  targetWidth : 100,
  targetHeight : 100};

选项：

quality：存储图像的质量，范围是[0,100]。（数字类型）

destinationType：选择返回数据的格式。通过navigator.camera.DestinationType进行定义。（数字类型）

Camera.DestinationType = {
  DATA_URL : 0,  //返回Base64编码字符串的图像数据
  FILE_URI : 1  //返回图像文件的URI
}

sourceType：设定图片来源。通过nagivator.camera.PictureSourceType进行定义。（数字类型）
```
Camera.PictureSourceType = {
  PHOTOLIBRARY : 0,
  CAMERA : 1,
  SAVEDPHOTOALBUM : 2
}
```
allowEdit：在选择图片进行操作之前允许对其进行简单编辑。（布尔类型）
EncodingType：选择返回图像文件的编码方式，通过navigator.camera.EncodingType进行定义。（数字类型）
```
Camera.EncodingType = {
  JPEG : 0,    // 返回JPEG格式图片
  PNG : 1      // 返回PNG格式图片
};
```
targetWidth：以像素为单位的图像缩放宽度，必须和targetHeight同时使用。相应的宽高比保持不变。（数字类型）
targetHeight：以像素为单位的图像缩放高度，必须和targetWidth同时使用。相应的宽高比保持不变。（数字类型）

Android 的特异情况：

忽略allowEdit参数。
Camera.PictureSourceType.PHOTOLIBRARY 或 Camera.PictureSourceType.SAVEDPHOTOALBUM 都会显示同一个相集。
Camera.EncodingType 不被支持。

BlackBerry 的特异情况：

忽略quality参数。
忽略sourceType参数。
忽略allowEdit参数。
当拍照结束后，应用程序必须有按键注入权限才能关闭本地Camera应用程序。
使用大图像尺寸，可能会导致新近带有高分辨率摄像头的型号设备无法对图像进行编码（如：Torch 9800）。

Palm 的特异情况：

忽略quality参数。
忽略sourceType参数。
忽略allowEdit参数。

iPhone 的特异情况：

为了避免部分设备上出现内存错误，quality的设定值要低于50。
当使用destinationType.FILE_URI时，使用摄像头拍摄的和编辑过的照片会存储到应用程序的Documents/tmp目录。
应用程序结束的时候，应用程序的Documents/tmp目录会被删除。如果存储空间大小非常关键的时候，开发者也可以通过navigator.fileMgr的接口来删除该目录。