Camera 可以让我们在应用里去调用设备的相机功能去拍一张照片,或者可以在设备的相册里直接选择一张已有的照片,成功以后,得到的照片会用 base64 编码的字符串的形式,或者照片文件的地址的形式,传递给成功以后要执行的函数去处理。
比如你可以把照片显示在应用的界面上,或者上传到服务器上等等 …
camera API 有两个方法, getPicture,还有 cleanup ,这里说的方法,其实就是在对象里的函数。
下面我们使用 getPicture ,去选择在设备相册里的图片,然后再把它显示在应用的界面上 …
首先我们需要去安装一下 camera 插件 … 打开 终端工具 … 进入到应用项目所在的目录 … cd desktop/hello
phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
index.js
打开 index.js … 这里我已经事先为 app 这个对象,添加了一些空白函数 … getPhoto,onSuccess,还有 onError …
// 在设备相册里选择已有的图片
getPhoto: function(){},
// 得到图片成功以后执行的动作
onSuccess: function(){},
// 获取照片出现错误执行的动作
onError: function(){},
在这个 getPhoto 里,可以使用一个 navigator.camera.getPicture() … 调用 navigator 这个对象下面的 camera 的 getPicture() 函数 …
在它的里面我们需要再去指定三个参数 … 获取照片成功以后的函数,出现错误的函数,还有一个选项参数,这个选项是可选的参数 … 使用这些选项我们可以去定制 camera …. 比如你可以决定是使用相册拍一张新的照片,还是直接从相册里去选择 ...
app.onSuccess, app.onError, cameraOptions …
成功的时候,去执行 onSuccess … 失败的时候,使用 onError 去处理 … 相关的选项,可以放在一个叫做 cameraOptions 的对象里面 …
cameraOptions
在上面再去定义这个 cameraOptions 里的东西 … var cameraOptions = {};
这行代码就是去定义一个叫做 cameraOptions 的对象 … 在这个括号里我们需要去定义它的属性,也就是这个对象里的具体的东西 …
这些东西可以去定制相机的功能 … 下面我们先来看一下其中的两个选项 … sourceType … 还有 destinationType ..
先输入 sourceType:
这个选项可以决定是使用相机拍照,还是从相册里直接选择 … 它的值是在 Camera.PictureSourceType 里面定义的 …
Camera.PictureSourceType.PHOTOLIBRARY
它的意思就是,把 sourceType 的值设置成 Camera.PictureSourceType.PHOTOLIBRARY.. 也就是直接在相册里选择已有的图片 ...
这个 sourceType 的默认的值是 Camera.PictureSourceType.CAMERA .. 使用相机去拍一张新的照片 …
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
下面再去设置一下 destinationType: ….
这个选项是图像文件目标的类型… 其实就是照片文件的地址 … 默认它的值是基于 base64 编码的字符串 … 它会把拍的照片或者直接选择的照片转换成 base64 形式的字符串 …
照片越大,转换以后的字符就越多 … 这样的形式会占用很多内存 .. 所以推荐的做法是,使用图片文件在本地存储里的路径 …
destinationType: Camera.DestinationType.FILE_URI,
可以把它设置成 Camera.DestinationType.FILE_URI …
onSuccess
下面再去处理一下获得照片成功以后要做执行的动作 … 也就是这个 onSuccess … 我们可以把成功获取到的内容传递给这个函数去处理 …
给它添加一个 image 参数 … 这样在这个函数里 … image 就会包含获取到的内容 … 应该就是所选择的图像的地址 …
onSuccess: function(image)
在里面,我们还是简单的使用一个 console.log … 在控制台上输出这个 image …
console.log('图像的地址是:' + image)
onError
再定义一下出错以后要做的事情 … 可以把错误信息交给这个 onError …
onError: function(message)
这样 message 里面包含的就是错误信息 … 把它输出到控制台上 …
console.log(message)
结束
现在我们已经准备好了获得照片的代码,在下面的视频里,我们去添加一个触发这个获取照片动作的按钮,再把获取到的照片显示在应用的界面上 ...