相机 - Camera

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

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)

结束

现在我们已经准备好了获得照片的代码,在下面的视频里,我们去添加一个触发这个获取照片动作的按钮,再把获取到的照片显示在应用的界面上 ...

相机 - Camera《 PhoneGap 基础 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点