Hybrid App开发之PhoneGap框架之Camera摄像头

论产品设计与程序猿的矛盾是怎么来的

产品：Web版的调用相册与摄像头就做成跟APP版的一致就行，需求很明了吧？
我（程序猿）：不行，这实现不了。
产品：这有啥实现不了的？APP能实现Web就实现不了吗？
我：不能，做不到，浏览器没有提供那样的API接口，巴拉巴拉。
产品：一脸懵逼，技术不行还怪人浏览器，傻逼。。。
我：一脸不屑，啥都不懂还怪我技术不行，傻逼。。。

---

今天收到一个任务，做网页版的访问相册和摄像头，哈哈，当然上面只是我自己YY的一个场景。
调查了一下午，没什么成果，虽说经过验证，在Android5.0的小米2手机的Chrome浏览器下，使用

是可以成功调出手机摄像头的，但是仍与设计不符，设计要的是访问手机的相册，而不是访问摄像头。（这也着实让我震惊了，我一直以为浏览器是不支持手机硬件访问的，所以才出现了PhoneGap这类的框架；没想到竟然可以访问摄像头，而随后测试发现，去掉accept和capture属性后，弹窗可以选择相机， 本地视频，本地音乐，图库等好多选项，证明H5的input标签已经很厉害了！）

accept的属性：

accept取值	用法说明
默认值为空	接受所有类型的文件。
audio/*	接受所有的声音文件。
video/*	接受所有的视频文件。
image/*	接受所有的图像文件。

capture的属性：

capture取值	用法说明
camera	调用系统照相机
camcorder	摄像机
microphone	录音

以上不同对浏览器支持，表现差异很大，用的时候请慎重考虑。
iOS6以前的系统不支持input中的file

---

上面是调查时候总结的，接下来介绍一下题目讲到的PhoneGap框架里的Camera对象的两个主要方法：
1⃣️camera.getPicture 拍照获取相册图片
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
cameraSuccess：提供图像数据的onSuccess 回调函数。
cameraError：提供错误信息的 onError回调函数。
cameraOptions：定制摄像头设置的可选参数
2⃣️camera.cleanup 清除拍照后设备的缓存图片
navigator.camera.cleanup( cameraSuccess, cameraError );
当我们使用如下参数的时候会产生临时文件,这时候使用这个方法会及时的清楚临时文件.
Camera.sourceType = Camera.PictureSourceType.CAMERA and Camera.destinationType = Camera.DestinationType.FILE_URI

---

camera.getPicture函数打开设备的默认摄像头应用程序，使用户可以拍照（如果 Camera.sourceType 设置为 Camera.PictureSourceType.CAMERA，这也是默认值）
一旦拍照结束，摄像头应用程序会关闭并恢复用户应用程序。
如果Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY或Camera.PictureSourceType.SAVEDPHOTOALBUM，系统弹出照片选择对话框，用户可以从相集中选择照片。
返回值会按照用户通过cameraOptions参数所设定的下列格式之一发送给cameraSuccess回调函数：
一个字符串，包含Base64编码的照片图像（默认情况）。
一个字符串，表示在本地存储的图像文件位置。

下面着重介绍第三个参数【cameraOptions】（对象）:
一般格式如下：

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

1⃣️quality : 存储图像的质量，范围是[0,100]。
2⃣️destinationType : 选择返回数据的格式。

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

3⃣️sourceType : 设定图片来源。

Camera.PictureSourceType = {   
    PHOTOLIBRARY : 0,   
    CAMERA : 1,   
    SAVEDPHOTOALBUM : 2   
}   

4⃣️allowEdit : 在选择图片进行操作之前允许对其进行简单编辑。(只有ios支持，在Android中忽略此参数)
5⃣️encodingType : 选择返回图像文件的编码方式

Camera.EncodingType = {   
    JPEG : 0, // 返回JPEG格式图片   
    PNG : 1 // 返回PNG格式图片   
}

6⃣️targetWidth : 以像素为单位的图像缩放宽度指定图片展示的时候的宽度 (数字类型)
targetHeight : 以像素为单位的图像缩放高度指定图片展示的时候的高度 (数字类型)
⚠️targetWidth与targetHeight必须同时使用

7⃣️saveToPhotoAlbum : 拍完照片后是否将图像保存在设备上的相册 (Bool类型)
8⃣️mediaType : 设置选择媒体的类型

Camera.MediaType = {
    PICTURE: 0,    // allow selection of still pictures only. DEFAULT. Will return format specified via DestinationType
    VIDEO: 1,      // allow selection of video only, WILL ALWAYS RETURN FILE_URI
    ALLMEDIA : 2   // allow selection from all media types
}

9⃣️cameraDirection : 选择前置摄像头还是后置摄像头

Camera.Direction = {
    BACK : 0,      // Use the back-facing camera
    FRONT : 1      // Use the front-facing camera
}

可以在成功获取图片回调函数中这样写：

function onSuccess(imageURI){
     var image=document.getElementById('myImage');//你必须确保你的HTML中存在ID为myImage的DOM节点
     image.src=imageURI;
} 

PhoneGap 官方API：
http://www.phonegap100.com/doc/cordova_camera_camera.md.html#Camera