gregwebs · October 24, 2024 17:54
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to Text Converter</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        #drop-area {
            border: 2px dashed #ccc;
            border-radius: 10px;
            width: 300px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }
        #output {
            margin-top: 20px;
            white-space: pre-wrap;
        }
    </style>
 </head>
 <body>
    <div id="drop-area">Drop an image here</div>
    <div id="output"></div>

    <script>
        const dropArea = document.getElementById('drop-area');
        const output = document.getElementById('output');

        // Prevent default behavior (Prevent file from being opened)
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
            document.body.addEventListener(eventName, preventDefaults, false);
        });

        // Highlight drop area when item is dragged over it
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        // Handle dropped files
        dropArea.addEventListener('drop', handleDrop, false);

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        function highlight() {
            dropArea.classList.add('highlight');
        }

        function unhighlight() {
            dropArea.classList.remove('highlight');
        }

        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;

            if (files.length > 0) {
                handleFiles(files);
            }
        }

        function handleFiles(files) {
            const file = files[0];
            const reader = new FileReader();
            
            reader.onload = function(event) {
                const img = new Image();
                img.src = event.target.result;
                img.onload = () => {
                    recognizeText(img);
                };
            };

            reader.readAsDataURL(file);
        }

        function recognizeText(img) {
            Tesseract.recognize(
                img.src,
                'eng',
                {
                    logger: info => console.log(info) // Optional: Log progress
                }
            ).then(({ data: { text } }) => {
                output.textContent = text;
            }).catch(err => {
                output.textContent = 'Error: ' + err.message;
            });
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Image to Text Converter</title>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tesseract.min.js"></script>
	<style>
	body {
	font-family: Arial, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #f0f0f0;
	}
	#drop-area {
	border: 2px dashed #ccc;
	border-radius: 10px;
	width: 300px;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	}
	#output {
	margin-top: 20px;
	white-space: pre-wrap;
	}
	</style>
	</head>
	<body>
	<div id="drop-area">Drop an image here</div>
	<div id="output"></div>

	<script>
	const dropArea = document.getElementById('drop-area');
	const output = document.getElementById('output');

	// Prevent default behavior (Prevent file from being opened)
	['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, preventDefaults, false);
	document.body.addEventListener(eventName, preventDefaults, false);
	});

	// Highlight drop area when item is dragged over it
	['dragenter', 'dragover'].forEach(eventName => {
	dropArea.addEventListener(eventName, highlight, false);
	});
	['dragleave', 'drop'].forEach(eventName => {
	dropArea.addEventListener(eventName, unhighlight, false);
	});

	// Handle dropped files
	dropArea.addEventListener('drop', handleDrop, false);

	function preventDefaults(e) {
	e.preventDefault();
	e.stopPropagation();
	}

	function highlight() {
	dropArea.classList.add('highlight');
	}

	function unhighlight() {
	dropArea.classList.remove('highlight');
	}

	function handleDrop(e) {
	const dt = e.dataTransfer;
	const files = dt.files;

	if (files.length > 0) {
	handleFiles(files);
	}
	}

	function handleFiles(files) {
	const file = files[0];
	const reader = new FileReader();

	reader.onload = function(event) {
	const img = new Image();
	img.src = event.target.result;
	img.onload = () => {
	recognizeText(img);
	};
	};

	reader.readAsDataURL(file);
	}

	function recognizeText(img) {
	Tesseract.recognize(
	img.src,
	'eng',
	{
	logger: info => console.log(info) // Optional: Log progress
	}
	).then(({ data: { text } }) => {
	output.textContent = text;
	}).catch(err => {
	output.textContent = 'Error: ' + err.message;
	});
	}
	</script>
	</body>
	</html>