文档章节

Android应用开发之使用PhoneGap实现拍照上传功能

Realfighter
 Realfighter
发布于 2015/02/05 16:46
字数 1438
阅读 10625
收藏 24

    看这里:Android应用开发之使用PhoneGap实现拍照上传功能

    在之前的使用Intellij Idea 搭建PhoneGap Android开发环境以及Android应用开发之使用PhoneGap实现位置上报功能两篇文章中,我们学习了phonegap Android环境的搭建以及phonegap获取位置信息自动上报等,本篇在之前的基础上,我们继续进行PhoneGap Android应用的开发,通过PhoneGap调用摄像头实现拍照自动上传的功能。

    整体的学习思路大概是这样:index.html中提供三个按钮,分别是【拍照】、【本地图片】、【拍照上传】,主要是以下三个步骤:

  1. 点击【拍照】按钮,调用摄像头拍照,成功后在按钮右侧显示相应的图片;

  2. 点击【本地图片】按钮,调用本地图片库,选择图片后在按钮右侧显示选择的图片;

  3. 点击【拍照上传】按钮,调用摄像头拍照,成功后首先上传图片到服务器端后,上传成功后提醒,并在按钮右侧显示上传的图片。

    初始的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.html   

© 著作权归作者所有

Realfighter

Realfighter

粉丝 150
博文 139
码字总数 144564
作品 2
洛阳
程序员
私信 提问
加载中

评论(3)

Realfighter
Realfighter 博主

引用来自“Mr_XieZL”的评论

你好,我在学习Android应用开发之使用PhoneGap实现拍照上传功能的时候,遇到[INFO:CONSOLE(26)] "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.", source: file:///android_asset/www/plugins/cordova-plugin-whitelist/whitelist.js (26)的错误,请问这要添加什么权限吗?
嗯的,manifest里面需要添加一些权限,完整项目地址:http://git.oschina.net/realfighter/Hello-PhoneGap/tree/master
M
Mr_XieZL
你好,我在学习Android应用开发之使用PhoneGap实现拍照上传功能的时候,遇到[INFO:CONSOLE(26)] "No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.", source: file:///android_asset/www/plugins/cordova-plugin-whitelist/whitelist.js (26)的错误,请问这要添加什么权限吗?
不喜欢敷衍
不喜欢敷衍
谢谢分享
关于跨平台移动应用开发框架的探索 -- PhoneGap

本文通过介绍移动互联网的发展,引出了跨平台移动应用开发的现状,并对当前的跨平台移动应用开发框架进行了比较。在实践环节中,本文首先使用 PhoneGap Build 将 HTML 程序发布为多移动平台的...

IBMdW
2011/11/24
3.7K
0
使用Intellij Idea 搭建PhoneGap Android开发环境

看这里:使用Intellij Idea 搭建PhoneGap Android开发环境 最近几天在学习使用phonegap进行android应用的开发,首先当然是phonegap android开发环境的搭建,网上的资料比较乱,cordova和pho...

Realfighter
2015/02/04
3.4K
4
Phonegap:快速开发跨平台HTML5应用的胶水层

在开发移动应用的过程当中,如果你的应用只定位在一种平台上,这可不是一个好主意,但是为许多不同的平台 Building应用又是一件非常麻烦和非常不爽的事情,因为你会发现每一种手机平台都有自...

红薯
2011/07/12
2.2K
3
PhoneGap+jQm webapp本地化(2)-摄像头调用和本地数据库

前言 上一章中,我们讨论了环境的配置,这本章中我们,写一个小模块来贯通学习,phonegap对摄像头的调用,已经phonegap对于拍下来的照片的处理,已经,使用本地数据库保存我们的数据,让在程序重新运...

打杂程序猿
2012/02/17
425
0
基于PhoneGap的Android应用开发-Get started

PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。 PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列...

无鸯
2011/09/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

java通过ServerSocket与Socket实现通信

首先说一下ServerSocket与Socket. 1.ServerSocket ServerSocket是用来监听客户端Socket连接的类,如果没有连接会一直处于等待状态. ServetSocket有三个构造方法: (1) ServerSocket(int port);...

Blueeeeeee
今天
6
0
用 Sphinx 搭建博客时,如何自定义插件?

之前有不少同学看过我的个人博客(http://python-online.cn),也根据我写的教程完成了自己个人站点的搭建。 点此:使用 Python 30分钟 教你快速搭建一个博客 为防有的同学不清楚 Sphinx ,这...

王炳明
昨天
5
0
黑客之道-40本书籍助你快速入门黑客技术免费下载

场景 黑客是一个中文词语,皆源自英文hacker,随着灰鸽子的出现,灰鸽子成为了很多假借黑客名义控制他人电脑的黑客技术,于是出现了“骇客”与"黑客"分家。2012年电影频道节目中心出品的电影...

badaoliumang
昨天
14
0
很遗憾,没有一篇文章能讲清楚线程的生命周期!

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 大家都知道线程是有生命周期,但是彤哥可以认真负责地告诉你网上几乎没有一篇文章讲得是完全正确的。 ...

彤哥读源码
昨天
15
0
jquery--DOM操作基础

本文转载于:专业的前端网站➭jquery--DOM操作基础 元素的访问 元素属性操作 获取:attr(name);$("#my").attr("src"); 设置:attr(name,value);$("#myImg").attr("src","images/1.jpg"); ......

前端老手
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部