Scribd
Upload
6 views4 pages

Try Ocr

The document is a React component for managing captured images, allowing users to apply brightness and contrast filters, save or delete images, and perform Optical Character Recognition (OCR) using Tesseract.js. It utilizes local storage to retrieve and display images, and provides controls for navigating through the images and adjusting their appearance. Additionally, it includes functionality to display extracted text from the images in a table format.

Uploaded by

awaistest530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views4 pages

Try Ocr

The document is a React component for managing captured images, allowing users to apply brightness and contrast filters, save or delete images, and perform Optical Character Recognition (OCR) using Tesseract.js. It utilizes local storage to retrieve and display images, and provides controls for navigating through the images and adjusting their appearance. Additionally, it includes functionality to display extracted text from the images in a table format.

Uploaded by

awaistest530
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

'use client';

import React, { useState, useEffect } from 'react';


import Tesseract from 'tesseract.js';
import styles from '@/app/detection-system/captured/captured.module.css';
import axios from 'axios';
import Link from 'next/link'; // <-- Added for routing
import { useRouter } from 'next/navigation';

const base_url = process.env.NEXT_PUBLIC_URL;

function CapturedImages() {
const [images, setImages] = useState([]);
const [selectedIndex, setSelectedIndex] = useState(0);
const [brightness, setBrightness] = useState(100);
const [contrast, setContrast] = useState(100);
const [filteredImage, setFilteredImage] = useState('');
const [message, setMessage] = useState('');
const [extractedTexts, setExtractedTexts] = useState([]); // State for OCR
results

useEffect(() => {
const storedImages = JSON.parse(localStorage.getItem('capturedImages')) || [];
setImages(storedImages);
if (storedImages.length > 0) {
setFilteredImage(storedImages[0]);
}
}, []);

const applyFilters = (src) => {


const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
const img = new Image();

img.src = src;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
context.filter = `brightness(${brightness}%) contrast(${contrast}%)`;
context.drawImage(img, 0, 0, canvas.width, canvas.height);
setFilteredImage(canvas.toDataURL('image/png'));
};
};

const handleBrightnessChange = (e) => {


setBrightness(e.target.value);
if (images.length > 0) {
applyFilters(images[selectedIndex]);
}
};

const handleContrastChange = (e) => {


setContrast(e.target.value);
if (images.length > 0) {
applyFilters(images[selectedIndex]);
}
};

const handleSaveImage = async () => {


const imageToSave = images[selectedIndex];
try {
const response = await axios.post(`${base_url}records`, {
number: 'Your Number Plate Text Here',
imageUrl: imageToSave,
});
console.log('Image saved:', response.data);
setMessage('Image saved successfully!');
} catch (error) {
console.error('Error saving image:', error);
setMessage('Error saving image.');
}
};

const handleDeleteImage = () => {


const updatedImages = images.filter((_, index) => index !== selectedIndex);
setImages(updatedImages);
setSelectedIndex((prevIndex) => (prevIndex > 0 ? prevIndex - 1 : 0));
localStorage.setItem('capturedImages', JSON.stringify(updatedImages));
if (updatedImages.length > 0) {
applyFilters(updatedImages[Math.max(0, selectedIndex - 1)]);
} else {
setFilteredImage('');
}
};

const handleCheckOCR = async () => {


const result = await Tesseract.recognize(images[selectedIndex], 'eng+urd', {
tessedit_char_whitelist:
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-‫'۔‬,
});
const extractedText = result.data.text.trim();
console.log('Extracted text:', extractedText);

if (extractedText) {
setExtractedTexts((prevTexts) => [...prevTexts, extractedText]);
}
};

const nextImage = () => {


setSelectedIndex((prevIndex) => (prevIndex + 1) % images.length);
applyFilters(images[(selectedIndex + 1) % images.length]);
};

const prevImage = () => {


setSelectedIndex((prevIndex) => (prevIndex - 1 + images.length) %
images.length);
applyFilters(images[(selectedIndex - 1 + images.length) % images.length]);
};

useEffect(() => {
if (images.length > 0) {
applyFilters(images[selectedIndex]);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [images, selectedIndex]);

return (
<div className={styles.container}>
<h1>Captured Images</h1>
<div className={styles.imageGallery}>
{images.length > 0 && (
<>
<button onClick={prevImage} className={`${styles.arrowButton} $
{styles.left}`}>
❮
</button>
<img src={filteredImage} alt="Selected"
className={styles.capturedImage} />
<button onClick={nextImage} className={`${styles.arrowButton} $
{styles.right}`}>
❯
</button>
</>
)}
</div>

{images.length > 0 && (


<div className={styles.preprocessControls}>
<label>Brightness:</label>
<input
type="range"
min="0"
max="200"
value={brightness}
onChange={handleBrightnessChange}
/>
<label>Contrast:</label>
<input
type="range"
min="0"
max="200"
value={contrast}
onChange={handleContrastChange}
/>
</div>
)}

<div className={styles.buttonGroup}>
<button onClick={handleSaveImage}>Save Image</button>
<button onClick={handleDeleteImage}>Delete Image</button>
{/*
Instead of a normal button for Try OCR,
we add a <Link> to your fileUpload page
carrying the selected image as query param.
*/}
<Link
href={{
pathname: '/file-upload', // <-- Adjust this to wherever your
fileUpload route is
query: { imageName: images[selectedIndex] },
}}
>
<button>Try OCR</button>
</Link>
</div>
{message && <p>{message}</p>}

{/* OCR Results Table */}


{extractedTexts.length > 0 && (
<div className={styles.ocrTableContainer}>
<h2>Extracted Number Plates</h2>
<table className={styles.ocrTable}>
<thead>
<tr>
<th>Number Plate Text</th>
</tr>
</thead>
<tbody>
{extractedTexts.map((text, index) => (
<tr key={index}>
<td>{text}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
}

export default CapturedImages;

You might also like