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

added image width in ocr

Browse Source
This commit is contained in:
dhanabalan
2025-10-24 17:35:37 +05:30
parent c3259710f6
commit 8d49937a68
1 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -276,7 +276,11 @@ document.addEventListener('DOMContentLoaded', () => {
<canvas x-ref="canvas" class="hidden"></canvas> <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"> --}}
<img x-ref="snapshot"
class="hidden border rounded"
style="width: 100%; max-width: 350px; height: auto;">
<div class="flex space-x-4 mt-2"> <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="primary" @click="capturePhoto" x-show="!photoTaken">Capture</x-filament::button>
@@ -334,31 +338,32 @@ function cameraCapture() {
ctx.drawImage(video, 0, 0); ctx.drawImage(video, 0, 0);
const snapshot = this.$refs.snapshot; const snapshot = this.$refs.snapshot;
snapshot.src = canvas.toDataURL('image/png'); snapshot.src = canvas.toDataURL('image/png');
// ✅ Show cropped image view first // ✅ Wait until the SNAPSHOT image loads before cropper!
snapshot.onload = () => { snapshot.onload = () => {
snapshot.classList.remove('hidden'); snapshot.classList.remove('hidden');
video.classList.add('hidden'); video.classList.add('hidden');
this.photoTaken = true;
this.stopCamera();
// ✅ Now start Cropper (only after image becomes visible) this.photoTaken = true;
// this.cropper?.destroy(); this.stopCamera(); // ✅ Now camera turns off immediately
// this.cropper = new Cropper(snapshot, {
// aspectRatio: NaN, // free crop // ✅ Ensure previous cropper destroyed
// dragMode: 'crop', if (this.cropper) {
// viewMode: 1, this.cropper.destroy();
// autoCropArea: 0.8, }
// background: false,
// }); // ✅ Start Cropper only after image rendered
this.cropper = new Cropper(snapshot, { this.cropper = new Cropper(snapshot, {
aspectRatio: NaN, // User free crop area aspectRatio: NaN,
viewMode: 1 dragMode: 'crop',
viewMode: 1,
autoCropArea: 1,
background: false,
}); });
}; };
}, },
// //
async uploadCroppedImage() { async uploadCroppedImage() {