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

changed logic in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-17 10:28:05 +05:30
parent 3d0c67a6d8
commit a7bd814706
1 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
{{-- logic --}} {{-- logic --}}
<div x-data="cameraCapture()" x-init="initCamera()" class="space-y-2"> {{-- <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> <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"> <img x-ref="snapshot" class="hidden border rounded max-w-full">
@@ -53,9 +53,23 @@ document.addEventListener('DOMContentLoaded', () => {
</div> </div>
{{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}} {{-- <input type="hidden" name="{{ $getName() }}" x-ref="hiddenInput"> --}}
{{-- <input type="hidden" x-ref="hiddenInput" x-model="photo1">
</div> --}}
<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 border rounded"></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>
<x-filament::button color="gray" @click="switchCamera" x-show="!photoTaken">Switch Camera</x-filament::button>
</div>
<input type="hidden" x-ref="hiddenInput" x-model="photo1"> <input type="hidden" x-ref="hiddenInput" x-model="photo1">
</div> </div>
<script> <script>
function cameraCapture() { function cameraCapture() {
return { return {
@@ -86,28 +100,55 @@ function cameraCapture() {
await this.initCamera(); 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');
// this.photoTaken = true;
// this.$refs.hiddenInput.value = dataUrl;
// //@this.set('photo1', dataUrl);
// },
capturePhoto() { capturePhoto() {
const video = this.$refs.video; const video = this.$refs.video;
const canvas = this.$refs.canvas; const canvas = this.$refs.canvas;
const snapshot = this.$refs.snapshot;
const context = canvas.getContext('2d'); const context = canvas.getContext('2d');
// draw video frame to canvas
context.drawImage(video, 0, 0, canvas.width, canvas.height); context.drawImage(video, 0, 0, canvas.width, canvas.height);
// convert to data URL
const dataUrl = canvas.toDataURL('image/png'); const dataUrl = canvas.toDataURL('image/png');
// stop camera stream after capture // store to Livewire
@this.set('photo1', dataUrl);
// stop camera
if (this.stream) { if (this.stream) {
this.stream.getTracks().forEach(track => track.stop()); this.stream.getTracks().forEach(track => track.stop());
this.stream = null;
} }
snapshot.src = dataUrl;
snapshot.classList.remove('hidden');
this.photoTaken = true; this.photoTaken = true;
this.$refs.hiddenInput.value = dataUrl; // hide video and show canvas in the same place
//@this.set('photo1', dataUrl); video.classList.add('hidden');
canvas.classList.remove('hidden');
}, },
async retakePhoto() { async retakePhoto() {
this.photoTaken = false; this.photoTaken = false;
this.$refs.snapshot.classList.add('hidden'); this.$refs.snapshot.classList.add('hidden');