chnaged logic in ocr for capturing image in high quality

This commit is contained in:
dhanabalan
2025-10-18 09:44:51 +05:30
parent 41fce18aa2
commit df45f150f1

View File

@@ -41,17 +41,43 @@ document.addEventListener('DOMContentLoaded', () => {
<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2" wire:ignore 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"> --}}
<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>
<!-- 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">
<div class="flex space-x-2 mt-2">
{{--
<div class="flex space-x-8 mt-2">
<x-filament::button color="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
<x-filament::button color="primary" @click="retakePhoto" x-show="photoTaken">Retake</x-filament::button>
<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> --}}
<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>
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
@@ -185,8 +211,13 @@ document.addEventListener('DOMContentLoaded', () => {
const snapshot = this.$refs.snapshot;
const context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataUrl = canvas.toDataURL('image/png');
//const dataUrl = canvas.toDataURL('image/png');
const dataUrl = canvas.toDataURL('image/png', 1.0);
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
@@ -230,9 +261,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
}
</script>