Android毕业设计——基于 Android+OCR+Node.js的报纸阅读器设计与实现（毕业论文+程序源码）——报纸阅读器

基于 Android+OCR+Node.js的报纸阅读器设计与实现（毕业论文+程序源码）

大家好，今天给大家介绍基于 Android+OCR+Node.js的报纸阅读器设计与实现，文章末尾附有本毕业设计的论文和源码下载地址哦。需要下载开题报告PPT模板及论文答辩PPT模板等的小伙伴，可以进入我的博客主页查看左侧最下面栏目中的自助下载方法哦

文章目录：

1、项目简介

1. 近几年来，智能手机的迅猛发展给人们的生活带来了极大的改变，移动互联网时代的来临使得人手拥有一台配置强悍的智能手机已不再是奢望。但随着社会老龄化问题的日益严重，智能手机市场对老年人市场的投入却依旧跟不上时代发展的步伐。老年人由于视力衰退，阅读报纸上的文字较为吃力，长时间戴眼镜更会加剧眼睛的疲劳状况。本设计提出了用智能手机帮助老年人阅读报纸的可能，并实现了一款基于 Android 智能手机的应用。
2. 本设计实现了一款基于安卓智能手机的报纸阅读器，具有将拍照得到的图片转成文字再朗读出来的功能，并支持报纸内容存储、音量调节、自定义朗读语言等功能，能极大缓解老年人阅读报纸时的不便。论文首先介绍了 Android 开发平台以及 Cordova 跨平台开发方案，然后详细分析了该应用的所有功能需求，再结合应用开发的基础知识，讲解了开发所需的知识点，最后给了详细的代码实现方案。

---

2、资源详情

项目难度：中等难度
适用场景：相关题目的毕业设计
配套论文字数：18004个字57页
包含内容：全套源码+配整论文
开题报告、论文答辩、课题报告等ppt模板推荐下载方式：

---

3、关键词

Android；Cordova；报纸阅读器；OCR；TTS

---

4、毕设简介

提示：以下为毕业论文的简略介绍，项目完整源码及完整毕业论文下载地址见文末。

第一章 引言

1.1 课题背景

本课题为基于智能手机的报纸阅读器。老年人大多有读书看报的喜好，但受限于视力衰退，阅读报纸上较小的文字极为吃力，时间一长容易导致眼睛不舒服等不良状况，给日常生活造成了不小的麻烦。如果有人或者使用软件能够帮助老人将报纸内容朗读出来，这个问题就可以在一定程度上得到解决。

目前在 Android 应用市场有不计其数的 APP 应用，但提供给老年人使用的却少之又少，而且普遍质量较差，并没有针对老年人的特点和使用场景进行有针对性的设计和开发。结果就是这些 APP 并没有真正解决老年人的某些痛点问题。
本课题选择Android平台作为开发平台，因其使用范围广，基数大，可使其适用性大大增加。老年人只需使用该 App 对所需要阅读的内容拍照，本应用即会将选中的内容朗读出来，解决了老年人由于新闻正文字体较小而造成的阅读不便的问题。本 App 还提供了存储功能，用户可选择将之前阅读的内容缓存起来，便于下次使用。

1.2 课题任务

本文的主要任务是介绍 Android 平台下使用 Cordova 进行的报纸阅读器应用开发。首先从整体的角度介绍了 Android 的整体架构，以及 Cordova 跨平台开发框架。然后对 Android 平台的报纸阅读器进行需求分析，设计应用的功能与业务流程。接着使用 Cordova 框架进行功能设计，描述具体实现过程。本论文旨在讲解使用 Cordava 框架进行 Android 平台应用开发的要点与过程，涉及到服务器端的功能设计，在此不会作详细的介绍。

本课题的整个设计开发过程均由本人独立完成。主要的工作包括下面几点：

1. 理解课题任务，学习应用开发所用到的开发技能，配置开发与测试环境。
2. 分析课题需求，设计业务流程，应用界面贺代码实现。
3. 测试应用，解决测试时发现的问题，总结并完成本篇论文。

1.3 内容的安排

第一章为引言，介绍课题的背景及意义，课题任务以及论文内容的安排。
第二章为开发平台和工具的简介，包括 Android 平台，Cordova 跨平台开发框架。
第三章对课题进行需求分析，介绍了老年人对报纸阅读器的功能需求，以及本应用的操作流程分析。
第四章详细介绍了本应用的各项功能，以及对业务处理流程的分析。
第五章为详细的代码实现，介绍了各项功能的界面、数据处理等各方面细节。
第六章回顾了整个开发工作的过程以及对课题未来走向的展望。

第二章 开发环境及相关技术简介

本章开始介绍开发所用到的环境和相关技术背景知识，以及选用这些技术方案的优势所在。主要介绍操作系统、开发语言、开发框架和相应的技术背景，这些构成了课题开发的基本要素。

2.1 Android简介

Android 是一个以 Linux 为基础的开放源代码的移动设备操作系统，中文称为“安卓”，目前由谷歌开发。目前 Android 已发布的最新版本为 Android 5.1.1。基于直接进行操作的用户界面，Android系统主要为支持触摸操作的移动设备如智能手机，平板电脑，电视专用用户界面（Android TV），汽车（Android Auto）和手表（Android Wear）设计。尽管该系统被主要设计用于触摸屏的操作，但它也被用在游戏机，数码相机，个人计算机和其它电子产品中。截至2015年，Android在所有通用的操作系统中拥有最大的用户群。
Android公司于2003年10月在加利福尼亚州帕洛阿尔托创办，创始人包括Andy Rubin ，Rich Miner (野火通信联合创始人)，Nick Sears 以及 Chris White。该公司早期的意图是打造一款在数码相机上运行的操作系统。但后来发现市场对此需求并没有想象中的强烈，于是公司开始把重心转移到开发智能手机操作系统上，将Android改造成了一款面向智能手机的操作系统。当时市场上的竞争对手主要有Symbian和微软的Windows Mobile这两大系统。2005年8月17日，Google收购了Android公司。在当时还少有人知道Android公司的存在，但这时Google正计划进军手机市场，并成立了一支由Andy Rubin为首的团队，专注于移动设备平台开发。
省略

2.2 Cordova简介

2.2.1 Cordova介绍
Cordova 是一款开放源代码的跨平台开发框架，旨在让开发者使用 HTML、JavsScript、CSS 等 Web API 技术来开发跨平台的 APP，即将使用HTML、CSS、JavaScript的页面封装为手机客户端应用。原本由 Nitobi 公司开发，2011年10月4月，Adobe 正式宣布收购 Nitobi 软件。Cordova 是一个 APP 设备的 API 接口集，在页面与本地设备间提供了一座桥梁，允许开发者利用 JavaScript 调用如摄像头、罗盘等硬件资源，这是一般的 Web APP所做不到的。配合一些基于 HTML5、CSS3 技术的 UI 框架，如 jQuery Mobile，开发者可以快速地开发跨平台 APP 而不需要编写任何原生代码，实现了“一次开发，到处使用”，在很大程度上降低了移动开发的门槛。此外 Cordova 还拥有丰富的插件资源，很方便的供开发者进行功能拓展。Cordova 目前支持的操作系统包括苹果的 iOS、Google 的Android、Blackberry、LG 的 WebOS、微软的 Windows Phone、三星的 Tizen和 baba、Firefox OS 和Ubuntu Touch。

Cordova 能够实现跨平台开发的原因在于移动设备上都内置了 WebView 组件，这个内置的浏览器特性是 Web 能被打包成本地客户端的基础，可以方便的使用 HTML5、CSS3 等技术进行页面布局，在开发效率上优于使用原生开发。Cordova 针对不同平台的 WebView 组件做了拓展与封装，使得 WebView 组件可以访问设备本地的 API，所以开发者在 Cordova 框架下可以通过 JavaScript 访问到设备本地的 API。

不过由于使用 Web 技术，而且 Cordova 是一个封装了很多底层细节的框架，在运行效率上要比原生的应用程序低，在频繁操作时容易造成卡顿，另外在稳定性与内存占用上也不及原生应用。还未能做到100%支持原生接口，一些功能可能会因此受到限制，有待逐步在各平台完善。因此比较适合于开发功能简单以及操作不太复杂的 APP。

2.2.2 Cordova原理简要分析
Cordova在其支持的平台上均实现了一套后台运行的框架，分别与各平台系统的API进行交互，从而调用其原生API，为开发者提供了统一的JavaScript接口。
Cordova是基于移动终端上内嵌的浏览器即WebView来渲染HTML、CSS，在Cordova中重写了WebView的onJsPrompt 方法，来捕获前端的业务请求操作，从而将Web前端与后台的Java程序连接起来。相应的，Android上的Cordova中使用Java实现了一个HTTP服务器，通过持久性的XHR连接，JavaScript可以不断轮询内部XHR服务器存储的信息，从而实现了从Java到JavaScript方向的通信。在Cordova框架首次加载时，CallbackServer线程就会启动，然后同时监听前端的XHR请求和链表中有无数据，当有XHR请求来时，若链表为空，线程会最多等待10秒，在等待过程如果链表中有数据来，会唤醒等待的线程，从而立即将链表中数据传到前端；若10秒后没有数据，则将空数据返回到前端，从而发起下一轮XHR请求。

2.3 OCR简介
2.3.1 OCR介绍
中文全称“光学字符识别”，是指印刷文字图像到机器编码文本的转换。它被广泛用作从印刷数据记录的数据录入的一种形式，适合于将护照证件，发票，银行对账单，收据，名片，邮件，或其他合适的文档转换出来。OCR在模式识别，人工智能和计算机视觉领域被广泛运用。早期的光学字符识别可以追溯到电报和为盲人阅读的而发明的技术，在当时进行OCR识别时需要预先对每个字符图像进行训练，在同一时间只能处理一种字体。现在能够进行高精度识别的OCR系统已经很常见了，有些还可以再现格式的输出，如列表等非文本部分。
省略

2.3.2 OCR识别方式介绍
与其它信息数据一样，在计算机中所有扫描仪捕捉到的图文信息都是用0、1。这两个数字来记录和进行识别的，所有信息都只是以0.1保存的一串串点或样本点。OCR识别程序识别页面上的字符信息主要通过单元模式匹配法和特征提取法两种方式进行字符识别。

单元模式匹配识别法(Pattern Matching)是将每一个字符与保存有标准字体和字号位图的文件进行不严格的比较。如果应用程序中有一个已保存字符的大数据库，则应用程序会选取合适的字符进行正确的匹配。软件必须使用一些处理技术找出最相似的匹配。通常是不断试验同一个字符的不同版本来比较。有些软件可以扫描一页文本，并鉴别出定义新字体的每一个字符。有些软件则使用自己的识别技术，尽其所能鉴别页面上的字符，然后将不可识别的字符进行人工选择或直接录入。
特征提取识别法(Feature Extraction)是将每个字符分解为很多个不同的字符特征，包括斜线、水平线和曲线等。然后又将这些特征与识别的字符进行匹配。特征提取法的优点是可以识别多种字体，例如中文书法体就是采用特征提取法实现字符识别的。

多数OCR应用软件都加入了语法智能检查功能，这种功能进一步提高了识别率。它主要通过上下文检查法实现拼写和语法的纠正。在文字识别时，OCR应用程序会做多次的上下文衔接性检查，根据程序中已经存在的词组、固定的用词顺序、对应的检查字符串的用词字。比较高级的应用软件会自动用它认为正确的词语替换错误词语，纠正语句意思.

主要识别流程：
影像倾斜校正：首先，OCR会检查原稿是否倾斜，如果原稿倾斜，此步驟將原稿旋转至水平或是垂直的位置，以提高辨识率。
图文分析：利用图文分析技术，判定文字区与图像区，区隔之后进一步撷取文字区的文字部分。

文字自动转正：选取部分文字区做0度、90度、180度、270度来选择辨识率最高的角度，然后依照辨识最高的角度，将整个原稿转正。
分割单字：将文章段落中的所有的文字、数码、标点符号与空格切割出来。
撷取单字的特征点做文字比对：OCR运用各种方法特征撷取技术来撷取出单字最特别、最明确的部分，尤其是可以用来辨明与其他单字不同的特征，进行与OCR文字资料库比对的动作，并察看这个编译过后的讯号，所相对应的最接近文字为何，而这个文字即是最后辨识的结果。
输出辨识结果：最后每一个文字都辨识完了之后，即产出这一次的OCR的文字档案。

2.4 TTS简介
2.4.1 TTS介绍
中文全称“从文本到语音”，它将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术，隶属于语音合成。语音合成为通过机械的、电子的方法产生人造语音的技术。TTS可以帮助有视觉障碍的人阅读计算机上的信息，或者只是简单的用来增加文本文档的可读性。
早在17世纪就有法国人研发机械式的说话设备。直到19世纪，贝尔实验室对于电子语音合成技术的研究，才打开近代语音合成技术的发展。贝尔实验室在1939年制作出第一个电子语音合成器VODER，是一种利用共振峰原理所制作的合成器。 1960年，瑞典语言学家G. Fant则提出利用线性预测编码技术（LPC）来作为语音合成分析技术，并推动了日后的发展。后来1980年代Moulines E和Charpentier F提出新的语音合成算法PSOLA，此技术可以合成比较自然的语音。

2.4.2 TTS基本组成
文本分析：对输入文本进行语言学分析（主要模拟人对自然语言的理解过程），逐句进行词汇的、语法的和语义的分析，以确定句子的低层结构和每个字的音素的组成，包括文本的断句、字词切分、多音字的处理、数字的处理、缩略语的处理等。使计算机对输入的文本能完全理解，并给出后两部分所需要的各种发音提示。
韵律建模：为合成语音规划出音段特征，如音高、音长和音强等，使合成语音能正确表达语意，听起来更加自然。

语音合成：根据韵律建模的结果，把处理好的文本所对应的单字或短语的语音基元从语音合成库中提取，利用特定的语音合成技术对语音基元进行韵律特性的调整和修改，最终合成出符合要求的语音。

2.4.3 中文TTS系统
包括中文语音处理和语音合成，利用中文韵律等相关知识对中文语句进行分词、词性判断、注音、数字符号转换，语音合成通过查询中文语音库得到语音。目前中文TTS系统，比较著名的有：IBM，Microsoft，Fujitsu，科大讯飞，捷通华声等研究的系统。目前比较关键的就是中文韵律处理、符号数字、多音字、构词方面有较多的问题，需要不断研究，使得中文语音合成的自然化程度较高。

2.5 Node.js简介
2.5.1 Node.js介绍
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎。目的是为了提供撰写可扩充网络程序，如Web服务。第一个版本由Ryan Dahl于2009年发布。与一般JavaScript不同的地方，Node.js并不是在Web浏览器上运行，而是一种在服务器上运行的Javascript服务端JavaScript。
Javascript是一个事件驱动语言，Node利用了这个优点，编写出可扩展性高的服务器。Node采用了称为“事件循环(event loop)”的架构，使得编写可扩展性高的服务器变得既容易又安全。Node采用一系列“非阻塞”库来支持事件循环的方式。本质上就是为文件系统、数据库之类的资源提供接口。向文件系统发送一个请求时，无需等待硬盘（寻址并检索文件），硬盘准备好的时候非阻塞接口会通知Node。该模型以可扩展的方式简化了对慢资源的访问， 直观，易懂。
省略

2.6 本章小结
本章介绍了 Android 操作系统和 Cordova 跨平台开发框架，以及一些所涉及到的背景知识，为接下来的开发做好准备。

第三章 报纸阅读器的需求分析

需求分析是指对要解决的问题进行详细分析，弄清楚问题的要求，包括输入、输出以及最终的结果。只有在明确了这个要求后，才能使最终开发出来的软件符合用户的需求。

3.1 业务描述
本课题的目标是开发一款基于 Android 系统的报纸阅读器，能够具备良好的兼容性、稳定性与实用性。所需要实现的基础功能如下：
拍照：调用手机自带的摄像头对报纸内容进行拍照。
裁剪内容：由于上一步得到的图片可能混入了一些与所需内容无关的部分，因此需要对图片进行裁剪。
OCR：将裁剪后的图片上传至远端的 OCR Cloud 引擎进行文字识别，并将识别结果返回给用户。
TTS：将识别所得的文字朗读出来。
存储：将 COR 是被后的文字存储在手机上，方便下一次使用，同时也需提供删除功能。
音量调节：可以对发音人的音量进行调大或者调小。
语音设置：进一步的个性化设置，可选择不同的地方性语言进行朗读。

3.2 业务处理流程

本课题主要为设计一款在 Android 系统上运行的报纸阅读器，并实现上述的所有功能。
用户打开该应用后，程序会自动检测手机中是否安装讯飞语音，该语音引擎在朗读文字的时候需要用到。如果检测到用户尚未安装，会弹出对话框提醒用户安装。安装完成后可以选择“拍照”或者“浏览”功能。
选择“拍照”后，程序调用系统自带的相机供用户拍摄报纸内容，待拍照完成后，跳转至图片裁剪界面。在该界面中会将用户在上一步拍摄的照片显示出来，并在图片中提供一个可任意方向及大小拖动的方框，用户可拖动该方框选出需要识别的图片部分。裁剪完成后点击“确定”即开始进行文字识别。由于该识别过程需要联网，如果发现用户为接入互联网会弹出对话框提醒用户进行相关设置。
在文字识别完成后，程序会自动跳转到朗读的界面。该界面会显示新闻的标题，并提供音量调节功能，拖动音量条即可对朗读的音量进行实时调节，并且程序会记录用户上一次所使用的音量大小，避免每次朗读时都要手动调大音量的麻烦。
改界面还提供语音设置与删除新闻的功能。语音设置功能由讯飞语音提供，可以更换不同的发音语言。
点击“浏览”跳转到历史新闻的界面，该界面以列表的形式显示了用户所有的识别记录。点击某条新闻即可跳转到朗读界面自动朗读。如果需要删除，长按该条新闻，会弹出对话框提醒用户是否真的需要删除，防止误操作。

3.3 客户需求分析

本课题的用户需求分析主要分为两个部分，一部分为核心需求，另一部分为潜在需求。
核心需求是支撑该应用的基本功能的需求。拍照、识别、朗读是本应用的核心需求。
潜在需求是指不容易发现但对于用户来说是很实用的需求。包括存储、音量调节、语音设置、删除前确认等。如果将识别后的文本存储起来，当用户下一次需要用到的时候就可以快速的浏览历史记录列表获得；由于手机在朗读时的音量可能偏小，老年人可能听不清，因此提供音量调节并记录上一次的音量大小的功能可以免却用户每次都要手动调整声音的麻烦；语音设置可以给予用户更多个性化的选择，如选择当地的方言进行朗读，更显亲切；删除前确认这项功能在大多数应用都有体现，主要是为了防止用户因某些原因所造成的误操作。

3.4 本章小结
本章主要描述了业务流程，分析了本课题的用户需求。业务流程列举了基本的业务功能，包括拍照、裁剪、OCR、TTS等。用户需求主要分析的各项功能的需求及存在的价值。

第四章 报纸阅读器的功能设计
功能设计是按照产品定位的初步要求，在对用户需求及现有产品进行调查分析的基础上，对所定位产品应具备的目标功能系统进行概念性构建的创造活动。在上一章已经确定了用户需求，接下来需要在此基础上确定各个功能模块的定义划分。

4.1 主要业务处理流程
在上一章的讨论中，本课题的主要功能是拍照，裁剪，OCR识别，TTS朗读。报纸阅读器业务流程图如图4-1所示：

图4-1 业务流程图

4.2 UI组件布局

4.2.1 HTML，CSS简介
HTML 中文全称“超文本标记语言”，“超文本”指页面内可以包含图片、链接、音乐和视频等非文字元素。其结构分为 “head”与 “body”两部分，其中“头”部提供关于网页的信息，“主题”部分提供网页的具体内容。HTML 具有简易性、可拓展性、平台无关性和通用性的特点。一个 HTML 文件以 .htm 或者 .html 为拓展名。在2014年10月29日，HTML5 标准规范制定完成。其加入了很多新特性：语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、3D图形特效等。
省略

4.2.2 总体设计风格
本软件使用类似 iOS7 风格的扁平化极简化设计，提高了辨识度与易用性。这种风格最主要的特点是弱化操作元素，突出内容，使其清晰可见。遵循 UI服务于内容而不影响内容的表现，因此弱化了控件的视觉效果，以避免干扰内容；同时去除了控件的纹理和质感的表现，非必要时不再使用拟物化的方式来表达，取而代之的是简化的图标元素和操作内容。这种设计理念有助于营造纵深感，建立层次结构和秩序，并帮助用户理解屏幕元素间的物理关系。

4.2.3 UI布局
主界面：主界面放置两个由上而下层叠的按钮，每个按钮的高度为整个窗口高度的 50%， 宽度占满整个屏幕的宽度，用辨识度较高的两种颜色作为背景色以便于区分，按钮的提示文字均在水平和垂直方向上居中，分别提供的功能是拍照和浏览。布局下所示（省略细节布局）：
HTML：

<div id="takePhoto"><span>拍 照</span></div>
<div id="browserNews"><span>浏 览</span></div>

CSS：

#takePhoto, #browserNews { 
display: table; 
width: 100%; 
height: 50%; 
text-align: center; 
font-weight: bold; 
font-size: 50px; 
color: white; 
} 

#takePhoto span, 
#browserNews span { 
display: table-cell; 
vertical-align: middle; 
} 

#takePhoto { 
background-color: #26a69a; 
} 

#browserNews { 
background-color: #ee6e73;
}

拍照界面：该部分使用系统提供的 UI，暂不进行自定义设置。
裁剪界面：该部分会显示一张图片，图片中有可随意拖动的选框用于裁剪。图片下方放置两个按钮，供用户确定或取消裁剪操作。

<div id="container"> 
<img id="crop" src="" alt="" style="display: none;"/> 
</div> 
<div id="control"> 
<button id="cancel">取消</button> 
<button id="submit">确定</button> 
</div>

朗读界面：该界面会显示当前所朗读的新闻的标题，下面放置了一系列按钮用于音量调节、重复朗读、语音设置和删除新闻。

	<h4 id="speaking-title"></h4> 
<div id="tip-container"> 
<button id="delete" class="btn btn-block btn-negative">删除</button>
 </div>
<div id="volume-container"> 
<button class="btn btn-block btn-outlined">音量调节</button> 
<div id="range-container"> 
<input type="text" name="range" id="range" style="display: none;"/> 
</div> 
</div> 
<div id="tts-container"> 
<button id="tts" class="btn btn-block btn-outlined">语音设置</button> 
</div> 
<div id="repeat-container"> 
<button id="repeat" class="btn btn-block btn-outlined">重新朗读</button> 
</div>
新闻列表界面：该界面主要由一竖向列表组成，每个列表项均为可点击的链接，点击后回跳转至朗读界面。
<ul id="news" class="table-view" style="display: none;">
	<li class="table-view-cell" data-id="%id%"><a class="navigate-right" href="%link%">%title%</a></li>
<li class="table-view-cell" data-id="%id%"><a class="navigate-right" href="%link%">%title%</a></li>
<li class="table-view-cell" data-id="%id%"><a class="navigate-right" href="%link%">%title%</a></li>
</ul>

4.3 拍照功能的调用
使用 Cordova 插件 org.apache.cordova.camera 即可用 JavaScript 的方式调用到系统的摄像头。其提供了 navigator.camera.getPicture(cameraSuccess, cameraError, cameraOptions ); 这个 API 来使用，允许开发者对拍照时的多项参数进行设置，包括图片质量、图片种类、宽高大小等，这些配置项在 cameraOptions 中可以调整。

4.4 裁剪图片
使用 jQuery 插件 cropper 实现。其具有多项特性因而可以在裁剪图片时提供较好的操作体验，这些特性包括支持移动设备上的触摸事件、支持旋转以及缩放图片等，而且其库文件体积较小，更适合在移动设备上使用。

4.5 上传图片
使用 Cordova 插件 org.apache.cordova.file-transfer 插件实现。在设定好上传地址以及 POST 参数后，即可使用 FileTransfer 提供的实例方法 upload 进行图片上传，该方法还接受两个回调函数作为参数，用于上传成功和失败的处理。
当上传成功且服务器端完成了 OCR 识别后，会将识别结果返回，此时便会触发上传成功的回调函数，该函数具有一个包含响应结果的对象作为参数，该对象的 response 方法即为从服务器返回的识别结果。

4.6 OCR识别
使用 ABBYY 提供的 ABBYY Cloud OCR SDK 实现。ABBYY 是一家俄罗斯软件公司，在文档识别，数据捕获和语言技术的开发中居世界领先地位。它不仅支持多国文字，还支持彩色文件识别、自动保留原稿插图和排版格式以及后台批处理识别功能等，而且还能将识别结果保存成RTF、TXT、DOC、CSV、XLS或HTML等格式，并且它能保持表格与图片中原始的多栏页面设计。
ABBYY Cloud OCR SDK 提供了多种方式给开发者使用其 Cloud OCR 引擎，包括 .NET、cURL、JAVA、PHP、Python、ASP.NET、Ruby、JavaScript等，因此也可以在 Android、iPhone 和 Windows Phone 等平台中使用。官方文档中均有提供相应开发语言的代码例程，开发者可以很方便的使用和修改。

4.7 TTS功能的使用
使用 Cordova 插件 com.wordsbaking.cordova.tts 实现。Android 系统从 4.0.3 版本（API Level 15）及以后开始支持 TTS 服务，因此该插件必须在 Android 4.0.3 及之后的版本才可使用。该插件支持多项朗读设置，包括朗读语言、语速等。

4.8 本章小结
本章主要分析了各项功能模块的业务处理流程，以及在实现各模块时所用的相应插件与服务，和使用时的参数功能调整。这些模块包括 UI 界面、拍照、裁剪、上传、OCR、TTS等。

第五章 报纸阅读器的实现

本章将详细讲解各项功能模块的具体代码实现以及相应的运行情况。

5.1项目开发软硬件平台

硬件平台：
MacBook Air 笔记本一台
处理器：1.4GHz Intel Core i5
内存：8GB 1600MHz DDR3
系统类型：64位操作系统
图形卡：Intel HD Graphics 5000 1024 MB
（1） Android智能手机一部
型号：红米手机
处理器：联发科 MT6589T
内存：8GB
运行内存：1GB
操作系统：Android 4.2.1
（2） USB数据线一根
（3） SIM卡一张
软件平台：
操作系统：OS X 10.9.5
服务器平台：LeanCloud
程序语言：HTML、CSS、JavaScript
开发包：Java u845，Android SDK 4.4.2(API 19)
开发调试工具：WebStorm，npm，Android Development Tools，Chrome 浏览器

5.2项目创建
5.2.1 开发环境搭建
本项目需要安装 Android 开发环境以及 Cordova 框架。下面将分为 JDK、Android SDK、Node.js、Cordova 4个部分进行讲解。

1. 安装JDK
   编译 Android 时需要用到 JRE 支持。安装 JDK 需要在 Sun 官方网站进行下载，地址是 http://www.oracle.com/technetwork/java/javase/downloads/index.html ，这里选择 Java SE 8u45 下载。然后双击下载后的文件即可自动安装。安装完成后打开终端，并输入 java -version ，即可看到相应的 Java 安装信息。默认的安装目录实在 /System/Libray/Frameworks /JavaVM.Framwork/，在该目录下 Versions 文件夹里存放了不同版本的 JDK。
2. 安装Android SDK
   前往 Android 开发者网站下载，地址是 developer.android.com 。下载后解压即可使用。
3. 安装Node.js
   前往 Node.js 官方网站进行下载，地址是 https://nodejs.org/ 。这里选择的是 Node.js for Mac的安装文件进行下载，下载完成后双击下载文件即可自动开始安装。安装完成后在终端中输入 node -v 即可显示当前 Node.js 的安装版本号。
4. 安装Cordova
   在电脑打开终端，输入 sudo npm install -g cordova 开始安装 Cordova。安装完成后在终端输入 cordova -v 即可显示当前 cordova 的版本号。

5.2.2 Cordova工程创建

1. 打开终端，输入 cordova create SmartReader com.xyq.smartreader SmartReader即可成功创建 Cordova项目。上述命令行的第一个参数是指创建该工程的文件夹名，如果不存在将会创建该文件夹。第二个参数为该项目的包名。第三个参数为该项目在手机下显示的名字。
2. 在终端输入 cd SmartReader，进入该项目的文件夹。输入 cordova platform add android，添加Android平台的支持。Cordova会调用Android SDK在platform/android 中创建一个完整的Android应用工程。
3. 在WebStorm中打开SmartReader文件夹，即可看到该目录下已经生成了一系列的代码文件。
4. 完成创建 Cordova工程。Cordova会在www目录下默认生成index.html，css/index.css，img/logo.png和js/index.js等文件。
5. 将手机通过USB数据线与笔记本连接，并开启开发者选项以及使用USB调试的功能。在终端中输入 cordova run android 即可将该项目安装在手机上。如果需要在笔记本上的模拟器运行，则在终端输入 cordova emulate android 即可启动Android模拟器 。

5.2.3 项目目录介绍
在使用Cordova创建的项目目录下，platforms文件夹中存放了Cordova生成的相应平台的应用工程。例如使用命令行cordova platform add android添加了对Android平台的支持后，platforms文件夹会自动生成android目录，里面存放的是Cordova生成的Android项目。plugins目录下存放了开发者添加的插件。www目录里存放的是HTML、CSS、JavaScript以及一些显示用的图片。

5.3软件功能实现

本节主要讲解各功能的具体代码实现细节。
5.3.1 UI界面
由于 Cordova只提供了调用Native API的接口，并没有提供任何UI方面的功能，所以UI方面这里使用 Ratchet 框架来构造界面。Ratchet 是一款专门为移动开发打造的框架，包括按钮、列表、标签栏等在移动设备上常见的组件，让开发者可以很方便的制作精美的页面。其支持 Android 与iOS7两种风格，本软件使用iOS7风格。首先需要到 Ratchet 官方网站上下载该框架，下载完成后解压，将相应的 JavaScript 和 CSS 文件复制到项目目录下 www 文件夹的对应目录。然后即可引用：

<link rel="stylesheet" href="ratchet/css/ratchet.min.css"/>

5.4.2数据存储
HTML5提供了两种在客户端存储数据的新方法，分别是localStorage和sessionStorage。在这之前，这类功能都是使用 cookie实现的。但是cookie并不适合大量数据的存储，一般情况下只能存储大约4KB的数据。localStorage对数据的存储没有时间限制，sessionStorage存储的数据在用户关闭浏览器窗口后会给删除。因而在本应用中实现存储功能应使用localStorage。localStorage使用键值对的方式进行数据存储，目前仅支持存储字符串类型的数据。其提供了 setItem、getItem和removeItem三个方法，分别对应的是写、读、删的功能。

5.4.3 拍照功能
由于从 Cordova 3开始采用插件的方式提供核心 API，因此需要通过安装插件的方式进行拓展。首先安装 Cordova 插件 org.apache.cordova.camera，该插件提供对系统照相机功能调用的接口。在终端输入 cordova plugin add org.apache.cordova.camera ，安装该插件。该插件提供了 navigator.camera.getPicture 这个方法来调用系统的拍照功能，该方法需要传入三个参数，分别是：拍照成功后的回调函数、拍照失败后的回调函数和拍照的参数。拍照的参数包括图片质量（默认为75%）、图片宽高、图片拓展名等。具体使用代码如下：

navigator.camera.getPicture(onSuccess, onFail, {
   quality: 100,
   destinationType: Camera.DestinationType.FILE_URI
});

function onSuccess(imageURI) {
   localStorage.setItem("imgUrl", imageURI);
     location.href = "crop.html";
 }

function onFail(error) {}
在拍照完成后需要跳转到裁剪图片的页面，因此在跳转前需要把图片的地址保存下来以供下一步使用。

5.4.4 裁剪图片
使用 Image Cropper 插件实现。首先需要到该插件官网 https://github.com/fengyuanchen/cropper 下载。下载完成后将文件解压，将相应的 JavaScript 文件 和 CSS 文件放到 SmartReader 项目下的 www 文件夹中对应的位置。由于该插件依赖 jQuery，因此在引入其 JavaScript 前需要先引入 jQuery。引入代码如下：

<link rel="stylesheet" type="text/css" href="css/crop.css" />
以及：
<script src="js/jquery.min.js"></script>
<script src="js/cropper.js"></script>

引入完成后即可开始使用。该插件提供了一个名为cropper 的方法供开发者调用裁剪功能，该方法需要传入一个为 Object形式的配置项参数。可选的配置项包括图片比例、默认裁剪框的百分比、图片缩放、限制裁剪大小等。

首先需要在 HTML 文件中放置一个 img 标签供该插件使用：

<div id="container">
    <img id="crop" src="" alt="" style="display: none;"/>
</div>

开始裁剪：

$("#crop").cropper({
    autoCropArea: 0.85
});
获得裁剪后的图片信息，为 DataURL 形式：
var dataURL = $("#container #crop").cropper("getCroppedCanvas").toDataURL();

5.4.5 上传图片
需要使用 Cordova 插件 org.apache.cordova.file-transfer。在终端中输入 cordova plugin add org.apache.cordova.file-transfer，即可安装。该插件提供了全局的FileTransfer和FileUploadOptions构造函数，使用时需要先实例化。实例化FileUploadOptions后需要配置fileKey，这是一个字符串，需要跟服务器端统一，这样服务器端才可根据该 Key值取到相应的上传图片。实例化FileTransfer后需要传入五个参数，分别是上传的数据、服务器地址、上传成功的回调、上传失败的回调和FileUploadOptions实例化对象。上传代码如下：

var options = new FileUploadOptions();
options.fileKey = "ocrImage";
options.chunkedMode = false;

var uri = encodeURI("http://dev.paper-reader.avosapps.com/upload");
var ft = new FileTransfer();

ft.upload(dataURL, uri, function (r) {
    window.plugins.spinnerDialog.hide();
    var text = r.response;
    localStorage.setItem("text", text);
    location.href = "speak.html";
 }, function (error) {
}, options);

在获取 OCR 识别后的文字，需要该文件存储在 localStorage 中，以便下一次的使用。这一步的操作将放到跳转到朗读页面后进行。存储的内容包括新闻标题、正文以及一个全局 id，全局id 用于在朗读或者删除时在 localStorage 中找到对应的内容。默认将文本的第一行作为标题，其余部分为正文。存储代码如下：

var obj = {};
var current = parseInt(localStorage.getItem("current")) + 1;
title = text.split("\n")[0];
var content = text.split("\n").slice(1).join("");

id = current;
obj.id = current;
obj.title = title;
obj.content = content;
newsList = JSON.parse(localStorage.getItem("news"));
newsList.push(obj);
localStorage.setItem("news", JSON.stringify(newsList));
localStorage.setItem("current", current);

5.4.6 浏览新闻
需要先将所有存储在 localStorage 中的新闻条目取出，再逐条渲染在一个列表中。该页面提供两种操作：点击新闻，即可跳转到朗读界面，自动朗读该条新闻；
长按新闻，将会弹出一个对话框询问是否删除该条新闻，如果选择“确定”将会把该条新闻从列表和 localStorage 存储中移除。

var newsList = JSON.parse(localStorage.getItem("news"));
var newsElem = document.getElementById("news");
var template = '<li class="table-view-cell" data-id="%id%"><a class="navigate-right" href="%link%">%title%</a></li>';
var elemList = [];

if (newsList.length == 0) {
   document.getElementById("tip-container").style.display = "block";
   return;
}

for (var i = 0, length = newsList.length; i < length; i++) {
    var id = newsList[i].id;
    var title = newsList[i].title;
    var elemStr = template.replace("%link%", "speak.html?id=" + id)
                    .replace("%title%", title)
                    .replace("%id%", id);
    elemList.push(elemStr);
 }

 newsElem.innerHTML = elemList.join("");
 newsElem.style.display = "block";

5.4.7 朗读
需要使用 Cordova 插件 com.wordsbaking.cordova.tts。在终端中输入 cordova plugin add com.wordsbaking.cordova.tts，即可安装。该插件提供TTS.speak这个方法用于朗读指定的文本。使用该方法需要传入三个参数，分别是朗读配置项、朗读成功后的回调函数和朗读失败后的回调函数。其中朗读配置项是一个Object形式的参数，可设置朗读文本、朗读语音和朗读速率。如果需要停止朗读，则需调用TTS.stop()这个方法。

TTS.speak({
    text: text,
    locale: "zh-CN",
    rate: 0.75
}, function () {
}, function () {
});

5.4.8 音量调节
需要使用 Cordova 插件 com.develcode.plugins.volumeControl。在终端中输入 cordova plugin add git+https://github.com/manusimpson/Phonegap-Android-VolumeControl.git，即可安装。该插件提供了名为VolumeControl.setVolume的方法用于控制音量。
使用该方法是需要传入三个参数，分别是目标音量大小、调整音量成功后的回调函数和调整音量失败后的回调函数。如果需要获取当前音量大小，则使用 VolumeControl.getVolume 方法即可。

VolumeControl.setVolume(parseInt(elem.value), onVolSuccess, onVolError);

function onVolSuccess(){}
function onVolError(){}

5.4.9 音量条UI
需要使用插件 Powerange。这是一款具有 iOS7 风格的滑块插件。首先需要到该插件官网http://abpetkov.github.io/powerange/ 下载。完成后解压，并将相应的 JavaScript文件和CSS文件拷贝到项目文件夹www目录中对应的文件夹。该插件提供了名为Powerange的构造函数。实例化时需要传入两个参数，分别是用于绑定的HTML Input元素和配置项。其中配置项包括一系列可选的参数，包括移动滑块后触发的回调函数、滑块的取值范围、起始位置等。使用代码如下：

<div id="range-container">
    <input type="text" name="range" id="range" style="display: none;"/>
</div>

var elem = document.getElementById("range");
new Powerange(elem, {
    min: 0,
    max: 100,
    start: parseInt(localStorage.getItem("volume")),
    callback: function() {
       VolumeControl.setVolume(parseInt(elem.value), onVolSuccess, onVolError);
       localStorage.setItem("volume", elem.value + "");
     }
});

5.4.10检测网络状态
需要使用 Cordova 插件 org.apache.cordova.network-information。在终端中输入 cordova plugin add org.apache.cordova.network-information，即可安装。通过获取 navigator.connection.type 该属性的值即可得知用户实时的网络状况。由于这里仅需要在用户无网络连接时给出提醒，因此仅需判断 navigator.connection.type 是否 为 “none” 即可。代码如下：

var networkState = navigator.connection.type;

if (networkState == "none") {
    navigator.notification.confirm(
        "检测到您已经断开网络，是否马上打开？",
        onConfirm,
        "未联网",
        ["取消", "去打开"]
     );

     function onConfirm(buttonIndex) {
        if (buttonIndex == 2) {
             LocationAndSettings.switchToWifiSettings();
         }
}

5.4.11检测是否安装讯飞语音
需要使用 Cordova 插件 com.ohh2ahh.plugins.appavailability。在终端输入 cordova plugin add com.ohh2ahh.plugins.appavailability，即可安装。该插件提供了名为appAvailability.check的方法用于检测特定的APP是否有被安装在手机上。使用该方法时需要传入三个参数，分别是APP的包名、检测到成功安装的回调函数和检测到未成功安装的回调函数。使用代码如下：

appAvailability.check(
    ' com.iflytek.tts ',
    function() {           
        // 已安装
    },
    function() {           
        // 未安装
    }
);

5.4.12跳转至设置界面
需要使用 Cordova 插件 sk.tamex.locationandsettings。在终端中输入 cordova plugin add sk.tamex.locationandsettings，即可安装。该插件提供了一系列的设置功能，包括对Wifi、GPS和TTS等。这里仅需要使用跳转至Wifi和TTS设置界面的功能即可。
跳转至 Wifi 设置界面，使用如下方法：
LocationAndSettings.switchToWifiSettings();
跳转至 TTS设置界面，使用如下方法：
LocationAndSettings.switchToTTSSettings();

5.5 兼容性测试
兼容性是指硬件之间、软件之间或是软硬件组合系统之间的相互协调工作的程度。兼容的概念比较广，对于软件的兼容性，指的是指某个软件能稳定地工作在若干个操作系统之中，而不会出现意外的退出等问题。
这里使用阿里移动测试服务对本应用进行基本的兼容性测试，地址是http://mts.aliyun.com。阿里移动测试服务是为广大移动开发者提供真机测试服务的云平台，拥有大量热门机型，提供7x24全天候服务。能够帮助开发者以最低的成本、最高的效率发现APP中的各类隐患，包括APP崩溃、各类兼容性、功能性、性能问题等。网站界面如图5-1所示：

图5-1 阿里移动测试服务

测试使用的手机设备包括三星、华为、小米和魅族一共30部手机，测试的Android操作系统版本从4.0.4 到4.4.4，已经涵盖了市面上大多数的Android热门机型，因此其测试结果也是具有一定的实际意义的。本应用的兼容性测试结果如图5-2所示：

图5-2 测试结果

5.6 模块功能测试
省略

5.7 OCR识别效果测试
由于在实际使用中存在多种因素会对OCR识别的准确度造成影响，因此接下来将使用多种不同文本在不同的环境下对识别效果进行测试。测试使用的OCR引擎是ABBYY 提供的 Cloud OCR SDK，测试项包括正常情况、光线明亮程度、纸张平整程度、字体大小对识别结果的影响。

5.7.1正常情况
识别图片：

图5-3 正常情况下的识别图片

识别结果：

图5-4正常情况下的识别结果
5.7.2光线暗处
识别图片：

图5-5 光线暗处的识别图片

识别结果：

图5-6 光线暗处的识别结果

5.7.3纸张弯曲时
识别图片：

图5-7 纸张弯曲的识别图片

识别结果：

图5-8 纸张弯曲的识别结果

5.7.4字体较小时
识别图片：

图5-9 字体较小时的识别图片

识别结果：

图5-10 字体较小时的识别结果

5.7.4结论
经过正常情况、光线较暗处、纸张弯曲、字体较小时四个阶段的测试，从测试结果表明该OCR引擎的识别总够令人满意。

5.8 应用效果
启动界面：

图5-11 启动界面

点击“拍照”后跳转至系统设置界面：

图5-12 拍照界面

拍照完成后跳转至裁剪图片界面：

图5-13 裁剪界面

中间的方格框可随意拖动，当裁剪到合适大小后向下滚动页面，点击“确定”按钮开始进行 OCR 识别，点击“取消”返回到启动界面（即图5-3所示）

图5-14 裁剪完毕

经过实际测试，在 wifi 条件下识别大概需要 30秒 的时间：

图5-15 上传图片
识别结果：

图5-16 OCR识别结果

识别完成即自动开始朗读，以下为朗读时的界面，提供音量调节功能（会自动记住上一次设置的音量，避免每次播放都要调大音量，默认的音量为50%大小），以及重复朗读功能：

图5-17 朗读界面

点击“语音设置”按钮，跳转到系统的语音设置界面，可进行一系列相关的设置：

图5-18 系统语音设置界面

图5-19 讯飞语音设置界面

重新打开软件，点击“浏览”，来到新闻列表界面，点击相关条目即可直接朗读：

图5-20 新闻列表界面

如果需要删除某条新闻，长按该条新闻即可：

图5-21 删除新闻

由于本应用需要使用科大讯飞的语音引擎，以及 OCR 识别需要在联网的条件的进行，因此当检测到以上条件不满足时会给用户提醒：

图5-22 讯飞语音检测

图5-23 网络检测

图5-24 网络设置界面

5.9 本章小结
本章主要讲解了各个功能模块的具体代码实现，并提供开发过程中可能遇到的问题的整理总结和各项测试过程，尽量减少读者在开发类似应用时因为错误耗费的开发时间。

结束语
参考文献
[1] 王秋惠，老年人行为分析与产品无障碍设计策略[J].北京理工大学学报(社会科学版)，2009，11(1)，57-61
[2] 彭佳，基于用户体验的老年人智能手机APP界面交互设计研究[D]. 上海:华东理工大学，2014
[3] 朱怀中，基于 Android 的手机 OCR 识别技术设计与实现[J].电子科技，2012，25(9)，45-51
[4] 桂杨，基于Android平台的手机OCR系统及其应用[D]. 南京:东南大学，2014
[5] 杨平，利用 OpenCV 实现在 Android 系统上的图像边缘检测[J].计算机与数字工程，2014，42(7)，1254-1256
[6] Cay S. Horstmann,Gary Cornell. Java核心技术(卷1):基础知识(原书第9版)[M]. 机械工业出版社, 2014.
[7] 郭霖. 第一行代码:Android[M]. 人民邮电出版社, 2014.
[8] 李林芳，基于目标导向的老年人智能手机界面设计研究[D]. 江苏:江南大学，2013
[9] 余佳,黄智超,蒋端保,梁治峰,杨兵,帖军，基于Android图片文字朗读软件的盲人电子眼[J].软件导刊，2012，11(8)，96-98
[10] 李松柏，浅析android平台图像处理应用[J].电子世界，2013，18，501

致谢

---

5、资源下载

本项目源码及完整论文如下，有需要的朋友可以点击进行下载。如果链接失效可点击下方卡片扫码自助下载。

序号	毕业设计全套资源（点击下载）
本项目源码	基于 Android+OCR+Node.js的报纸阅读器设计与实现（源码+文档）_Android__报纸阅读器.zip

---