Android应用开发之使用PhoneGap(cordova)实现拍照上传功能
来源:互联网 发布:mysql语言 编辑:程序博客网 时间:2024/05/16 11:11
在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习了phonegap Android环境的搭建以及phonegap获取位置信息自动上报等,本篇在之前的基础上,我们继续进行PhoneGap Android应用的开发,通过PhoneGap调用摄像头实现拍照自动上传的功能。
整体的学习思路大概是这样:index.html中提供三个按钮,分别是【拍照】、【本地图片】、【拍照上传】,主要是以下三个步骤:
点击【拍照】按钮,调用摄像头拍照,成功后在按钮右侧显示相应的图片;
点击【本地图片】按钮,调用本地图片库,选择图片后在按钮右侧显示选择的图片;
点击【拍照上传】按钮,调用摄像头拍照,成功后首先上传图片到服务器端后,上传成功后提醒,并在按钮右侧显示上传的图片。
初始的html文件,大致是这样,简单的进行了布局和javascript代码的编写,如下:
<!
DOCTYPE
html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"initial-scale=1.0, user-scalable=no"
/>
<
script
type
=
"text/javascript"
charset
=
"utf-8"
src
=
"../js/cordova.js"
></
script
>
<
script
type
=
"text/javascript"
charset
=
"utf-8"
src
=
"../js/jquery-1.7.1.min.js"
></
script
>
<
title
>Hello PhoneGap</
title
>
<
script
type
=
"text/javascript"
>
function loadImage() {
//拍照并显示在屏幕
}
function loadImageLocal() {
//获取本地图片并显示在屏幕
};
function loadImageUpload() {
//拍照上传并显示在屏幕
};
</
script
>
</
head
>
<
body
>
<
h1
>Hello PhoneGap</
h1
>
<
p
>
<
input
type
=
"button"
value
=
"拍照"
onclick
=
"loadImage();"
/>
<
img
src
=
""
id
=
"getImage"
style
=
"display: none;width: 120px;height: 120px;"
/>
</
p
>
<
p
>
<
input
type
=
"button"
value
=
"本地图片"
onclick
=
"loadImageLocal();"
/>
<
img
src
=
""
id
=
"getImageLocal"
style
=
"display: none;width: 120px;height: 120px;"
/>
</
p
>
<
p
>
<
input
type
=
"button"
value
=
"拍照上传"
onclick
=
"loadImageUpload();"
/>
<
img
src
=
""
id
=
"getImageUpload"
style
=
"display: none;width: 120px;height: 120px;"
/>
</
p
>
</
body
>
</
html
>
首先,我们来实现【拍照】的功能,调用摄像头拍照,并显示,phonegap提供了一些camera的API,通过调用navigator.camera.getPicture(cameraSuccess,cameraError,[cameraOptions])方法,我们可以简单的实现拍照功能,三个参数分别对应拍照成功、拍照失败和拍照参数选项,我们定义onLoadImageSuccess,onLoadImageFail作为拍照成功或失败的回调函数,cameraOptions 我们定义了最主要的destinationType来区分图片来自于拍照还是图片库,这里定义为{destinationType: Camera.DestinationType.DATA_URL},其他的参数定义请参见API或查阅源码,完整的js如下:
function
loadImage() {
//拍照并显示在屏幕
navigator.camera.getPicture(onLoadImageSuccess, onLoadImageFail, {destinationType: Camera.DestinationType.DATA_URL});
}
//拍照成功后回调
function
onLoadImageSuccess(imageURI) {
//这里的图片经过了base64编码
var
src =
"data:image/jpeg;base64,"
+ imageURI;
$(
"#getImage"
).attr(
"src"
, src);
$(
"#getImage"
).show();
}
//所有获取图片失败都回调此函数
function
onLoadImageFail(message) {
navigator.notification.alert(
"拍照失败,原因:"
+ message,
null
,
"警告"
);
}
接下来运行module,在手机上点击【拍照】按钮,我们就可以调用摄像头拍照,并在屏幕上显示拍的照片,第一步的工作已经完成,接下来实现从本地图片库获取图片,与第一步主要是 cameraOptions 的 不同,需要额外的添加sourceType图片资源类型为sourceType: Camera.PictureSourceType.PHOTOLIBRARY,即来自本地图片库,另外,我们修改下destinationType: Camera.DestinationType.FILE_URI,返回完整的图片路径,同时定义相应的 onLoadImageLocalSuccess,失败的回调还是onLoadImageFail,相应的js代码如下:
function
loadImageLocal() {
//获取本地图片并显示在屏幕
navigator.camera.getPicture(onLoadImageLocalSuccess, onLoadImageFail, {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
}
//本地图片选择成功后回调此函数
function
onLoadImageLocalSuccess(imageURI) {
$(
"#getImageLocal"
).attr(
"src"
, imageURI);
$(
"#getImageLocal"
).show();
}
这样,第二步的功能也已经实现,比较简单,接下来,最重要的一点,我们实现第三步的【拍照上传】功能,与第一步的功能较为类似,主要是在图片拍照成功后,对图片进行上传处理,这里同样指定destinationType: Camera.DestinationType.FILE_URI,相应的js代码如下:
function
loadImageUpload() {
//拍照上传并显示在屏幕
navigator.camera.getPicture(onLoadImageUploadSuccess, onLoadImageFail, {
destinationType: Camera.DestinationType.DATA_URL
});
}
//图片拍照成功后回调此函数
function
onLoadImageUploadSuccess(imageURI) {
//此处执行文件上传的操作,上传成功后执行下面代码
$(
"#getImageLocalUpload"
).attr(
"src"
, imageURI);
$(
"#getImageLocalUpload"
).show();
navigator.notification.alert(
"文件上传成功!"
,
null
,
"提醒"
);
}
本功能的关键是执行上传部分的代码,phonegap提供了FileUploadOptions和FileTransfer,通过FileTransfer.upload方法,同时传递options选项,进行上传的操作,也可以定义相应的成功或回调函数,完整的onLoadImageUploadSuccess代码如下:
//图片拍照成功后回调此函数
function
onLoadImageUploadSuccess(imageURI) {
//此处执行文件上传的操作,上传成功后执行下面代码
var
options =
new
FileUploadOptions();
//文件参数选项
options.fileKey =
"file"
;
//向服务端传递的file参数的parameter name
options.fileName = imageURI.substr(imageURI.lastIndexOf(
'/'
) + 1);
//文件名
options.mimeType =
"image/jpeg"
;
//文件格式,默认为image/jpeg
var
ft =
new
FileTransfer();
//文件上传类
ft.onprogress =
function
(progressEvt) {
//显示上传进度条
if
(progressEvt.lengthComputable) {
navigator.notification.progressValue(Math.round(( progressEvt.loaded / progressEvt.total ) * 100));
}
}
navigator.notification.progressStart(
"提醒"
,
"当前上传进度"
);
ft.upload(imageURI, encodeURI(
'http://192.168.0.32:8888/app/upload.jfinal'
),
function
() {
navigator.notification.progressStop();
//停止进度条
$(
"#getImageLocalUpload"
).attr(
"src"
, imageURI);
$(
"#getImageLocalUpload"
).show();
navigator.notification.alert(
"文件上传成功!"
,
null
,
"提醒"
);
},
null
, options);
}
至此,使用phonegap实现拍照上传功能已经完成,基本能够简单的通过phonegap进行Android应用的开发,下面是完成后的效果图:
完整代码地址:http://git.oschina.net/realfighter/Hello-PhoneGap/blob/master/assets/www/html/camera.
- Android应用开发之使用PhoneGap(cordova)实现拍照上传功能
- Android之cordova(原Phonegap)开发
- Android开发之拍照功能实现
- Android开发之拍照功能实现
- 如何使用HTML5开发实现拍照上传应用
- 使用HTML5开发实现拍照上传应用的方法
- phonegap/cordova开发中的分享功能
- HTML5开发实现拍照上传应用
- Android开发之拍照功能实现(附源码)
- Android开发之拍照功能实现(附源码)
- Android开发之电话短信拍照分享功能实现
- android开发之textureview绑定camera实现拍照功能
- [Phonegap+Sencha Touch] 移动开发3、使用Weinre调试PhoneGap/Cordova应用
- [Phonegap+Sencha Touch] 移动开发62 使用GapDebug调试Phonegap/Cordova应用
- HTML5 APP应用实现图片上传及拍照上传功能
- 如何使用HTML5实现拍照上传应用
- 如何使用HTML5实现拍照上传应用
- 如何使用HTML5实现拍照上传应用
- oracle初次开发问题记录
- GRE作文备考——网络审查的必要性
- adb (Android Debug Bridge) 命令行的使用方法
- 用心看世界——身边
- C#操作Excell常用方法
- Android应用开发之使用PhoneGap(cordova)实现拍照上传功能
- 肿瘤与癌症检测相关产品的生物信息分析
- [翻译]Swift编程语言——基本操作符
- andriod 三星手机拍照各种奇葩问题
- 云平台openstack中,cloudinit安装、使用
- mysql 从设置只读
- Node.js Express 使用 在Mac电脑
- 蓝牙协议栈
- opencv学习笔记1:矩阵和图像基本操作