Это приложение для демонстрации для создания сканера OCR для визитных карточек и хранить информацию в списке контактов телефона. В этом случае я буду наценивать только систему iOS, но это можно сделать для Android также. Я звоню в это приложение Card2Contact И это часть Alameda dev Исследования
Основные пакеты, которые нам понадобятся, являются тем, что для чтения изображений образуют камеру (реагистрационная камера)
Создание базы реагировать нативное приложение
React-Native init Card2Contact
Установка зависимостей
пряжа добавьте реагистрационную камеру –save
Настройте пакет реагировать-камеры
React-Native Link React-National-камера
Для iOS мы должны установить разрешения. В Info.plist Файл Добавить описание для NscamerausedEscription ключ. Это требуется от Apple, и он говорит, почему вам нужно получить доступ к камере. Тебе тоже нужно NsphotolibraryUsedescribry . Клавиша для хранения изображения в телефонной библиотеке.
NSCameraUsageDescription This app needs permission to access your phone camera. NSPhotoLibraryUsageDescription This app store photos in your phone library. NSPhotoLibraryAddUsageDescription This app store photos in your phone library.
Базовый экран компонента камеры
import React, {Component} from 'react';
import {StyleSheet, Dimensions, Text, View} from 'react-native';
import Camera from 'react-native-camera';
export default class App extends Component {
takePicture() {
this.camera.capture()
.then((data) => console.log(data))
.catch(err => console.error(err));
}
render() {
return (
{ this.camera = cam }}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}>
[CAPTURE CARD]
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
Добавить навигацию, чтобы показать фотоэкран для обработки
пряжа Добавить реагировать навигацию --save пряжа добавьте реагирутивную жест-обработчик --save React-National Link React - Жест-Жест-Обработчик
Переокрествовать код, чтобы добавить навигацию
App.js.
import React, {Component} from 'react';
import {StyleSheet, Dimensions, Text, View} from 'react-native';
import CameraScreen from './src/screens/CameraScreen'
import ContactScreen from './src/screens/ContactScreen'
import {createStackNavigator, createAppContainer} from 'react-navigation';
const AppNavigator = createStackNavigator({
CameraScreen: {
screen: CameraScreen
},
ContactScreen: {
screen: ContactScreen
}
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return Camerascreen.js.
import React, { Component } from 'react';
import { StyleSheet, Dimensions, Text, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
export default class CameraScreen extends Component {
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log(data.uri);
}
};
render() {
return (
{ this.camera = cam }}
style={styles.preview}
>
[CAPTURE CARD]
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
color: '#000',
padding: 10,
margin: 40
}
});
Contactscreen.js.
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class ContactScreen extends Component {
render() {
return (
ContactScreen
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Использование Google Cloud Vision API для извлечения данных с фотографии
У Google есть отличный API для обнаружения текста и извлечения (OCR), которые мы можем использовать для этой цели. Для использования этой API вам нужно создать Проект Google Cloud Platform (GCP)
Перейдите на веб-страницу и создайте новый проект
После этого перейдите в свой проект и создайте учетные данные API для использования в вашем реагированном нативном проекте
Скопируйте свой ключ API и сохраните его в безопасном месте
Давайте добавим видение API для этого проекта
Ищите API Vision и нажмите Включить
Не забудьте включить выставление счетов за проекты, как это требуется
Код для обнаружения текста
Давайте изменим код в Camerascreen.js Файл и добавьте новый метод для подключения с API Google Vision.
Конечная точка API для Google Vision – https://vision.googleapis.com/v1/images:antate И вам нужно пройти ключ для аутентификации.
Camerascreen.js.
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
this.detectText(data.base64)
}
};
detectText(base64){
fetch("https://vision.googleapis.com/v1/images:annotate?key=" + "YOUR API KEY", {
method: 'POST',
body: JSON.stringify({
"requests": [{
"image": { "content": base64 },
"features": [
{ "type": "TEXT_DETECTION" }
]}]
})
})
.then(response => { return response.json()})
.then(jsonRes => {
let text = jsonRes.responses[0].fullTextAnnotation.text
this.props.navigation.navigate('ContactScreen', { text: text })
}).catch(err => {
console.log('Error', err)
})
}
Conatctscreen.js.
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class ContactScreen extends Component {
constructor(props){
super(props)
const { navigation } = this.props
const text = navigation.getParam('text')
const lines = text.match(/[^\r\n]+/g)
this.state = {
text: text,
lines: lines
}
console.log('text', text)
console.log('lines', lines)
}
render() {
return (
ContactScreen
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Создание формы просмотра контактов
Давайте отобразим список текста, возвращаемого Google API, и вместе с ним формы, чтобы выбрать тип текста, чтобы классифицировать его для контакта.
NPM Установка React-Native-Picker-Select
А также добавьте кнопку на нижней части, чтобы сохранить информацию.
import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity} from 'react-native';
import RNPickerSelect from 'react-native-picker-select';
export default class ContactScreen extends Component {
static navigationOptions = {
title: 'New Contact'
}
constructor(props){
super(props)
const { navigation } = this.props
const text = navigation.getParam('text')
const lines = text.match(/[^\r\n]+/g)
this.state = {
text: text,
lines: lines,
contact: {
familyName: null,
givenName: null,
phoneNumbers: [],
emailAddresses: [],
company: null
},
lineTypes: [
{label: 'Last Name', value: 'familyName'},
{label: 'First Name', value: 'givenName'},
{label: 'Phone Number', value: 'phoneNumbers'},
{label: 'Email Address', value: 'emailAddresses'},
{label: 'Company', value: 'company'}
]
}
this.selectedType = this.selectedType.bind(this)
}
selectedType(type, value) {
var updatedContact = Object.assign({}, this.state.contact)
if (type == 'phoneNumbers') {
updatedContact[type].push({label: "mobile", number: value.replace(/ /g,'')})
} else if (type == 'emailAddresses'){
updatedContact[type].push({label: "work", email: value.replace(/ /g,'')})
} else {
updatedContact[type] = value
}
this.setState({contact:updatedContact});
}
render() {
console.log('state', this.state)
return (
{
this.state.lines.map((line, index) => {
return (
{line}
this.selectedType(type, line)}
items={this.state.lineTypes}
style={styles.picker}
/>
)
})
}
Save Contact
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
lineContainer: {
flex: 1,
borderColor: '#666666',
borderWidth: 1,
padding: 10
},
picker: {
fontSize: 16,
borderWidth: 1,
borderColor: 'gray',
borderRadius: 4,
backgroundColor: 'white',
color: 'black',
},
saveButton: {
alignContent: 'center',
alignSelf: 'center',
paddingVertical: 15
}
});
Использование контактного пакета для сохранения контактных данных
NPM Установка React-Nature-Contacts --save реактивная ссылка
Добавьте Kit Consipy “Разрешение” Клавиши к вашему xcode Info.plist файл, чтобы сделать запросную работу. В противном случае ваше приложение вылетает при запросе определенного разрешения.
Откройте XCODE> Откройте iOS/yourapp.xcodeProj> info.plist> Добавить клавишу Конфиденциальность – Контакты Описание использования с вашим комплектным разрешением. Значение ключа является необязательным в разработке. Если вы отправляете в App Store, значение должно объяснить, почему вам нужно это разрешение.
saveContact() {
let contact = this.state.contact
if (contact.givenName == null || contact.phoneNumbers.length == 0) {
alert('Select at least an option for Name and Phone')
} else {
Contacts.openContactForm(this.state.contact, (err) => {
if (err) {
alert('Select an option')
}
this.props.navigation.navigate('ContactScreen', { text: this.state.lines })
})
}
}
И мы закончили !!