探索React Native OCR新境界:react-native-tesseract-ocr
import React, { useState } from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
import TesseractOCR from 'react-native-tesseract-ocr';
export default function App() {
const [ocrResult, setOcrResult] = useState('');
const performOCR = async () => {
try {
const imagePath = RNFetchBlob.fs.dirs.DocumentDir + '/test.jpg'; // 假设已经有一个名为test.jpg的图片在文档目录下
const result = await TesseractOCR.recognize(imagePath, 'ENG'); // 使用英语(ENG)训练数据进行OCR识别
setOcrResult(result);
} catch (error) {
console.error(error);
}
};
return (
<View style={styles.container}>
<Text style={styles.resultText}>OCR Result: {ocrResult}</Text>
<Button title="Perform OCR" onPress={performOCR} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
resultText: {
marginBottom: 20,
textAlign: 'center',
fontSize: 18,
}
});
这段代码展示了如何在React Native应用中使用react-native-tesseract-ocr
库进行OCR操作。首先,它定义了一个performOCR
函数,该函数调用TesseractOCR.recognize
方法来识别图片中的文字,并将结果存储在状态变量ocrResult
中。然后,在组件的渲染方法中,它渲染了一个按钮,当按下按钮时会触发performOCR
函数。最后,它使用<Text>
组件显示OCR识别的结果。
评论已关闭