poc/pds
1
0
Fork 1
Code Issues Pull Requests 8 Actions Packages Projects Releases Wiki Activity

Added to save jpeg image logic in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-18 10:20:02 +05:30
parent 1df45cd9e7
commit d6f34b58ac
1 changed files with 69 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
resources/views/fields/camera-capture.blade.php
View File

@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', () => {
<canvas x-ref="canvas" width="320" height="240" class="hidden"></canvas>
<img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
<div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
{{-- <div x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
<video
x-ref="video"
autoplay
@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
<!-- no need to fix width/height here either -->
<canvas x-ref="canvas" class="hidden"></canvas>
<img x-ref="snapshot" class="hidden border rounded max-w-full">
<img x-ref="snapshot" class="hidden border rounded max-w-full"> --}}
{{--
@@ -67,12 +67,12 @@ document.addEventListener('DOMContentLoaded', () => {
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</x-filament::button>
</div> --}}
<div class="flex space-x-2 mt-2">
{{-- <div class="flex space-x-2 mt-2">
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken" class="inline-flex w-auto">Capture</x-filament::button>
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken" class="inline-flex w-auto">Retake</x-filament::button>
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
</div>
</div> --}}
@@ -81,7 +81,7 @@ document.addEventListener('DOMContentLoaded', () => {
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
<input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
{{-- <input type="hidden" x-ref="hiddenInput" id="camera_capture_field" name="camera_capture_file">
</div>
@@ -261,21 +261,32 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
}
</script>
</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 x-data="cameraCapture()" x-init="initCamera()" wire:ignore class="space-y-2">
<video
x-ref="video"
autoplay
playsinline
class="border rounded w-80 h-auto"
></video>
<canvas x-ref="canvas" class="hidden"></canvas>
<img x-ref="snapshot" class="hidden border rounded max-w-full">
<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>
<x-filament::button color="primary" @click="switchCamera" x-show="!photoTaken" class="inline-flex w-auto">Switch Camera</x-filament::button>
<x-filament::button color="primary" @click="verify" x-show="photoTaken" class="inline-flex w-auto">Verify</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" name="camera_capture_file_path">
<input type="hidden" x-ref="hiddenInput" x-model="photo1" name="camera_capture_file">
</div>
<script>
@@ -284,17 +295,27 @@ function cameraCapture() {
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 });
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. Use HTTPS and allow camera access.");
alert("Cannot access camera. Enable permissions or use HTTPS.");
}
},
async switchCamera() {
this.currentFacingMode = this.currentFacingMode === 'user' ? 'environment' : 'user';
await this.initCamera();
},
async capturePhoto() {
const video = this.$refs.video;
const canvas = this.$refs.canvas;
@@ -306,7 +327,7 @@ function cameraCapture() {
// Convert canvas to file
canvas.toBlob(async blob => {
const file = new File([blob], 'capture.png', { type: 'image/png' });
const file = new File([blob], 'capture.jpeg', { type: 'image/jpeg' });
console.log("File ready for upload:", file);
// Upload to temp folder
@@ -326,20 +347,50 @@ function cameraCapture() {
} else {
alert('Failed to save image.');
}
}, 'image/png');
}, 'image/jpeg');
this.photoTaken = true;
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
},
retakePhoto() {
// retakePhoto() {
// this.photoTaken = false;
// this.initCamera();
// }
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);
}
},
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.initCamera();
this.$refs.snapshot.classList.add('hidden');
this.$refs.video.classList.remove('hidden');
await this.initCamera();
}
}
}
</script> --}}
</script>