Added ne wlogic in ocr blade file
This commit is contained in:
dhanabalan
@@ -39,7 +39,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
</script> --}}
|
||||
|
||||
<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
|
||||
|
||||
|
||||
<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore class="space-y-2">
|
||||
<video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
|
||||
<canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
|
||||
<img x-ref="snapshot" class="hidden border rounded max-w-full">
|
||||
@@ -48,25 +50,118 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
|
||||
<x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
|
||||
<x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
|
||||
<x-filament::button color="gray" @click="verify" x-show="photoTaken">Verify</x-filament::button>
|
||||
</div>
|
||||
|
||||
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
|
||||
<input type="hidden" x-ref="hiddenInput" x-model="photo1">
|
||||
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
|
||||
<input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@4.1.2/dist/tesseract.min.js"></script>
|
||||
<script>
|
||||
|
||||
// function cameraCapture()
|
||||
// {
|
||||
// return
|
||||
// {
|
||||
// stream: null,
|
||||
// currentFacingMode: 'user', // 'user' = front, 'environment' = back
|
||||
// photoTaken: false,
|
||||
// photo1: '',
|
||||
|
||||
// async initCamera() {
|
||||
// try {
|
||||
// if (this.stream) {
|
||||
// this.stream.getTracks().forEach(track => track.stop());
|
||||
// }
|
||||
|
||||
// this.stream = await navigator.mediaDevices.getUserMedia({
|
||||
// video: { facingMode: this.currentFacingMode }
|
||||
// });
|
||||
|
||||
// this.$refs.video.srcObject = this.stream;
|
||||
// } catch (err) {
|
||||
// console.error("Camera error:", err);
|
||||
// alert("Cannot access camera. Enable permissions or use HTTPS.");
|
||||
// }
|
||||
// },
|
||||
|
||||
// async switchCamera() {
|
||||
// this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
|
||||
// await this.initCamera();
|
||||
// },
|
||||
|
||||
// capturePhoto() {
|
||||
// const video = this.$refs.video;
|
||||
// const canvas = this.$refs.canvas;
|
||||
// const snapshot = this.$refs.snapshot;
|
||||
// const context = canvas.getContext('2d');
|
||||
|
||||
// context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
// const dataUrl = canvas.toDataURL('image/png');
|
||||
|
||||
// // stop camera stream after capture
|
||||
// if (this.stream) {
|
||||
// this.stream.getTracks().forEach(track => track.stop());
|
||||
// }
|
||||
|
||||
// snapshot.src = dataUrl;
|
||||
// snapshot.classList.remove('hidden');
|
||||
// video.classList.add('hidden');
|
||||
// this.photoTaken = true;
|
||||
|
||||
// // this.photo1 = dataUrl;
|
||||
// this.$refs.hiddenInput.value = dataUrl;
|
||||
// // @this.set('photo1', dataUrl);
|
||||
// console.log('Captured Image:', dataUrl);
|
||||
// },
|
||||
|
||||
// async verifyOCR(dataUrl) {
|
||||
// try {
|
||||
// const { data: { text } } = await Tesseract.recognize(
|
||||
// dataUrl,
|
||||
// 'eng', // language
|
||||
// { logger: m => console.log(m) } // optional
|
||||
// );
|
||||
// alert("OCR Result: " + text);
|
||||
// } catch (err) {
|
||||
// console.error(err);
|
||||
// alert("OCR Failed: " + err.message);
|
||||
// }
|
||||
// },
|
||||
|
||||
// async verify() {
|
||||
// const dataUrl = this.$refs.hiddenInput.value;
|
||||
// if (!dataUrl) {
|
||||
// alert("No captured image found!");
|
||||
// return;
|
||||
// }
|
||||
// await this.verifyOCR(dataUrl);
|
||||
// },
|
||||
|
||||
// async retakePhoto() {
|
||||
// this.photoTaken = false;
|
||||
// this.$refs.snapshot.classList.add('hidden');
|
||||
// this.$refs.video.classList.remove('hidden');
|
||||
// await this.initCamera();
|
||||
// }
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
function cameraCapture() {
|
||||
return {
|
||||
stream: null,
|
||||
currentFacingMode: 'user', // 'user' = front, 'environment' = back
|
||||
currentFacingMode: 'user',
|
||||
photoTaken: false,
|
||||
photo1: '',
|
||||
|
||||
async initCamera() {
|
||||
try {
|
||||
if (this.stream) {
|
||||
this.stream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: this.currentFacingMode }
|
||||
@@ -93,22 +188,40 @@ function cameraCapture() {
|
||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
const dataUrl = canvas.toDataURL('image/png');
|
||||
|
||||
// stop camera stream after capture
|
||||
if (this.stream) {
|
||||
this.stream.getTracks().forEach(track => track.stop());
|
||||
}
|
||||
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||
|
||||
snapshot.src = dataUrl;
|
||||
snapshot.classList.remove('hidden');
|
||||
video.classList.add('hidden');
|
||||
this.photoTaken = true;
|
||||
|
||||
this.photo1 = dataUrl;
|
||||
this.$refs.hiddenInput.value = dataUrl;
|
||||
@this.set('photo1', dataUrl);
|
||||
console.log('Captured Image:', dataUrl);
|
||||
},
|
||||
|
||||
async verifyOCR(dataUrl) {
|
||||
try {
|
||||
const { data: { text } } = await Tesseract.recognize(
|
||||
dataUrl,
|
||||
'eng',
|
||||
{ logger: m => console.log(m) }
|
||||
);
|
||||
alert("OCR Result: " + text);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert("OCR Failed: " + err.message);
|
||||
}
|
||||
}, // <-- COMMA ADDED HERE
|
||||
|
||||
async verify() {
|
||||
const dataUrl = this.$refs.hiddenInput.value;
|
||||
if (!dataUrl) {
|
||||
alert("No captured image found!");
|
||||
return;
|
||||
}
|
||||
await this.verifyOCR(dataUrl);
|
||||
},
|
||||
|
||||
async retakePhoto() {
|
||||
this.photoTaken = false;
|
||||
this.$refs.snapshot.classList.add('hidden');
|
||||
@@ -117,5 +230,88 @@ function cameraCapture() {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
{{-- //..Another Option --}}
|
||||
|
||||
{{-- <div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2">
|
||||
<video x-ref="video" width="320" height="240" autoplay playsinline class="border rounded"></video>
|
||||
<canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
|
||||
|
||||
<div class="flex space-x-4 mt-2">
|
||||
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
|
||||
<x-filament::button color="secondary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
|
||||
</div>
|
||||
|
||||
<input type="hidden" x-ref="hiddenInput" name="camera_capture_file_path">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function cameraCapture() {
|
||||
return {
|
||||
stream: null,
|
||||
photoTaken: false,
|
||||
|
||||
async initCamera() {
|
||||
try {
|
||||
if (this.stream) this.stream.getTracks().forEach(t => t.stop());
|
||||
this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
this.$refs.video.srcObject = this.stream;
|
||||
} catch (err) {
|
||||
console.error("Camera error:", err);
|
||||
alert("Cannot access camera. Use HTTPS and allow camera access.");
|
||||
}
|
||||
},
|
||||
|
||||
async capturePhoto() {
|
||||
const video = this.$refs.video;
|
||||
const canvas = this.$refs.canvas;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Convert canvas to file
|
||||
canvas.toBlob(async blob => {
|
||||
const file = new File([blob], 'capture.png', { type: 'image/png' });
|
||||
console.log("File ready for upload:", file);
|
||||
|
||||
// Upload to temp folder
|
||||
const formData = new FormData();
|
||||
formData.append('photo', file);
|
||||
|
||||
const response = await fetch('/temp-upload', {
|
||||
method: 'POST',
|
||||
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
this.$refs.hiddenInput.value = data.path; // Filament form hidden input
|
||||
console.log("Saved to temp:", data.path);
|
||||
} else {
|
||||
alert('Failed to save image.');
|
||||
}
|
||||
}, 'image/png');
|
||||
|
||||
this.photoTaken = true;
|
||||
|
||||
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||
},
|
||||
|
||||
retakePhoto() {
|
||||
this.photoTaken = false;
|
||||
this.initCamera();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script> --}}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user