chnaged logic in ocr for capturing image in high quality
This commit is contained in:
@@ -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>
|
<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>
|
<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">
|
<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="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="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="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
|
||||||
<x-filament::button color="primary" @click="verify" x-show="photoTaken">Verify</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" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
|
||||||
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
|
{{-- <input type="hidden" x-ref="hiddenInput" name="camera_capture"> --}}
|
||||||
@@ -185,8 +211,13 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
const snapshot = this.$refs.snapshot;
|
const snapshot = this.$refs.snapshot;
|
||||||
const context = canvas.getContext('2d');
|
const context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
canvas.width = video.videoWidth;
|
||||||
|
canvas.height = video.videoHeight;
|
||||||
|
|
||||||
context.drawImage(video, 0, 0, canvas.width, canvas.height);
|
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());
|
if (this.stream) this.stream.getTracks().forEach(track => track.stop());
|
||||||
|
|
||||||
@@ -230,9 +261,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user