24 |
25 |
26 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 Matias Tucci
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ionic 2 OCR Example
2 |
3 |
4 |
5 |
6 |
7 | [](https://www.bithound.io/github/matiastucci/ionic-ocr-example)
8 | [](https://www.bithound.io/github/matiastucci/ionic-ocr-example/master/dependencies/npm)
9 | [](https://www.bithound.io/github/matiastucci/ionic-ocr-example)
10 |
11 | This is a simple Ionic 2 app using [ocrad.js](https://github.com/antimatter15/ocrad.js).
12 |
13 | If you want an Ionic 1 version of this, you can go to the [v1](https://github.com/matiastucci/ionic-ocr-example/tree/v1) branch.
14 |
15 | [Video Demo](https://youtu.be/TykCiS80oZc)
16 |
17 | ## Getting Started
18 | ```
19 | $ git clone https://github.com/matiastucci/ionic-ocr-example
20 | $ cd ionic-ocr-example
21 | $ npm i
22 | $ ionic state restore
23 | $ ionic serve
24 | ```
25 |
26 | ## Plugins (using Ionic Native)
27 | * [cordova-plugin-camera]
28 |
29 | ## Test it with Ionic View
30 | * Download the [Ionic view] app
31 | * Signup/login to the app
32 | * Insert this ID: **cfe7e781**
33 |
34 | [Ionic view]:http://view.ionic.io/
35 | [cordova-plugin-camera]:http://ionicframework.com/docs/v2/native/camera/
36 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | OCR Example
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ocr-example",
3 | "author": "Matias Tucci",
4 | "homepage": "https://tucci.me/",
5 | "private": false,
6 | "scripts": {
7 | "build": "ionic-app-scripts build",
8 | "watch": "ionic-app-scripts watch",
9 | "serve:before": "watch",
10 | "emulate:before": "build",
11 | "deploy:before": "build",
12 | "build:before": "build",
13 | "run:before": "build"
14 | },
15 | "dependencies": {
16 | "@angular/common": "^2.0.0",
17 | "@angular/compiler": "^2.0.0",
18 | "@angular/compiler-cli": "^0.6.2",
19 | "@angular/core": "^2.0.0",
20 | "@angular/forms": "^2.0.0",
21 | "@angular/http": "^2.0.0",
22 | "@angular/platform-browser": "^2.0.0",
23 | "@angular/platform-browser-dynamic": "^2.0.0",
24 | "@angular/platform-server": "^2.0.0",
25 | "ionic-angular": "^2.0.0-rc.0",
26 | "ionicons": "^3.0.0",
27 | "@ionic/storage": "^1.0.3",
28 | "ionic-native": "^2.0.3",
29 | "rxjs": "^5.0.0-beta.12",
30 | "zone.js": "^0.6.21"
31 | },
32 | "devDependencies": {
33 | "@ionic/app-scripts": "^0.0.30",
34 | "typescript": "^2.0.3"
35 | },
36 | "cordovaPlugins": [
37 | "cordova-plugin-device",
38 | "cordova-plugin-console",
39 | "cordova-plugin-whitelist",
40 | "cordova-plugin-splashscreen",
41 | "cordova-plugin-statusbar",
42 | "ionic-plugin-keyboard"
43 | ],
44 | "cordovaPlatforms": [
45 | "ios",
46 | {
47 | "platform": "ios",
48 | "version": "",
49 | "locator": "ios"
50 | }
51 | ],
52 | "description": "ocr-example: An Ionic project"
53 | }
54 |
--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
1 | // Ionic Variables and Theming. For more info, please see:
2 | // http://ionicframework.com/docs/v2/theming/
3 | @import "ionic.globals";
4 |
5 |
6 | // Shared Variables
7 | // --------------------------------------------------
8 | // To customize the look and feel of this app, you can override
9 | // the Sass variables found in Ionic's source scss files.
10 | // To view all the possible Ionic variables, see:
11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
12 |
13 | $text-color: #000;
14 | $background-color: #fff;
15 |
16 |
17 | // Named Color Variables
18 | // --------------------------------------------------
19 | // Named colors makes it easy to reuse colors on various components.
20 | // It's highly recommended to change the default colors
21 | // to match your app's branding. Ionic uses a Sass map of
22 | // colors so you can add, rename and remove colors as needed.
23 | // The "primary" color is the only required color in the map.
24 |
25 | $colors: (
26 | primary: #387ef5,
27 | secondary: #32db64,
28 | danger: #f53d3d,
29 | light: #f4f4f4,
30 | dark: #222,
31 | favorite: #69BB7B
32 | );
33 |
34 |
35 | // App iOS Variables
36 | // --------------------------------------------------
37 | // iOS only Sass variables can go here
38 |
39 |
40 |
41 |
42 | // App Material Design Variables
43 | // --------------------------------------------------
44 | // Material Design only Sass variables can go here
45 |
46 |
47 |
48 |
49 | // App Windows Variables
50 | // --------------------------------------------------
51 | // Windows only Sass variables can go here
52 |
53 |
54 |
55 |
56 | // App Theme
57 | // --------------------------------------------------
58 | // Ionic apps can have different themes applied, which can
59 | // then be future customized. This import comes last
60 | // so that the above variables are used and Ionic's
61 | // default are overridden.
62 |
63 | @import "ionic.theme.default";
64 |
65 |
66 | // Ionicons
67 | // --------------------------------------------------
68 | // The premium icon font for Ionic. For more info, please see:
69 | // http://ionicframework.com/docs/v2/ionicons/
70 |
71 | $ionicons-font-path: "../assets/fonts";
72 | @import "ionicons";
73 |
--------------------------------------------------------------------------------
/src/pages/home/home.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | import { NavController, ActionSheetController, LoadingController } from 'ionic-angular';
4 | import { Camera } from 'ionic-native';
5 |
6 | @Component({
7 | selector: 'page-home',
8 | templateUrl: 'home.html'
9 | })
10 | export class HomePage {
11 | srcImage: string;
12 | OCRAD: any;
13 |
14 | constructor(
15 | public navCtrl: NavController,
16 | public actionSheetCtrl: ActionSheetController,
17 | public loadingCtrl: LoadingController
18 | ) {}
19 |
20 | presentActionSheet() {
21 | const actionSheet = this.actionSheetCtrl.create({
22 | buttons: [
23 | {
24 | text: 'Choose Photo',
25 | handler: () => {
26 | this.getPicture(0); // 0 == Library
27 | }
28 | },{
29 | text: 'Take Photo',
30 | handler: () => {
31 | this.getPicture(1); // 1 == Camera
32 | }
33 | },{
34 | text: 'Demo Photo',
35 | handler: () => {
36 | this.srcImage = 'assets/img/demo.png';
37 | }
38 | },{
39 | text: 'Cancel',
40 | role: 'cancel'
41 | }
42 | ]
43 | });
44 | actionSheet.present();
45 | }
46 |
47 | getPicture(sourceType: number) {
48 | // You can check the values here:
49 | // https://github.com/driftyco/ionic-native/blob/master/src/plugins/camera.ts
50 | Camera.getPicture({
51 | quality: 100,
52 | destinationType: 0, // DATA_URL
53 | sourceType,
54 | allowEdit: true,
55 | saveToPhotoAlbum: false,
56 | correctOrientation: true
57 | }).then((imageData) => {
58 | this.srcImage = `data:image/jpeg;base64,${imageData}`;
59 | }, (err) => {
60 | console.log(`ERROR -> ${JSON.stringify(err)}`);
61 | });
62 | }
63 |
64 | analyze() {
65 | let loader = this.loadingCtrl.create({
66 | content: 'Please wait...'
67 | });
68 | loader.present();
69 | (window).OCRAD(document.getElementById('image'), text => {
70 | loader.dismissAll();
71 | alert(text);
72 | console.log(text);
73 | });
74 | }
75 |
76 | restart() {
77 | this.srcImage = '';
78 | this.presentActionSheet();
79 | }
80 |
81 | }
82 |
--------------------------------------------------------------------------------
/src/service-worker.js:
--------------------------------------------------------------------------------
1 | // tick this to make the cache invalidate and update
2 | const CACHE_VERSION = 1;
3 | const CURRENT_CACHES = {
4 | 'read-through': 'read-through-cache-v' + CACHE_VERSION
5 | };
6 |
7 | self.addEventListener('activate', (event) => {
8 | // Delete all caches that aren't named in CURRENT_CACHES.
9 | // While there is only one cache in this example, the same logic will handle the case where
10 | // there are multiple versioned caches.
11 | const expectedCacheNames = Object.keys(CURRENT_CACHES).map((key) => {
12 | return CURRENT_CACHES[key];
13 | });
14 |
15 | event.waitUntil(
16 | caches.keys().then((cacheNames) => {
17 | return Promise.all(
18 | cacheNames.map((cacheName) => {
19 | if (expectedCacheNames.indexOf(cacheName) === -1) {
20 | // If this cache name isn't present in the array of "expected" cache names, then delete it.
21 | console.log('Deleting out of date cache:', cacheName);
22 | return caches.delete(cacheName);
23 | }
24 | })
25 | );
26 | })
27 | );
28 | });
29 |
30 | // This sample illustrates an aggressive approach to caching, in which every valid response is
31 | // cached and every request is first checked against the cache.
32 | // This may not be an appropriate approach if your web application makes requests for
33 | // arbitrary URLs as part of its normal operation (e.g. a RSS client or a news aggregator),
34 | // as the cache could end up containing large responses that might not end up ever being accessed.
35 | // Other approaches, like selectively caching based on response headers or only caching
36 | // responses served from a specific domain, might be more appropriate for those use cases.
37 | self.addEventListener('fetch', (event) => {
38 |
39 | event.respondWith(
40 | caches.open(CURRENT_CACHES['read-through']).then((cache) => {
41 | return cache.match(event.request).then((response) => {
42 | if (response) {
43 | // If there is an entry in the cache for event.request, then response will be defined
44 | // and we can just return it.
45 |
46 | return response;
47 | }
48 |
49 | // Otherwise, if there is no entry in the cache for event.request, response will be
50 | // undefined, and we need to fetch() the resource.
51 | console.log(' No response for %s found in cache. ' +
52 | 'About to fetch from network...', event.request.url);
53 |
54 | // We call .clone() on the request since we might use it in the call to cache.put() later on.
55 | // Both fetch() and cache.put() "consume" the request, so we need to make a copy.
56 | // (see https://fetch.spec.whatwg.org/#dom-request-clone)
57 | return fetch(event.request.clone()).then((response) => {
58 |
59 | // Optional: add in extra conditions here, e.g. response.type == 'basic' to only cache
60 | // responses from the same domain. See https://fetch.spec.whatwg.org/#concept-response-type
61 | if (response.status < 400 && response.type === 'basic') {
62 | // We need to call .clone() on the response object to save a copy of it to the cache.
63 | // (https://fetch.spec.whatwg.org/#dom-request-clone)
64 | cache.put(event.request, response.clone());
65 | }
66 |
67 | // Return the original response object, which will be used to fulfill the resource request.
68 | return response;
69 | });
70 | }).catch((error) => {
71 | // This catch() will handle exceptions that arise from the match() or fetch() operations.
72 | // Note that a HTTP error response (e.g. 404) will NOT trigger an exception.
73 | // It will return a normal response object that has the appropriate error code set.
74 | console.error(' Read-through caching failed:', error);
75 |
76 | throw error;
77 | });
78 | })
79 | );
80 | });
--------------------------------------------------------------------------------
/config.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | ocr-example
4 | An awesome Ionic/Cordova app.
5 | Ionic Framework Team
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
5 |